Learn and Discover Open Source with Daily Genuine Experience. From Coding, Front End, Back End, Database, and Static Site Generator.
 
 
ssg  


Preface

This article is intended for beginner.

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

Table of Content

  • Preface: Table of Content

  • 1: Taxonomy Terms

  • 2: Taxonomy Detail

  • What is Next ?


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 }}

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.