This post number 5 in the series Changelog. Find an overview of all posts in this series here.

You can find the predecessor post of the series here.

You can find the successor post of the series here.

This is new on my blog: I now can do series of posts.

Hugo’s preconditions

Hugo already provides everything I need, in particular it provides the concept of taxonomies. Tags are typical taxonomies, and I now have another taxonomy called series.

Collecting the relevant information about my series

This is now the web development magic where things get messy. Altough the requirement was simple: If a post is part of a series, then there should be a link to /<language>/series/<series name>, and a link to the next and the previous article of the series. Setting that up was a bit more complicated.

  • The name of the series can easily be extracted from Hugo: {{ .Parms.series }}
  • Collecting all the posts of a series needs a query: where .Site.RegularPages "Params.series" $seriesName.
    Ideally one then also sorts by date: {{ sort $seriesPosts "Date" }}
  • Next we need that index of the current post.
    1
    2
    3
    4
    5
    6
    
    {{ $index := -1 }}
    {{ range $i, $p := $seriesPosts }}
      {{ if eq $p.RelPermalink $current.RelPermalink }}
        {{ $index = $i }}
      {{ end }}
    {{ end }}
    
    Here one can see that the HTML templating syntax in Hugo is not really done for programming…
  • The last formal challenge here was to find the correct URL for the overview page. I managed that as follows: {{ site.GetPage( printf "/series/%s" $seriesName ).RelPermalink }}. Note that the language is not required here, as we are using a relative permalink!

CSS Magic!

The rest is a mixture of HTML, i18n (for texts in the correct language) and CSS/SASS magic. Quite some stuff (for example, the overview page) thankfully was also already done by Papermod, I just had to add the information box on top of the post itself. I am going to leave the CSS to everybody’s fun, maybe I will post it at a later time.

Result

The result can be seen right here in this post - which is a part of the Changelog series.