January 26, 2024

Hugo Tips & Tricks: data and Taxonomies

Hugo supports by default just two taxonomies, tags and categories, but of course you can add whatever you need to create your perfect blog.

Table of contents:

Custom taxonomies

With Hugo, you are able to categorize your contents in any way you need. You can create your own taxonomies just by adding them in your config.toml

[taxonomies]
movie ="movies"
star ="stars"
year = "years"

Then you will add them to your posts and that is.

stars: ["Montgomery Clift","John Wayne","John Ford"]

Display custom taxonomy value in posts

You can print the new taxonomy into your posts by adding at the end of your single.html:

{{ $.Params.stars }}

List all taxonomy values

If you need to iterate over all taxonomy values, you can just add these three lines of code into any html file.

{{ range site.Taxonomies.stars.ByCount }}
    {{ .Page.Title }}
{{ end }}

See an example in the category page of this blog If you want a kind of category page, for example a list of all posts starred by John Wayne, you need to create the layouts/taxonomy/star.html

Now you have the {{ .Page.Permalink }} shortcut available to link that category page.

Display the author at the end of the post

In your config.toml, add an array with all authors of your blog and the data you need to collect

[author]
   authors = [
      { key="irene", name="Irene Iaccio", jobtitle="Web developer", email="..." },
      { key="john", name="John Doe", jobtitle="UX Designer", email="..." },
      ..
   ]

Then you need to create a component to display them at the end of your posts. So create the file layouts/partials/author.html

{{ range site.Author.authors }}
    {{ if eq .key $.Params.author }}
        <div class="author">
            <strong>{{ .name }}</strong>
            <p>{{ .jobtitle }}</p>
        </div>
    {{ end }}
{{ end }}

A partial can be included in any .html file. We need it in layouts/_default/single.html

{{ partial "author" . }}

Now you are an expert Cow Boy. Go your own way and challenge your John Wayne. If you still have doubts about the basics I recommend you take a look at the first post in this series about Hugo shortcuts and functions

Red river “Red River” Howard Hawks 1948

Irene Iaccio

Freelance web developer