about

blog

Displaying tags in Hugo

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">
{{- range $index, $tag := .Params.tags -}}
{{ if $index }}, {{ end }}<a href="{{ printf "/tags/%s/" $tag | urlize }}">#{{ $tag }}</a>
{{- end -}}
</span>
 
<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.