Taxonomy

The Relearn theme supports Hugo’s default taxonomies tag and category out of the box.

Configuration

Just add tags and/or categories to any page. They can be given as a single string or an array of strings.

​
+++
categories = ['taxonomy', 'content']
tags = 'tutorial'
title = 'Taxonomy'
+++
---
categories:
- taxonomy
- content
tags: tutorial
title: Taxonomy
---
{
   "categories": [
      "taxonomy",
      "content"
   ],
   "tags": "tutorial",
   "title": "Taxonomy"
}

Behavior

The tags are displayed at the top of the page in alphabetical order.

The categories are displayed at the bottom of the page in alphabetical order in the default implementation of the theme but can be customized by providing your own content-footer.html partial.

Each item is a link to a taxonomy page displaying all the articles with the given term.

List all the tags

In the hugo.toml file you can add a shortcut to display all the tags and categories

hugo.
[menu]
[[menu.shortcuts]]
    name = "<i class='fa-fw fas fa-tags'></i> Tags"
    url = '/tags'

[[menu.shortcuts]]
    name = "<i class='fa-fw fas fa-layer-group'></i> Categories"
    url = '/categories'
menu:
  shortcuts:
  - name: <i class='fa-fw fas fa-tags'></i> Tags
    url: /tags
  - name: <i class='fa-fw fas fa-layer-group'></i> Categories
    url: /categories
{
   "menu": {
      "shortcuts": [
         {
            "name": "\u003ci class='fa-fw fas fa-tags'\u003e\u003c/i\u003e Tags",
            "url": "/tags"
         },
         {
            "name": "\u003ci class='fa-fw fas fa-layer-group'\u003e\u003c/i\u003e Categories",
            "url": "/categories"
         }
      ]
   }
}

Customization

If you define custom taxonomies and want to display a list of them somewhere on your page (often in the layouts/partials/content-footer.html) you can call a partial that does the job for you:

{{ partial "term-list.html" (dict
  "page" .
  "taxonomy" "categories"
  "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 frontmatter.
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: info, note, tip, warning
- by brand color: primary, secondary, accent
- by color: blue, green, grey, 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.