Hugo - Taxonomy

   
   
 hugo  
 ssg  
Article Series

This article series contain few sections.

Supplementary Article for Windows User.

Clone Tutorial Source.

Where to Discuss?

Local Group

Table of Content

Preface

This article is intended for beginner.

Goal: Create custom taxonomy terms layout and also taxonomy detail layout.

1: Taxonomy Terms

Remember our last config.toml. We already have these taxonomies:

# An example of Hugo site for tutorial purpose.

baseURL      = "http://example.org/"
languageCode = "en-us"
title        = "Letters to my Beloved"
theme        = "tutor-04"

[taxonomies]
  category = "categories"
  tag = "tags"

[permalinks]
  posts    = ":section/:year/:month/:day/:slug"
  quotes   = ":section/:year/:month/:day/:slug"

Instead of the standard terms.html, we can make it prettier, by making our own custom terms.html.

{{ define "main" }}
<main role="main" 
      class="container-fluid m-3 m-sm-0 p-3
             bg-light rounded border border-dark shadow-hover">
  <header>
    <h4>{{ .Section }}</h4>
  </header>

  {{ .Content }}

  <section class="pl-3" id="archive">
    {{ range $key, $value := .Data.Terms }}
      <div class ="anchor-target archive-list" id="{{ $key }}">
        {{ $.Data.Singular | humanize }}: 
        <a href="{{ "/" | relLangURL }}{{ $.Data.Plural | urlize }}/{{ $key | urlize }}">
        {{ $key }}</a>
      </div>
    {{ end }}
  </section>
</main>
{{ end }}

Hugo: Simple Taxonomy Terms

Why not go further ? Do not let beaurocracy stop you, let’s dump all the link here. And also give nice tag list using boostrap badge above the header.

{{ define "main" }}
<main role="main" 
      class="container-fluid m-3 m-sm-0 p-3
             bg-light rounded border border-dark shadow-hover">

  <div class="">
    {{ range $key, $value := .Data.Terms }}
      {{ $postCount := len $value.Pages  }}
      <a href="{{ "/" | relLangURL }}{{ $.Data.Plural | urlize }}/{{ $key | urlize }}">
      <span class="badge badge-dark">{{ $key }} 
      <span class="badge badge-light">{{ $postCount }}</span></span></a>
    {{ end }}
  </div>
  <br/>

  <header>
    <h4>{{ .Section }}</h4>
  </header>

  {{ .Content }}

  <section class="pl-3" id="archive">
    {{ range $key, $value := .Data.Terms }}
      <div class ="anchor-target" id="{{ $key }}">
        {{ $.Data.Singular | humanize }}: 
        <a href="{{ "/" | relLangURL }}{{ $.Data.Plural | urlize }}/{{ $key | urlize }}">
        {{ $key }}</a>
      </div>

      <div class="pl-3">
      {{ range $value.Pages }}
      <div class="d-flex flex-row-reverse archive-list">
        <div class="text-right text-nowrap">
          <time datetime="{{ .Date.Format "2006-01-02T15:04:05Z07:00" }}">
            {{ .Date.Format "Jan 02, 2006" }}&nbsp;</time></div>
        <div class="mr-auto"><a href="{{ .URL | absURL }}">
          {{ .Title }}
        </a></div>
      </div>
      {{ end }}
      </div>

    {{ end }}
  </section>
</main>
{{ end }}
  • http://localhost:1313/categories/

Hugo: Complex Taxonomy Terms

2: Taxonomy Detail

When you click the love badge or lyric badge, an url will be given:

Which will be using the layouts/_default/list.html. Which is somehow having the wrong result, because the .Pages is filtered for only post kind page.

Hugo: Taxonomy Detail Using List

Of course we can make our own taxonomy.html to show taxonomy detail.

{{ define "main" }}
<main role="main" 
      class="container-fluid m-3 m-sm-0 p-3
             bg-light rounded border border-dark shadow-hover">
  <header>
    <h4>{{ .Section }}</h4>
  </header>

  {{ .Content }}
  
  {{ $posts := .Data.Pages }}
  <section id="archive">
   {{ range ($posts.GroupByDate "2006") }}
     {{ partial "summary-by-month.html" . }}
   {{ end }}
  </section>
</main>
{{ end }}

Hugo: Simple Taxonomy Detail

What is Next ?

There are, some interesting topic about Blog Archive in Hugo. Consider continue reading [ Hugo - Archive ].

Thank you for reading.