published on 23.08.2020

Introduction

In Hugo, to loop through list of items we use Range function which comes from go language. range, iterates over a map, slice or array.

1
2
3
{{ range .Site.RegularPages }}
    {{ .Title }}
{{ end }}

Also, notice inside range the scope is different. .Title refers to the page in current iteration. If we need the top level variable we should the dollar sign $.Title. Scope is another topic and here is a very useful blog-post already written.

C Style For Loop

Loops in Hugo is a little different. We need small tricks to get a classic C style for loop. range is more like a “foreach” function than a “for”. Yet, this doesn’t mean we can’t use iteration number.

1
2
3
4
for (int i = 0, i < upperBound, i ++)
{
    //do something;
}

Key Value Pairs

So, how can we get the iteration number (or index)? Let’s start with a simple example using context (the dot) and seq function.

1
2
3
4
5
{{ range $num := (seq 5) }}
  {{ . }}
{{ end }}

# 1 2 3 4 5

We can use key-value pairs to generate the iteration number. In the example below $index is our key.

1
2
3
4
5
{{ range $index, $num := (seq 5) }}
  {{ $index }}
{{ end }}

# 0 1 2 3 4

$index is not a keyword here, just a variable we named, we could’ve call it $foo. Also, notice that it’s zero based.

We need to define the value too. See the difference in following examples:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{ range $index, $.Site.RegularPages }}
  {{ $index }} <br>
{{ end }}

# Page(/hugo/convert-dates-into-your-language.md) 
# Page(/hugo/last-modified-date-in-hugo.md) 
# Page(/hugo/tag-cloud-in-hugo.md)
# Page(/jekyll/rss-feed-in-jekyll.md) 
# ... 
# Page(/hugo/loops-in-hugo.md) 
# Page(/hugo/math-typesetting-in-hugo.md)
1
2
3
4
5
{{ range $index, $val := $.Site.RegularPages }}
  {{ $index }}
{{ end }}

# 0 1 2 3 ... 49 50

Scracth Function

Alternatively, we can use the Scracth function. Most of the time, key, value pairs above will suffice. Yet, $index always starts from 0 and increments by 1 at each iteration. With, scracth we don’t have to start from 0 and increment by 1. It’s up to us.

1
2
3
4
5
{{ $.Scratch.Set "index" 0 }}
{{ range $pages }}
  {{ $.Scratch.Set "index" (add ($.Scratch.Get "index") 1) }}
  //do something
{{ end }}

Main purpose of scratch is handling scoping issues. It basically allows us to set variables into the context of the page. Then we can manipulate, change or get these scracth variables from other pages, it’s most helpful when creating shortcodes and partials. Here is a good article about scracth.

Nested Loops in Hugo

Nested loops in Hugo is easy but you should know that range has it’s own scope and you need to use the dollar sign $ to get variable from the root page. Here is an example I’ve used before.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{ $sections := where $.Site.Pages ".Kind" "section" }}

{{ range $sections }}
    <h3><a href="{{ .Permalink }}">{{ .Title }}</a></h3>
    {{ $sectionName := .Section | singularize }}
    {{ $pages := where $.Site.RegularPages ".Section" $sectionName }}

    {{ range $pages.ByParam "date" }}
        {{.Params.date}} &middot; {{.Title}}
    {{ end }}
{{ end }}
You are reading the 13rd of 19 episodes in Hugo.
Published on 23.08.2020 by Mert Bakır with commit 7858b9b.
hugo
#hugo #web-dev
Next episode:
Syntax Highlighting in Hugo
published on 30.08.2020
edited on 23.01.2021

Mainly there are two ways of syntax highlighting. One is server-side and the other is client-side. Names are already self-explanatory, client-side highlighting occurs on the user’s browser via javascript. Highlight.js is one of the popular libraries which covers a crazy amount of languages. On …

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