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.
In this example, Hugo will create
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.
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.
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.
I’ve changed the code a little and colorized each item using a little sass, you can see the result at Tags.