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.