It’s been a long time coming, but I finally put my mind to it: functional tags! I’m not the first to do it. I certainly don’t think I’ll be the last. And of course, I’ll write a blog post about it.

In this process, I realise I wasn’t as consistent in tagging my posts as I thought I was. So, in addition to making the tags functional, I went through all my posts and made sure the tags that were there make sense and don’t contain any typos (oops).

Tags Page

Years ago when I first worked on my blog, I stumbled upon Christian’s answer explaining how to create a single page listing all tags. Thankfully, I found it again today. I used his first example to create my tags page, which worked out-of-the-box:


{% capture tags %}
  {% for tag in site.tags %}
    {{ tag[0] }}
  {% endfor %}
{% endcapture %}
{% assign sortedtags = tags | split:' ' | sort %}
{% for tag in sortedtags %}
    <a href="/tags/{{ tag }}/">{{ tag }}</a><br>
{% endfor %}

Clickable Tags

The next step was making the tags clickable and cleaning them up because I only just now realised that there were some spelling errors. Emma the Eng to the rescue! Here, the only thing I needed to change was the url leading to my tags page.


{%- if page.tags -%}
{% for tag in page.tags %}
<a href="{{site.baseurl}}/blog/tags/#{{tag | slugize}}">
    #{{ tag }}
</a>
{% endfor %}
{%- endif -%}

Now, I want to keep the navigation bar clean, so I added the “Tags” title as an exception in generating the navigation bar. Instead, I opted to have a link to the tags on the main blog page.