Update: Tags Are Back

This website used to have tags in the past.

They were gone for about 3 years, but they’re back now!

I didn’t think too much about to decision to remove them when I switched from Hugo to Eleventy back in the spring of 2021, I guess I thought they don’t really add much value to the site and I was also following a very minimalist mindset.

My website kept growing though: I wrote 16 posts about various topics since then. Looking back at that amount of information now made me realize that it’s becoming increasingly difficult to find content about a specific topic. And while I’m still not convinced that I should add a search function to the site, restoring tags seemed like a good idea.

Using Tags in Eleventy

The following section is a brief “look under the hood” of how I added tags to this website.

Tags are relevant for different parts of the site:

1, A reusable include for post previews

This is a rather simple component, but getting the context (currentPost) right was a bit of a challenge. That’s why I ended up using the Collections API for getCollectionItem(page).

{% if post %}
  {% set currentPost = post %}
{% else %}
  {% set currentPost = collections.blog | getCollectionItem(page) %}
{% endif %}

<ul class="list-reset list-inline flex align-items-center">
<li class="list-inline-item sr-only">Tags:&nbsp;</li>
  {% for tag in currentPost.data.tags | sort %}
<li class="tag list-inline-item">
<a href="/tags/{{ tag | slugify }}">
<span class="small">#</span>{{ tag }}
</a>
</li>
  {% endfor %}
</ul>

2, An “All Tags” list page

Nothing too fancy here, I just followed the “grid of cards” structure of my /likes page:

<ul class="list-reset grid grid3 gap1 mt2">
  {% for tag in collections.blog | getCollectionTags | sort %}
    {% set tagUrl %}
      /tags/{{ tag | slugify }}/
    {% endset %}
<li class="d-block">
<a class="d-block ..." href="{{ tagUrl }}">
<span>
<span class="small">#</span>{{ tag }}
</span>
</a>
</li>
  {% endfor %}
</ul>

getCollectionTags is a custom filter I shamelessly stole from eleventy-base-blog.

3, Individual “Posts Tagged With ‘tag’” pages

This one was the only tricky bit.

The filter config was necessary to prevent duplicate permalink errors (due to draft content) and unintended content getting built into the /tags/ folder.

Also, data: collections.blog kept giving me errors. I have no idea why, but I plan to get to a minimal reproducible example to report it if it turns out it isn’t “just” some config that’s specific to this site.

---
pagination:
data: collections
size: 1
alias: tag
filter:
- all
- blog
- likes
- postsByYear
- til
eleventyComputed:
title: "Posts Tagged With '{{ tag }}'"
permalink: /tags/{{ tag | slugify }}/
---
<!-- omitted wrapper html -->
  {% for post in collections[ tag ] | reverse %}
    {% include "components/post.preview.njk" %}
  {% endfor %}
<!-- omitted wrapper html -->

11ty Docs

Links that I found helpful were:

• Zero Maintenance Tag Pages for your Blog
• Pagination
• getCollectionItem()

Conclusion

Tags are back, enjoy!

Thanks for reading this update. As always, don’t hesitate to get in touch if you should experience any issues with the new feature.