published on 22.08.2020

Tags in Hugo is a default taxonomy and we don’t need any special configuration to use tags. We just enter the tags in the post’s front-matter. This can be YAML, TOML, or JSON. I’m using the YAML format, just a personal preference.

1
tags: ["hugo", "tags"]

In this example, Hugo will create tags/hugo and tags/tags pages for us. These pages are called term pages and the /tags is a taxonomy page. If you want to change these pages you need to create templates: /layouts/tags/list.html for tags page and /layouts/tags/term.html term pages. I write a bit about Hugo templates in and this post and this post. This is a different topic.

Render Tags

In this post, I’ll explain “how to get tags of specific pages” and “how to generate tag cloud”. To achieve the first one, I’ve created a partial called get_tags.html. After that, you can use it where ever you want.

1
2
3
4
5
6
7
{{ with .Param "tags" }}
  {{ range $index, $tag := (. | sort) }} 
  {{ with $.Site.GetPage (printf "/%s/%s" "tags" $tag) }}
    <a href="{{ .Permalink }}">#{{ $tag | urlize }}</a>
  {{ end }}
  {{ end }}
{{ end }}

This code gets the tags from the page’s front-matter. Sorts them alphabetically then returns HTML links. I also added the hash “#” symbol at the beginning of the tag, and the styling will come from the CSS.

To create a tag-cloud I’ve found two solutions online, both works. The first one is the one I’m using, will create a tag-cloud using relatively bigger font sizes for more frequent tags. The other is more simple, it’ll just gather all tags, all with the same font-size.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="container tagcloud">
    {{ if ne (len $.Site.Taxonomies.tags) 0 }}
      {{ $largestFontSize := 1.4 }}
      {{ $smallestFontSize := 1.0 }}
      {{ $fontSpread := sub $largestFontSize $smallestFontSize }}
      {{ $max := add (len (index $.Site.Taxonomies.tags.ByCount 0).Pages) 1 }}
      {{ $min := len (index $.Site.Taxonomies.tags.ByCount.Reverse 0).Pages }}
      {{ $spread := sub $max $min }}
      {{ $fontStep := div $fontSpread $spread }}
        {{ range $name, $taxonomy := $.Site.Taxonomies.tags }}
          {{ $tagCount := len $taxonomy.Pages }}
          {{ $currentFontSize := (add $smallestFontSize (mul (sub $tagCount $min) $fontStep) ) }}
          {{ $weigth := div (sub (math.Log $tagCount) (math.Log $min)) (sub (math.Log $max) (math.Log $min)) }}
          {{ $currentFontSize := (add $smallestFontSize (mul (sub $largestFontSize $smallestFontSize) $weigth)) }}
            <a href="{{ "/tags/" | relURL }}{{ $name | urlize }}" 
            class="tagcloud-item" style="font-size: {{ $currentFontSize }}rem;">
              {{ $name }}<sup>{{ $tagCount }}</sup>
            </a>
        {{ end }}
    {{ end }}
</div>

I’ve changed the code a little and colorized each item using a little sass, you can see the result at Tags.

Happy tweaking!

You are reading the 8th of 19 episodes in Hugo.
Published on 22.08.2020 by Mert Bakır with commit 3a172e2.
hugo
#hugo #tags #web-dev
Next episode:
Last Modified Date in Hugo
published on 22.08.2020
edited on 23.01.2021

I like to display “published date” and “last modified date” info for my posts. Date info comes from the date parameter and last modified info comes from the lastmod parameter, both defined in the front-matter. […] 1 2 …

published on 22.08.2020

We talked about rendering dates and the last modification date in the last post. Now, we’ll look into how can we convert month names into another language? I’ve had a similar experience last year with jekyll. The idea is the same, we need to map each month to their version of the …

published on 29.08.2020

In Hugo and generally other static website generators, we are using data files to store data. These files can be in YAML, TOML, or JSON formats. You can always read more about data template in the original documentation. Yet, I want to give some examples from my blog. First of all, converting dates …

published on 29.08.2020

My experience with Hugo has been pretty good so far. It’s fast and flexible. Ever since I started using Hugo, I’ve been improving my website with small tweaks. In this post, I am going to share some tricks and workarounds I’ve found online while working with Hugo. Besides that, …

published on 24.01.2021
edited on 11.06.2021

Some time ago, I wanted to display image galleries on my Hugo website and searched for Hugo themes for photography and gallery. I can’t say I find much. Then, I met with a javascript library called nanogallery2 which is using another javascript library as an image viewer lightbox2. In this …

published on 23.01.2021
edited on 11.06.2021

Image processing may seem complicated at first but it’s actually easy and definitely worth implementing since it’ll help you decrease page load times. As you probably know, we don’t want to load raw images with huge sizes for small thumbnails or blog-posts. We want to load a small …

published on 29.11.2020
edited on 05.12.2020

Plotly is a visualization library that allows us to write code in Python, R, or Julia and generates interactive graphs using Javascript. So, we don’t have to deal with Javascript. You can checkout Plotly gallery, there are interesting works. Anyway, last week, I’ve started learning …