How to List Tags for a Hugo Post

I think this is probably going to be one of those posts where its best to just give the people what they want and show you the code.

Imagine we’re in our single post template. So for context (literally no pun intented) we’d have access to the .Params.tags Page variable.

{{- with .Params.tags -}}
      <div class="post-tags">
        <div>
        Tags:
        {{- range . -}}
            {{ $tag := urlize . }}
            {{ with $.Site.GetPage (printf "/%s/%s" "tags" $tag ) }}
                <a class="tag" href="{{ .Permalink }}">{{ .Title }}</a> |
            {{- end }}
        {{- end }}
        </div>
      </div>
{{- end -}}

So the first line is our check for some tags:

{{ with .Params.tags }}

And then we loop through the tags, using the shorthand for the current context

{{ range . }}

And then what we want to do is check to see if there is a page for that current tag (you might have tags which aren’t public)

so we define a varable called $tag which is the result of running the current tag name through Hugo’s urlize function.

 {{ $tag := urlize . }}

If a page exists then Hugo will output this tag using the .Permalink and .Title of the tag in the current iteration of the loop.

    {{ with $.Site.GetPage (printf "/%s/%s" "tags" $tag ) }}

How to List tags for a Hugo Post