Hugo tag and category pages
All notes in this series:
- Automating hugo development with npm scripts
- normalize-scss with hugo
- Automatic image thumbnails in Hugo from static directory
- Escaping Hugo shortcodes within Hugo markdown
- Hugo tag and category pages
- Bind hugo to localhost for development
- Hugo 0.37 does not support h6 markdown heading
- Install Hugo testing distribution on Debian
- Hugo anchors next to headers
- Hugo: Migrating from Pygments to Chroma
- Hugo: Global resources
- Hugo: How to create a post series
Taxonomies are ways of grouping content within Hugo. By default, Hugo defines two taxonomies: “tags” and “categories”. You can then, for example, write a post and define tags = ["test"]
in the front matter. Hugo will then generate a taxonomy list page at https://mywebsite.com/tags/
and you can view all posts with the "test"
tag at https://mywebsite.com/tags/test
.
As far as Hugo is concerned, there is no difference between “tags” and “categories”. Each post can have as many tags and/or categories as you would like!
Conceptually though, I consider “categories” to be the broad topic, and “tags” to be more specific aspects. For example, for this post I might set:
Plural vs singular taxonomies §
So far we have been using “tags” plural. For this website, I instead wanted the taxonomy list page to be https://mywebsite.com/tag
singular. It turns out this is rather easy!
To use singular rather than plural, override the default values for the tags and categories taxonomies:
As shown above, the [taxonomies]
section of the config file defines a list of key/value pairs, where the key is the singular term, and the value is the plural term. Hugo uses the plural term of the taxonomy for the list page URL, so by making this singlar we get the URL we desire.
You can then go to https://mywebsite.com/tag/
to view the list of tags.
Templates §
In order to customise things further, you can modify the templates used:
layouts/_default/terms.html
is the template forhttps://mywebsite.com/tag/
, which lists all the terms for that tag.layouts/_default/taxonomy.html
is the template forhttps://mywebsite.com/tag/term/
, which lists all the pages for that term.
The Hugo documentation has a good starting point for writing your own taxonomy templates.
Disabling taxonomies §
To disable the default taxonomies entirely, simply set their values to empty strings.