Taxonomies

This page explains how to show custom taxonomies on your pages.

For more details, check the official docs on setting up custom taxonomies and using them in your content.

Default Behavior

The Relearn theme automatically shows Hugo’s default taxonomies tags and categories out of the box.

  • Tags appear at the top of the page in alphabetical order in form of baggage tags.
  • Categories appear at the bottom of the page in alphabetical order as a list prefixed with an icon.

Each item links to a page showing all articles with that term.

Setting Up Custom Taxonomies

To add custom taxonomies, update your hugo.toml file. You also have to add the default taxonomies if you want to use them.

hugo.
[taxonomies]
  category = 'categories'
  mycustomtag = 'mycustomtags'
  tag = 'tags'
taxonomies:
  category: categories
  mycustomtag: mycustomtags
  tag: tags
{
   "taxonomies": {
      "category": "categories",
      "mycustomtag": "mycustomtags",
      "tag": "tags"
   }
}

Showing Custom Taxonomies

To display your custom taxonomy terms, add this to your page (usually in layouts/partials/content-footer.html):

{{ partial "term-list.html" (dict
  "page" .
  "taxonomy" "mycustomtags"
  "icon" "layer-group"
) }}

Parameter

Name Default Notes
page <empty> Mandatory reference to the page.
taxonomy <empty> The plural name of the taxonomy to display as used in your front matter.
class <empty> Additional CSS classes set on the outermost generated HTML element.

If set to tags you will get the visuals for displaying the tags taxonomy, otherwise it will be a simple list of links as for the categories taxonomy.
style primary The style scheme used if class is tags.

- by severity: caution, important, info, note, tip, warning
- by brand color: primary, secondary, accent
- by color: blue, cyan, green, grey, magenta, orange, red
- by special color: default, transparent, code
color see notes The CSS color value to be used if class is tags. If not set, the chosen color depends on the style. Any given value will overwrite the default.

- for severity styles: a nice matching color for the severity
- for all other styles: the corresponding color
icon <empty> An optional Font Awesome icon name set to the left of the list.