Tags

My blog is a worry stone sometimes. It’s nice to tinker with something that is fully under my control, even if it’s ultimately only really for me. I don’t write on this blog for anyone in particular. I don’t even have any analytics to I don’t know if anyone even reads these posts.

But it’s still mine and I want to make it great.

Something I’ve done for a while is set up Hexo to ensure that my URLs make logical sense. Take my post about string compression and Blazor. Starting at that URL, you can keep chopping off parts and each step will still work.

https://moscardino.net/2020/09/string-compression-in-blazor/
https://moscardino.net/2020/09/
https://moscardino.net/2020/
https://moscardino.net/

It’s that kind of thing that make me happy with this blog. Though if I posted more, the month view might actually be useful.

There’s always been a bit more to these posts that I never exposed, though: tags. Each post is written in Markdown with some front matter that is used for metadata. This post’s front matter looks like this:

title: Tags
date: 2021-01-05
description: Tagging and browsing tags in Hexo
image: /images/organize.jpg
tags: [Hexo, Blog, Tags]

And since the beginning, each post has had appropriate tags assigned to it. They’ve only really been used to populate some meta tags and in my own search results. About a week ago, I started showing the tags at the bottom of each post. Not only that, but you can find a link in the footer to browse all tags and view posts by tag.

The changes were simple, really, since Hexo does pretty much all of the work. Adding tag_dir: tags to my _config.yml file ensures that all tag pages live under /tags. This part gets added to my post layout file:

<% if (page.tags && page.tags.length) { %>
    <aside class="container">
        <span class="u-sr-only">Tags</span>
        
        <ul class="tag-list">
            <% page.tags.forEach(function (tag) { %>
                <li class="tag-list__item">
                    <a href="<%- url_for(tag.path) %>">
                        <%- tag.name %>
                    </a>
                </li>
            <% }); %>
        </ul>
    </aside>
<% } %>

And I created a new layout called tag-index.ejs which is used to create the page at /tags that lists all possible tags.

<div class="container">
    <h1 class="u-sr-only">
        All Tags
    </h1>

    <div class="post post--listitem post--archive-tag">
        <div class="post__inner">
            <p class="post__body">
                🏷 Viewing all tags. Click on a tag to view posts.
            </p>
        </div>
    </div>

    <ul class="tag-list">
        <% site.tags.sort('-length').forEach(function (tag) { %>
            <li class="tag-list__item">
                <a href="<%- url_for(tag.path) %>">
                    <%- tag.name %> (<%- tag.length %>)
                </a>
            </li>
        <% }); %>
    </ul>
</div>

The main index layout which lists posts doesn’t need to be modified to filter by a selected tag (Hexo does that on it’s own) but does get a little header. There’s already a similar header for browsing by year and/or month, so this was basically reused code:

<% if (is_tag()) { %>
    <div class="post post--listitem post--archive-tag">
        <div class="post__inner">
            <p class="post__body">
                🏷 Showing posts tagged with <%= page.tag %>. <a href="/tags">View all tags.</a>
            </p>
        </div>
    </div>
<% } %>

And that’s all. Add in some CSS to make them look nice, and now we have tags everywhere. It’s a nice change that I think works very well and makes the site that much nicer, especially for me.

Photo by Pop & Zebra on Unsplash.