Tags in Hugo is a default taxonomy and we don’t need any special configuration to use tags. We just enter the tags in the post’s front-matter. This can be YAML, TOML, or JSON. I’m using the YAML format, just a personal preference.
tags: ["hugo", "tags"]
In this example, Hugo will create tags/hugo and tags/tags pages for us. These pages are called term pages and the /tags is a taxonomy page. If you want to change these pages you need to create templates: /layouts/tags/list.html for tags page and /layouts/tags/term.html term pages. I write a bit about Hugo templates in and this post and this post. This is a different topic.
Render Tags
In this post, I’ll explain “how to get tags of specific pages” and “how to generate tag cloud”. To achieve the first one, I’ve created a partial called get_tags.html. After that, you can use it where ever you want.
{{ with .Param "tags" }}
{{ range $index, $tag := (. | sort) }}
{{ with $.Site.GetPage (printf "/%s/%s" "tags" $tag) }}
<a href="{{ .Permalink }}">#{{ $tag | urlize }}</a>
{{ end }}
{{ end }}
{{ end }}
This code gets the tags from the page’s front-matter. Sorts them alphabetically then returns HTML links. I also added the hash “#” symbol at the beginning of the tag, and the styling will come from the CSS.
Print Tag Cloud
To create a tag-cloud I’ve found two solutions online, both works. The first one is the one I’m using, will create a tag-cloud using relatively bigger font sizes for more frequent tags. The other is more simple, it’ll just gather all tags, all with the same font-size.
<div class="container tagcloud">
{{ if ne (len $.Site.Taxonomies.tags) 0 }}
{{ $largestFontSize := 1.4 }}
{{ $smallestFontSize := 1.0 }}
{{ $fontSpread := sub $largestFontSize $smallestFontSize }}
{{ $max := add (len (index $.Site.Taxonomies.tags.ByCount 0).Pages) 1 }}
{{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
{{ $spread := sub $max $min }}
{{ $fontStep := div $fontSpread $spread }}
{{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
{{ $tagCount := len $taxonomy.Pages }}
{{ $currentFontSize := (add $smallestFontSize (mul (sub $tagCount $min) $fontStep) ) }}
{{ $weigth := div (sub (math.Log $tagCount) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
{{ $currentFontSize := (add $smallestFontSize (mul (sub $largestFontSize $smallestFontSize) $weigth)) }}
<a href="{{ "/tags/" | relURL }}{{ $name | urlize }}"
class="tagcloud-item" style="font-size: {{ $currentFontSize }}rem;">
{{ $name }}<sup>{{ $tagCount }}</sup>
</a>
{{ end }}
{{ end }}
</div>
I’ve changed the code a little and colorized each item using a little sass, you can see the result at Tags.
Happy tweaking!