published on 30.08.2020

The question is clear. We need to pass variables or arguments in Hugo’s partials. We usually use only the dot when calling partials. {{ partial "foo.html" . }}. The dot means the current page’s context. All it’s variables like .Title, .Permalink, .Content and all others will pass on with that dot.

Sometimes, we need to send more. For example, I’ve got a partial named generate_button.html and pass the href, name, and color variables. None of them are related to page content. To pass these arguments to the “partial” we need to use a dictionary instead of passing the dot.

{{ partial "helpers/generate_button.html" (dict "href" "/tags" "name" "Display by Tags" "theme" "paper-theme")}}

In this case, I can’t access any of the variables of the page inside the partial. .Title won’t work. Because we didn’t pass the dot. So, we need to include the dot in our dictionary.

{{ partial "your_crazy_good_partial.html" (dict "context" . "arg1" "val1" "arg2" "val2") }}

Now, in order to access page variables from “partial”, we need to prefix the dot’s name which is “context”. .context.Title, .context.Date, etc…

There is one more way, it’s called scratch. I mentioned it before in Loops in Hugo. Basically, with scratch, we can add variables into the page’s content then pass the dot alone instead of passing a dictionary. By using Scratch, you may get more clean and elegant code.

{{ .Scratch.Set "arg1" "val1" }}
{{ partial "your_crazy_good_partial.html" . }}

With this method, we can access all the standard page variables as we normally do. We don’t need to call .context.Title to get .Title. This is a solid advantage over the dictionary method. To access our special variable, val1, we need to use {{ .Scratch.Get "arg1" }}.

Here is an example of how I used .Scratch. I wanted to use a different color theme depending on the post-card’s index in the list. So, while looping through posts I wanted to send index. This is a very common use case, “how to get index in a range?". Instead of, using the dictionary method, it can be done using “scratchpad”.

{{ .Scratch.Set "index" 0 }}
{{ range $pages }}
  {{ $.Scratch.Set "index" (add ($.Scratch.Get "index") 1) }}
  {{ .Scratch.Set "index" ($.Scratch.Get "index") }}
  {{ partial "cards/post_card_classic.html" . }}
{{ end }}

4th line here sets the scratch variable of the page in loops' iteration. While $.Scratch indicates the top-level variable which means the main page outside of the loop. Then I can access the index variable in post_card_classic partial by calling {{.Scratch.Get "index"}}.

You are reading the 12nd of 19 episodes in Hugo.
Published on 30.08.2020 by Mert Bakır with commit 804dba7.
#hugo #web-dev
Next episode:
Loops in Hugo
published on 23.08.2020

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 …

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

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 …