Showing Groups of Pages in 11ty

There are a few ways that you can generate lists of pages (posts) in 11ty. This post looks at how to based on tags, custom front-matter variables, and listing all of the files in a folder.

You can follow along with this by using the collections-example repository.

  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. Clone that new repository to VS Code.

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 all pages with custom front-matter

Example Code: List pages with custom front-matter

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 1
layout: post.njk
tags: [post, othertag]
author: Imani Washington
---

Then you can add this same author variable to other posts.

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.

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

Note: The if statment is the key here that means it only shows pages that have a specific author tag.

Below is a more full-featured way of doing the same thing where we could lists add aria-current if the page being listed is the one we’re on.

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

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 %}

Example Code: List pages by tag

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>

1 comment

Leave a comment