Skip to content

Collections in Eleventy

There are a few ways that you can generate lists of pages in 11ty. Eleventy has a concept called Collections that are a group of content. This post looks at how to show pages in a collection. That collection can be based on tags, custom front-matter variables, and a listing all of the files in a folder.

Introduction to Templates and Collections

This video walks through what Templates are and what Collections are and how you can use them together to dynamic lists of pages, galleries and more.

Link to Dropbox video with closed captioning. Same video embedded below.

Miro Boards

Here are two Miro boards that I will use in videos and in class to help explain how Collections and Templates work.

Collections Example

This video walks through the Collections Example List all pages with a tag

You can follow along with the video by using the collections-example repository, the video above and the instructions below.

  1. Click on the link for the repo: https://github.com/profstein/collections-example
  2. Click Use this template
  3. Go through the steps to create your version of the repository
  4. Open a Codespace for your repository

List all pages with a tag

By default 11ty creates a collection for each tag on a page. You can use this to tell it to go through that collection and then show all of the pages that have a tag.

Example Code: List pages by tag

First you must add a tag to pages in their front matter. For example you might create post.md and put this front-matter in

---
title: Post 1
layout: post.njk
tags: [post, othertag]
---

Then you can add this same tag in front-matter of other pages.

List Pages with “post” tag

Next we will create the list of posts. This can be wherever you want. In this example we will create a blog.md file and put this in to list the pages:

<ul>
  {%- for post in collections.post %}
  <li>
  <a href="{{ post.url }}">
  {{ post.data.title }}
  </a>
  </li>
  {%- endfor %}
</ul>

Note: To list posts with a different tag, you would change what collection you were using in the For Loop. For example to list posts with a banana tag:

{%- for post in collections.banana %}

List pages with custom front-matter

The video below walks through the two custom front-matter examples below. Before you do this, you will need to have created the collections example repository as instructed above.

Example Code: List all pages by author of the current page

In this example, we are going to list other posts by the author of the current page. In order to do it we will first need to add author information to the front matter of our posts, then we will write some Nunjucks code to look at all of our posts and pull out those with the same author as the current page.

First you must add the custom front matter. For example you might create post.md and put this front-matter to track the author

---
title: Post 2
layout: post.njk
tags: [post, sand, breeze, sea, sun]
author: Author 2
location: aruba
---

Then you would add this same author variable to other posts. by that Author

List Pages with a specific author value

Next we will create the list of posts for an author. The trick here is adding the if statement to check for posts with the author value we want.

This code would go on the post page wherever you want the list of posts to show up. You could also place it in a special post template so that it would automatically show up on all posts that use the template. 

<p>Posts by {{author}}</p>
<ul role="list">
{% for post in collections.post %}
    {% if author === post.data.author %}
    <li>
        <a href="{{ post.url }}">
            {{ post.data.title }}
        </a>
    </li>
    {% endif %}
{%- endfor %}
</ul>

Example Code: List all pages by a specific author

In this example, we are going to list the posts by a specific author. It is not as flexible as the code above, but you may want to have a page where you filter acollection based on a specific value.

You will still need to have the custom front matter.

Next we will create the list of posts for an author. You could change this to use whatever custom variable and value you want to use.

This code would go on the post page wherever you want the list of posts to show up. 

<p>Posts by Author 2</p>
<ul role="list">
{% for post in collections.post %}
{% if post.data.author === "Author 2" %}
  <li>
    <a href="{{ post.url }}">
        {{ post.data.title }}
    </a>
  </li>
{% endif %}
{%- endfor %}
</ul>

You could change the variable, author, or the value, Author 2, to meet the variable and value you want to use.

Use Custom Collection to List all pages in a folder

This one allows you to list all pages in a folder. That means you don’t have to remember to add the same tag to all of the files you want to include. It does mean that you have to add some custom code to eleventy.js to create the Custom Collection. A Custom Collection is one that you define (instead of one 11ty automatically defines, like for tags).

Example Code: List pages in a folder

First we have to edit .eleventy.js in order to add a Custom Collection. It is important to add this eleventyConfig right after the other eleventyConfig statements and before the return

screenshot of .eleventy.js file
eleventyConfig.addCollection("postsFolder", function(collectionApi) {
    return collectionApi.getFilteredByGlob("**/posts/*.md").sort(function(a, b) {
      //return a.date - b.date; // sort by date - ascending
      return b.date - a.date; // sort by date - descending
    });
});

Now we have defined a Custom Collection named postsFolder. We can use this like the tag collections.

If you wanted to use a different folder then you could change “**/posts/*.md” to something else like “**/gallery/*.md” if you had a gallery folder.

Next we will create the list of posts. This is like we did for tags but using the custom collection name.

<ul>
  {%- for post in collections.postsFolder %}
  <li>
  <a href="{{ post.url }}">
  {{ post.data.title }}
  </a>
  </li>
  {%- endfor %}
</ul>

Leave a Reply