hugo-theme-relearn/exampleSite/content/cont/taxonomy.en.md
2023-11-28 23:52:24 +01:00

2.9 KiB

+++ categories = ["taxonomy", "content"] tags = "tutorial" title = "Taxonomy" weight = 8 +++

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"
+++

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 config.toml file you can add a shortcut to display all the tags and categories

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

[[menu.shortcuts]]
name = "<i class='fas fa-layer-group'></i> 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.