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, I’ll that links that I’ve found useful.

Post Summary

Hugo’s .Summary function provides an easy built-in solution for displaying post summaries. Yet, it has some flows. Hugo suggests 3 ways of generating a summary. Manual splitting and front-matter options are cumbersome. So, the summary function seems handy but it doesn’t always do well. It includes lists and headings. It can’t handle code-fences. Luckily, I’ve found a better solution created by Yihui Xie.

Pagination

online but Hugo already has _internal/pagination.html. These partials are for buttons and links that create the navigation. Also, you need to paginate the Pages in a loop.

You can either use .Paginator function or .Paginate function. The first one is the result of the second one, and a shortcut is provided for convenience. .Paginator is created by Hugo, and supported on homepage and list pages since it’s using the .Pages function. On the other hand, we can tell which pages we want to gather and paginate by using the .Paginate function.

Here is the simplest form of pagination:

1
2
3
4
5
{{ range (.Paginate .Pages).Pages }}
      {{.Title}} //Display post info, link here.
{{ end }}

{{ partial "pagination.html" . }} // Include pagination partial.

You’ll probably use more detail about posts, include links to it, instead of .Title alone. I use another partial I’ve created.

1
2
3
4
5
6
7
// Another example with custom $pages
{{ $pages := where $.Site.RegularPages ".Type" "!=" "ordinary" }}
{{ $pages = where $pages ".Section" "not in" (slice "karalama" "projects") }}
{{ range (.Paginate $pages).Pages }}

// Of course, you can sort pages however you like.
{{ range (.Paginate (.Pages.ByParam "episode").Reverse).Pages }}
  1. Pagination Original Docs
  2. Pagination Partial Codepen

In Hugo, you really should use the built-in feature for gathering related posts. Because it’s easy and fast. I’m not gonna make this post longer than it should be. I display 2 sections under my posts. One is, related posts generated by Hugo, and the other one is next/previous posts in the same section. I’ll come to the latter later.

To use the related indices, you need to add these lines to your config file, it’s explained in the docs. I don’t add “category” here, because I don’t use “category” taxonomy. Since there is only one indice I use, the weight parameter becomes redundant too. Anyway…

1
2
3
4
5
6
7
8
[related]
  threshold = 10
  includeNewer = true
  toLower = true
  
  [[related.indices]]
    name = "tags"
    weight = 90

Now you need to gather the related posts on a post’s page. So, you’ll probably use this code in the single.html template.

1
{{ $related :=  .Site.RegularPages.RelatedIndices . "tags" | first 3 }}

You may want to filter out ordinary pages like /about /contacts and use something like this:

1
2
{{ $posts := where .Site.RegularPages "Section" "blog"}}
{{ $related := $posts.RelatedIndices . "tags" | first 3 }}

In my case, I use the code below and also added a backup strategy. It’ll display the latest posts if there is no $related found.

1
2
3
4
5
6
{{ $posts := where .Site.RegularPages "Section" "!=" "" }}
{{ $related := $posts.RelatedIndices . "tags" | first 3 }}

{{ if eq (len $related) 0 }}
      {{ $related = $posts.ByDate | first 3 }}
{{ end }}

Easy enough. Now, the second part: next/previous posts. You are probably using category taxonomy but I use sections to categorize my posts. Each post has a parameter named episode which specifies its order in the section. For example, this is the 14th post in Hugo section.

Here is how I get the previous/next episodes.

1
2
3
4
5
6
7
8
 {{ $posts := where $.Site.RegularPages ".Section" $.Section }}
 {{ $posts := where $posts ".Title" "!=" $.Title }}

  {{ $prePosts := where $posts ".Params.episode" "lt" $.Params.episode }}
  {{ $prePosts := $prePosts.ByParam "episode" | last 2 }}

  {{ $nextPosts := where $posts ".Params.episode" "gt" $.Params.episode }}
  {{ $nextPosts := $nextPosts.ByParam "episode" | first 2 }}

After that, all we need to do is loop through them.

1
2
3
{{ range $nextPosts }}
      <li><span>#{{ .Params.episode }}</span><a href="{{ .RelPermalink }}">{{.Title}}</a></li>
{{ end }}

Something similar can be done with category and date instead of section and episode.

You are reading the 15th of 19 episodes in Hugo.
Published on 29.08.2020 by Mert Bakır with commit 3a172e2.
hugo
#hugo #pagination #tags #web-dev
Next episode:
Group by - Data Files in Hugo
published on 18.09.2020
edited on 13.02.2021

First of all, if you don’t know about data files, you may want to start reading from data files in hugo. This post is about a solution for a very particular problem. How can we use “group by” for the data from data files? Let me clarify with an example. I was creating a single page …

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 …

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 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"] …

published on 03.07.2018

Bu yazıda daha önce yazdığım Etiketlere Göre İlgili Yazılar konusundaki yapıyı eleştirip iyileştireceğiz. En azından başlangınçta öyle düşünüyordum. Kısaca hatırlayalım, ne yaptığımızı: […] Amaç: Tüm postlar arasından (all_posts) mevcut sayfanın etiketlerinden (page.tags) en az birine sahip …

published on 01.07.2018

Oldukça uzun, bir o kadar da gerekliliği tartışılır kod parçasını paylaşmak üzereyim. Baştan söyleyelim, biraz döngüler dönecek if statementlar kontrol edilecek. Bunlara bağlı olarak, eğer blogunuzda çok post varsa build time kötü derecede etkilenecek. Ne kadar etkisi olur, 11 postluk blogta şu an …

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 …