Show All Tags For a Post as a List

When showing your blog post, either as a single page or within a blog post list it can be nice to show the tags associated with that post (we do here on MakeWithHugo!). This is going to be a quick post (hopefully) showing you how to add your tags as a list and each linked up.

You can add this code to either your single.html layout file or inside the loop in list.html.

1
2
3
4
5
6
7
8
9

<div class="tags-list">
    {{- with .Params.tags -}}
        {{- if ge (len .) 1 -}}
            {{- range . -}}
                <a href="{{ $.Site.BaseURL }}tags/{{ . | urlize }}/">#{{ . }}</a>
            {{ end -}}
        {{- end -}}
    {{- end -}}
</div>

This code works by looping our your posts tags (using with and range) then making a link for each. When making the url we pass the tag name through urlize first incase there are spaces or non-url compatible characters.

For this to work, you’ll need to define your tags on the post like this:

1
2
3
4
5
6
7
8

---
layout: post 
title: Tags Example
tags:
  - example
  - mytag
  - makewithhugo
---

Which in HTML will output something like this (I’ve changed the indentation a bit):

1
2
3
4
5

<div class="tags-list">
    <a href="https://makewithhugo.com/tags/example/">#example</a>
    <a href="https://makewithhugo.com/tags/mytag/">#mytag</a>
    <a href="https://makewithhugo.com/tags/makewithhugo/">#makewithhugo</a>
</div>

Hopefully you found this useful. Let us know how you get on in the comments below.