- Stable
3.0.0
Toggle Menu
1.93s
29.05s
Quick Tip: 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
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
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.
All Quick Tips
- Quick Tip: Inline Minified CSS
- Quick Tip: Add Edit on GitHub Links to All Pages
- Quick Tip: Inline Minified JavaScript
- Quick Tip: Zero Maintenance Tag Pages for your Blog
- Quick Tip: Super Simple CSS Concatenation
- Quick Tip: Adding a 404 Not Found Page to your Static Site
- Quick Tip: Fetch GitHub Stargazers Count (and More) at Build Time
- Quick Tip: Trigger a Netlify Build Every Day
- Quick Tip: Cache Data Requests
- Quick Tip: Transform Global Data using an `eleventyComputed.js` Global Data File
- Quick Tip: Use local plugins to reduce config file size
- Quick Tip: Draft Posts using Computed Data
- View all of the Eleventy Quick Tips.