DEV Community

Cover image for Creating a Featured Posts collection in 11ty
Jonathan Yeong
Jonathan Yeong

Posted on

6 2

Creating a Featured Posts collection in 11ty

My site jonathanyeong.com is built using Eleventy (11ty). 11ty is a static site generator that is flexible with folder structure, data, and templates. This flexibility makes it really easy to add new features or customizations to your site. One feature that I wanted on my site is "Featured Posts". These posts would be the first posts you see on the homepage. They would be handpicked by me. And I wanted to define an ordering for them.

Here's how I set up Featured Posts.

Defining the front matter

11ty allows you define some data in your templates through front matter. Front matter is a block of text between a pair of three dashes. In the example below, I'm using yaml front matter to add some metadata to my post. Here are the 11ty docs for more on Front Matter data.

The two lines relevant to this tutorial are featured_posts: true and post_weight: 1.0.

---
date: 2020-12-15T00:00:00-08:00
title: Blog post title
published: true
featured_post: true
post_weight: 1.0
---

<h1>Post Content<h1>
Enter fullscreen mode Exit fullscreen mode

Now that the front matter is squared away we need to create the Featured Posts collection.

Creating the collection

A collection in 11ty is an array of objects. These objects can come from any number of places. Let's break down how we create the featuredPosts collection.

  1. Specify the collection that we're creating via addCollection('featuredPosts'....
  2. Get all my markdown posts from /src/posts/ using getFilteredByGlob.
  3. Filter the collection by published and featured_post. These two pieces of data come from the front matter we declared above.
  4. Sort the filtered collection by post_weight. The largest post weight will be the first post you see in the featuredPosts collection.
  5. Now you can use this collection in your 11ty templates via collections.featuredPosts.
eleventyConfig.addCollection('featuredPosts', collection => {
 return collection.getFilteredByGlob('./src/posts/*.md')
   .filter(
     post => post.data.featured_post && p.data.published
   )
   .sort((a,b) => {
     return a.data.post_weight - b.data.post_weight;
   });
});
Enter fullscreen mode Exit fullscreen mode

There's a lot more you can do with collections. If you're interested here are the 11ty docs on collections. I hope this tutorial has inspired you to add featured posts to your site. Or to create your own collection!

I'd love to know if this article helped you or if you found it confusing. Please leave a comment below, I can't wait to read them!

Heroku

Build apps, not infrastructure.

Dealing with servers, hardware, and infrastructure can take up your valuable time. Discover the benefits of Heroku, the PaaS of choice for developers since 2007.

Visit Site

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay