Hugo Taxonomy Terms

How to set the list of terms on several columns

Create a terms.html file in folder layouts/_default to apply the list on all taxonomies. To apply the list to only a single taxonomy, create the terms.html file in layouts/{taxonomy_name}. For instance layouts\tags for taxonomy Tags.

Using bootstrap, add the code below:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{- define "main" -}}

<h1>{{ .Title }}</h1>

<div class="d-flex flex-wrap flex-row">
{{ range .Data.Terms.Alphabetical }}
  <div class="w-25 m-1"><a href="{{ .Page.RelPermalink }}"><code>{{ .Page.Title }}</code></a> {{ .Count }}</div>
{{ end }}
</div>

{{- end -}}

Key aspects :

  • w-25 sets the size of the column to 25% of the viewport.
  • m-1 sets margin around the tags to space the lines.

Without bootstrap the code must be replaced with :

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{- define "main" -}}

<h1>{{ .Title }}</h1>

<div style="display:flex; flex-direction:row; flex-wrap: wrap;">
{{ range .Data.Terms.Alphabetical }}
  <div style="width:25%;margin:1rem;"><a href="{{ .Page.RelPermalink }}"><code>{{ .Page.Title }}</code></a> {{ .Count }}</div>
{{ end }}
</div>

{{- end -}}

References

Flexbox Guide []