hugo-theme-relearn/exampleSite/content/configuration/modifications/taxonomy.en.md

+++ categories = ["taxonomy", "content"] description = "How to display custom taxonomies on your pages" tags = "tutorial" title = "Custom Taxonomies" weight = 5 +++

This page shows you how customize your templates to display custom taxonomies on your pages.

See the official documentation on how to configure custom taxnomies and how to use them in your page's front matter.

Standard Behavior

The Relearn theme displays Hugo's default taxonomies tag and category out of the box.

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.

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

Configuration

To add custom taxnomies, you have to configure them in your hugo.toml and also have to add the default taxonomies if you want to use them.

{{< multiconfig file=hugo >}} [taxonomies] category = 'categories' mycustomtag = 'mycustomtags' tag = 'tags' {{< /multiconfig >}}

Customization

You can display the terms of your custom taxonomy somewhere in your page (often in the layouts/partials/content-footer.html) by calling a partial that does the job for you

{{ 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 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: 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.