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:
-
- config.toml
- gitlab.com/…/config.toml
# 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.
-
- themes/tutor-04/layouts/_default/terms.html
- gitlab.com/…/layouts/_default/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 }}
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.
-
- themes/tutor-04/layouts/_default/terms.html
- gitlab.com/…/layouts/_default/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">
<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" }} </time></div>
<div class="mr-auto"><a href="{{ .URL | absURL }}">
{{ .Title }}
</a></div>
</div>
{{ end }}
</div>
{{ end }}
</section>
</main>
{{ end }}
- http://localhost:1313/categories/
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.
Of course we can make our own taxonomy.html to show taxonomy detail.
-
- themes/tutor-04/layouts/_default/taxonomy.html
- gitlab.com/…/layouts/_default/taxonomy.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 }}
{{ $posts := .Data.Pages }}
<section id="archive">
{{ range ($posts.GroupByDate "2006") }}
{{ partial "summary-by-month.html" . }}
{{ end }}
</section>
</main>
{{ end }}
What is Next ?
There are, some interesting topic about Blog Archive in Hugo. Consider continue reading [ Hugo - Archive ].
Thank you for reading.