Displaying tags in Hugo

August 19, 2024

As I plan to write about a variety of different topics on this website, I decided to add tags to the properties of all my posts and notes so far:

---
title: "Displaying tags in Hugo"
date: "2024-08-19"
tags: ["hugo"]
⋯
---

Tags were already available in the Hugo theme that I am currently using, but I did not like the way they were displayed. I edited partials/post-entry.html so there’s a loop over every tag of a post, displaying them as a comma-delimited list next to the post or note’s title:

<div class="post-line">
    {{ $dateFormat := "2 Jan 2006"}}
    {{ with .Site.Params.listDateFormat }}
    {{ $dateFormat = .}}
    {{ end }}

    <p class="line-date">{{ .Date.Format $dateFormat }} </p>

    <span>
        <a href="{{ .RelPermalink }}">
            {{- .Title -}}
        </a>

        {{ if .Site.Params.listSummaries }}
        <span class="post-tags">  <!-- [tl! focus] -->
            {{- range $index, $tag := .Params.tags -}} <!-- [tl! focus] -->
                {{ if $index }}, {{ end }}<a href="{{ printf "/tags/%s/" $tag | urlize }}">#{{ $tag }}</a> <!-- [tl! focus] -->
            {{- end -}} <!-- [tl! focus] -->
        </span> <!-- [tl! focus] -->

        <div class="line-summary"> {{ .Description | markdownify }} </div>
        {{ end }}
    </span>
</div>

.post-tags {
  font-size: 0.7em;
  opacity: 50%;
  vertical-align: baseline;
}

Clicking on the link of the tag brings you to a list of all posts or note’s with the same tag.