# Taxonomy Support

> Structure the content using taxonomies like tags, categories, labels.

---

Docsy supports Hugo [taxonomies] in its docs and blog section. You can see the
default layout and can test the behavior of the generated links on this page.

## Terminology

To understand the usage of taxonomies you should understand the following
terminology:

- **Taxonomy**: a categorization that can be used to classify content - e.g.:
  Tags, Categories, Projects, People

- **Term**: a key within the taxonomy - e.g. within projects: Project A, Project
  B

- **Value**: a piece of content assigned to a term - e.g. a page of your site,
  that belongs to a specific project

A [movie-website sample][] taxonomy is provided by the Hugo docs.

[movie-website sample]:
  https://gohugo.io/content-management/taxonomies/#example-taxonomy-movie-website

## Parameters

There are various parameters to control the functionality of taxonomies in the
project [configuration file][]. Taxonomies are [enabled by default][] for `tags`
and `categories` in Hugo. To **disable** taxonomies, add the following to your
project config:

<!-- prettier-ignore-start -->





<ul class="nav nav-tabs" id="tabs-0" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-00-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-00" role="tab"
          aria-controls="tabs-00-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-00-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-00-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-00-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-00-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-00-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-00-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-00-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-0-content">
    <div class="tab-pane fade"
        id="tabs-00-00" role="tabpanel" aria-labelled-by="tabs-00-00-tab" tabindex="0">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-00-01" role="tabpanel" aria-labelled-by="tabs-00-01-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="nx">disableKinds</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;taxonomy&#34;</span><span class="p">]</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-00-02" role="tabpanel" aria-labelled-by="tabs-00-02-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">disableKinds</span><span class="p">:</span><span class="w"> </span><span class="p">[</span><span class="l">taxonomy]</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-00-03" role="tabpanel" aria-labelled-by="tabs-00-03-tab" tabindex="0">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;disableKinds&#34;</span><span class="p">:</span> <span class="p">[</span> <span class="s2">&#34;taxonomy&#34;</span> <span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->

Then the taxonomy pages for `tags` and `categories` will be generated by Hugo.
If you want to use other taxonomies you have to define them in your
[configuration file]. If you want to use beside your own taxonomies also the
default taxonomies `tags` and `categories`, you also have to define them beside
your own taxonomies. You need to provide both the plural and singular labels for
each taxonomy.

With the following example you define a additional taxonomy `projects` beside
the default taxonomies `tags` and `categories`:

<!-- prettier-ignore-start -->





<ul class="nav nav-tabs" id="tabs-1" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-01-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-01-00" role="tab"
          aria-controls="tabs-01-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-01-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-01-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-01-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-01-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-01-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-01-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-01-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-01-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-01-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-1-content">
    <div class="tab-pane fade"
        id="tabs-01-00" role="tabpanel" aria-labelled-by="tabs-01-00-tab" tabindex="1">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-01-01" role="tabpanel" aria-labelled-by="tabs-01-01-tab" tabindex="1">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">taxonomies</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">tag</span> <span class="p">=</span> <span class="s2">&#34;tags&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">category</span> <span class="p">=</span> <span class="s2">&#34;categories&#34;</span>
</span></span><span class="line"><span class="cl"><span class="nx">project</span> <span class="p">=</span> <span class="s2">&#34;projects&#34;</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-01-02" role="tabpanel" aria-labelled-by="tabs-01-02-tab" tabindex="1">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">taxonomies</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">tag</span><span class="p">:</span><span class="w"> </span><span class="l">tags</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">category</span><span class="p">:</span><span class="w"> </span><span class="l">categories</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">project</span><span class="p">:</span><span class="w"> </span><span class="l">projects</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-01-03" role="tabpanel" aria-labelled-by="tabs-01-03-tab" tabindex="1">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;taxonomies&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;tag&#34;</span><span class="p">:</span> <span class="s2">&#34;tags&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;category&#34;</span><span class="p">:</span> <span class="s2">&#34;categories&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;project&#34;</span><span class="p">:</span> <span class="s2">&#34;projects&#34;</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->

You can use the following parameters in your project's config to control the
output of the assigned taxonomy terms for each article resp. page of your docs
and/or blog section in Docsy or a "tag cloud" in Docsy's right sidebar:

<!-- prettier-ignore-start -->





<ul class="nav nav-tabs" id="tabs-2" role="tablist">
  <li class="nav-item">
      <button class="nav-link disabled"
          id="tabs-02-00-tab" data-bs-toggle="tab" data-bs-target="#tabs-02-00" role="tab"
          aria-controls="tabs-02-00" aria-selected="false">
        Configuration file:
      </button>
    </li><li class="nav-item">
      <button class="nav-link active"
          id="tabs-02-01-tab" data-bs-toggle="tab" data-bs-target="#tabs-02-01" role="tab"
          data-td-tp-persist="toml" aria-controls="tabs-02-01" aria-selected="true">
        hugo.toml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-02-02-tab" data-bs-toggle="tab" data-bs-target="#tabs-02-02" role="tab"
          data-td-tp-persist="yaml" aria-controls="tabs-02-02" aria-selected="false">
        hugo.yaml
      </button>
    </li><li class="nav-item">
      <button class="nav-link"
          id="tabs-02-03-tab" data-bs-toggle="tab" data-bs-target="#tabs-02-03" role="tab"
          data-td-tp-persist="json" aria-controls="tabs-02-03" aria-selected="false">
        hugo.json
      </button>
    </li>
</ul>

<div class="tab-content" id="tabs-2-content">
    <div class="tab-pane fade"
        id="tabs-02-00" role="tabpanel" aria-labelled-by="tabs-02-00-tab" tabindex="2">
        <pre tabindex="0"><code></code></pre>
    </div>
    <div class="tab-pane fade show active"
        id="tabs-02-01" role="tabpanel" aria-labelled-by="tabs-02-01-tab" tabindex="2">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-toml" data-lang="toml"><span class="line"><span class="cl"><span class="p">[</span><span class="nx">params</span><span class="p">.</span><span class="nx">taxonomy</span><span class="p">]</span>
</span></span><span class="line"><span class="cl"><span class="nx">taxonomyCloud</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;projects&#34;</span><span class="p">,</span> <span class="s2">&#34;tags&#34;</span><span class="p">]</span> <span class="c"># set taxonomyCloud = [] to hide taxonomy clouds</span>
</span></span><span class="line"><span class="cl"><span class="nx">taxonomyCloudTitle</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;Our Projects&#34;</span><span class="p">,</span> <span class="s2">&#34;Tag Cloud&#34;</span><span class="p">]</span> <span class="c"># if used, must have same length as taxonomyCloud</span>
</span></span><span class="line"><span class="cl"><span class="nx">taxonomyPageHeader</span> <span class="p">=</span> <span class="p">[</span><span class="s2">&#34;tags&#34;</span><span class="p">,</span> <span class="s2">&#34;categories&#34;</span><span class="p">]</span> <span class="c"># set taxonomyPageHeader = [] to hide taxonomies on the page headers</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-02-02" role="tabpanel" aria-labelled-by="tabs-02-02-tab" tabindex="2">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-yaml" data-lang="yaml"><span class="line"><span class="cl"><span class="nt">params</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">  </span><span class="nt">taxonomy</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">taxonomyCloud</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span>- <span class="l">projects   </span><span class="w"> </span><span class="c"># remove all entries</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span>- <span class="l">tags       </span><span class="w"> </span><span class="c"># to hide taxonomy clouds</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">taxonomyCloudTitle</span><span class="p">:</span><span class="w">   </span><span class="c"># if used, must have the same</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span>- <span class="l">Our Projects     </span><span class="w"> </span><span class="c"># number of entries as taxonomyCloud</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span>- <span class="l">Tag Cloud</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">    </span><span class="nt">taxonomyPageHeader</span><span class="p">:</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span>- <span class="l">tags       </span><span class="w"> </span><span class="c"># remove all entries</span><span class="w">
</span></span></span><span class="line"><span class="cl"><span class="w">      </span>- <span class="l">categories </span><span class="w"> </span><span class="c"># to hide taxonomy clouds</span></span></span></code></pre></div>
    </div>
    <div class="tab-pane fade"
        id="tabs-02-03" role="tabpanel" aria-labelled-by="tabs-02-03-tab" tabindex="2">
        <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-json" data-lang="json"><span class="line"><span class="cl"><span class="p">{</span>
</span></span><span class="line"><span class="cl">  <span class="nt">&#34;params&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">    <span class="nt">&#34;taxonomy&#34;</span><span class="p">:</span> <span class="p">{</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;taxonomyCloud&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;projects&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;tags&#34;</span>
</span></span><span class="line"><span class="cl">      <span class="p">],</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;taxonomyCloudTitle&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Our Projects&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;Tag Cloud&#34;</span>
</span></span><span class="line"><span class="cl">      <span class="p">],</span>
</span></span><span class="line"><span class="cl">      <span class="nt">&#34;taxonomyPageHeader&#34;</span><span class="p">:</span> <span class="p">[</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;tags&#34;</span><span class="p">,</span>
</span></span><span class="line"><span class="cl">        <span class="s2">&#34;categories&#34;</span>
</span></span><span class="line"><span class="cl">      <span class="p">]</span>
</span></span><span class="line"><span class="cl">    <span class="p">}</span>
</span></span><span class="line"><span class="cl">  <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">}</span></span></span></code></pre></div>
    </div>
</div>

<!-- prettier-ignore-end -->

The settings above would only show a taxonomy cloud for `projects` and `tags`
(with the headlines "Our Projects" and "Tag Cloud") in Docsy's right sidebar and
the assigned terms for the taxonomies `tags` and `categories` for each page.

To disable any taxonomy cloud you have to set the Parameter `taxonomyCloud = []`
resp. if you don't want to show the assigned terms you have to set
`taxonomyPageHeader = []`.

By default, the plural label of a taxonomy is used as its cloud title. You can
override the default cloud title with `taxonomyCloudTitle`. But if you do so,
you have to define a manual title for each enabled taxonomy cloud
(`taxonomyCloud` and `taxonomyCloudTitle` must have the same length!).

If you don't set the parameters `taxonomyCloud` resp. `taxonomyPageHeader` the
taxonomy clouds resp. assigned terms for all defined taxonomies will be
generated.

## Partials

The partials used by default for displaying taxonomies are defined so that you
can easily use them in your own layouts.

### taxonomy_terms_article

The partial `taxonomy_terms_article` shows all assigned terms of a given
taxonomy (partial parameter `taxo`) of an article respectively page (partial
parameter `context`, most of the time the current page or context `.`).

Example usage in `layouts/docs/list.html` for the header of each page in the
docs section:

```go-html-template
{{ $context := . }}
{{ range $taxo, $taxo_map := .Site.Taxonomies }}
  {{ partial "taxonomy_terms_article.html" (dict "context" $context "taxo" $taxo ) }}
{{ end }}
```

This will give you for each in the current page (resp. context) defined taxonomy
a list with all assigned terms:

```html
<div class="taxonomy taxonomy-terms-article taxo-categories">
  <h5 class="taxonomy-title">Categories:</h5>
  <ul class="taxonomy-terms">
    <li>
      <a
        class="taxonomy-term"
        href="//localhost:1313/categories/taxonomies/"
        data-taxonomy-term="taxonomies"
        ><span class="taxonomy-label">Taxonomies</span></a
      >
    </li>
  </ul>
</div>
<div class="taxonomy taxonomy-terms-article taxo-tags">
  <h5 class="taxonomy-title">Tags:</h5>
  <ul class="taxonomy-terms">
    <li>
      <a
        class="taxonomy-term"
        href="//localhost:1313/tags/tagging/"
        data-taxonomy-term="tagging"
        ><span class="taxonomy-label">Tagging</span></a
      >
    </li>
    <li>
      <a
        class="taxonomy-term"
        href="//localhost:1313/tags/structuring-content/"
        data-taxonomy-term="structuring-content"
        ><span class="taxonomy-label">Structuring Content</span></a
      >
    </li>
    <li>
      <a
        class="taxonomy-term"
        href="//localhost:1313/tags/labelling/"
        data-taxonomy-term="labelling"
        ><span class="taxonomy-label">Labelling</span></a
      >
    </li>
  </ul>
</div>
```

### taxonomy_terms_article_wrapper

The partial `taxonomy_terms_article_wrapper` is a wrapper for the partial
`taxonomy_terms_article` with the only parameter `context` (most of the time the
current page or context `.`) and checks the taxonomy parameters of your
project's `hugo.toml`/`hugo.yaml`/`hugo.json` to loop through all listed
taxonomies in the parameter `taxonomyPageHeader` resp. all defined taxonomies of
your page, if `taxonomyPageHeader` isn't set.

### taxonomy_terms_cloud

The partial `taxonomy_terms_cloud` shows all used terms of a given taxonomy
(partial parameter `taxo`) for your site (partial parameter `context`, most of
the time the current page or context `.`) and with the parameter `title` as
headline.

Example usage in partial `taxonomy_terms_clouds` for showing all defined
taxonomies and its terms:

```go-html-template
{{ $context := . }}
{{ range $taxo, $taxo_map := .Site.Taxonomies }}
  {{ partial "taxonomy_terms_cloud.html" (dict "context" $context "taxo" $taxo "title" ( humanize $taxo ) ) }}
{{ end }}
```

This will give you the following HTML markup for the taxonomy `categories`:

```html
<div class="taxonomy taxonomy-terms-cloud taxo-categories">
  <h5 class="taxonomy-title">Cloud of Categories</h5>
  <ul class="taxonomy-terms">
    <li>
      <a
        class="taxonomy-term"
        href="//localhost:1313/categories/category-1/"
        data-taxonomy-term="category-1"
        ><span class="taxonomy-label">category 1</span
        ><span class="taxonomy-count">3</span></a
      >
    </li>
    <li>
      <a
        class="taxonomy-term"
        href="//localhost:1313/categories/category-2/"
        data-taxonomy-term="category-2"
        ><span class="taxonomy-label">category 2</span
        ><span class="taxonomy-count">1</span></a
      >
    </li>
    <li>
      <a
        class="taxonomy-term"
        href="//localhost:1313/categories/category-3/"
        data-taxonomy-term="category-3"
        ><span class="taxonomy-label">category 3</span
        ><span class="taxonomy-count">2</span></a
      >
    </li>
    <li>
      <a
        class="taxonomy-term"
        href="//localhost:1313/categories/category-4/"
        data-taxonomy-term="category-4"
        ><span class="taxonomy-label">category 4</span
        ><span class="taxonomy-count">6</span></a
      >
    </li>
  </ul>
</div>
```

### taxonomy_terms_clouds

The partial `taxonomy_terms_clouds` is a wrapper for the partial
`taxonomy_terms_cloud` with the only parameter `context` (most of the time the
current page or context `.`) and checks the taxonomy parameters of your
project's config to loop through all listed taxonomies in the parameter
`taxonomyCloud` resp. all defined taxonomies of your page, if `taxonomyCloud`
isn't set.

## Multi language support for taxonomies

For [multilingual sites][], taxonomy terms get counted and linked _within_ the
language site only. Taxonomy config parameters can be adjusted per language.

[configuration file]:
  https://gohugo.io/getting-started/configuration/#configuration-file
[enabled by default]:
  https://gohugo.io/content-management/taxonomies/#default-destinations
[multilingual sites]: https://gohugo.io/configuration/params/#multilingual-sites
[taxonomies]: https://gohugo.io/content-management/taxonomies/
