We The Protesters
Eleventy
The possum is Eleventy’s mascot
Eleventy Documentation
Menu
Compare ×4000 file build
Eleventy 1.93s
Next.js 70.65s

Quick Tip #004—Zero Maintenance Tag Pages for your Blog

This quick tip will show you how to automatically generate Tag Pages (lists of content tagged into a collection).

We’ll use pagination to automatically generate a template for each tag we want to link to.

Here’s a sample pagination template using Nunjucks:

---
pagination:
  data: collections
  size: 1
  alias: tag
permalink: /tags/{{ tag }}/
---
<h1>Tagged “{{ tag }}”</h1>

<ol>
{% set taglist = collections[ tag ] %}
{% for post in taglist | reverse %}
  <li><a href="{{ post.url }}">{{ post.data.title }}</a></li>
{% endfor %}
</ol>

First up notice how we’re pointing our pagination to iterate over collections, which is an object keyed with tag names pointing to the collection of content containing that tag.

Consider these two sample markdown posts, one using a tech tag and one using a personal tag:

---
title: My First Post
tags:
  - tech
---
---
title: My Second Post
tags:
  - personal
---

Our pagination template above will now generate two pages: /tags/personal/index.html and /tags/tech/index.html.

The great thing here is that we don’t have to manage our tag list in a central place. These tags can be littered throughout our content and individual tag pages will be created automatically.

Filtering / Excluding Jump to heading

Have a tag you’d like to exclude from this list? Use pagination filtering like this:

---
pagination:
  data: collections
  size: 1
  alias: tag
  filter:
    - tech
permalink: /tags/{{ tag }}/
---

Now Eleventy will only generate a /tags/personal/ template and tech will be ignored.

In Practice Jump to heading

This is currently in use on the eleventy-base-blog sample project. Check out source code in the tags.njk template and see a live demo.