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.

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.

{{ 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.

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

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 261e231.
#hugo #static-site #tags
Next episode:
Last Modified Date in Hugo
published on 22.08.2020

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. […] …

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
edited on 17.01.2022

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 17.04.2022
edited on 02.05.2022

Önceki bölümde, markdown formatını LaTeX formatına dönüştürmek için kullanılan Pandoc yazılımından bahsetmiştik. Şimdi konuyu bir adım daha ileri taşıyıp ve bookdown’a geçiyoruz. Bookdown; Rmarkdown kullanarak teknik dökümanlar, kitaplar yazabilmemizi sağlayan, Yihui Xie tarafından yazılmış …

published on 10.04.2022

I’ve been using WSL-2 on Windows for over a year. It’s very useful because some Python packages are just a headache to install on Windows. Also, docker. It’s just better on Linux. Yet, WSL-2 can also be problematic. I remember trying a dual-boot setup when things just went way too …

published on 03.03.2022

In this post, I’ll share how to install geopandas and some other gis related packages on Windows. If you are on Mac or Linux you can probably just pip install those without any issue. I usually had to do a google search every time I wanted to install these packages on Windows environment. Of …

published on 19.02.2022

Önceki yazıda LaTeX kullanmanın avantajlarından ve zorluklarından bahsetmiştim, MS Word gibi WYSIWYG programlar ile karşılaştırıp tavsiyelerimi yazmıştım. Bu yazıda Pandoc yazılımı üzerine konuşacağız. Pandoc’un da yardımıyla LaTeX’in avantajlarını alıp zorluklarını biraz geri de …

published on 12.02.2022

LaTeX bir çeşit döküman hazırlama sistemidir, ancak çoğumuzun alıştığı arayüzlerin aksine bu döküman içerisinde kod yazar gibi bazı komutlar kullanırız. Daha sonra derleyici (compiler) bu dökümanı bizim tanımladığınız kurallara göre PDF’e dönüştürür. […] 1978 yılında, Donald Knuth TeX …

published on 02.01.2022

This post is for fellow students who is studying Operations Research with CPLEX. If you don’t know already, IBM offers free academic license for IBM ILOG CPLEX Optimization Studio. […] First, you have to register IBM Academic Initiative with your academic instituion issued email. (e.g. …