published on 29.08.2020

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 into your language is a good example. Besides that, I’ve 3 data files. All three of them help me to customize sections. You can keep any info you want in these files. For example, you may have different authors on your site and you may want to store author information or you can be a small store and you may keep product information, book information, discography, any metadata you can think of…

I keep my blog posts in different sections. I wanted to set different banner images for each section. To do that, I’ve created a partial get_banner_image.html and set banner info in a data file /data/banner.yaml.

1
2
3
4
"default": "/link/to/default/image"
"hugo": "/link/to/a/local/image/under/static/folder"
"jekyll": "https://unsplash.com/..."
"linear programming": "..."
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{ $bannerImage := "" }}

{{ if .Params.image }}
    {{ $bannerImage = .Params.image }}
{{ else if and (ne .Section "") (index $.Site.Data.banner .Section) }}
    {{ $bannerImage = index $.Site.Data.banner .Section }}
{{ else }}
    {{ $bannerImage = index $.Site.Data.banner "default" }}
{{ end }}

{{ return $bannerImage }}

Then, I use this partial in another partial banner.html, <img src="{{ partial "get_data/get_banner_image.html" . }}" alt="header-picture">. So, each page can get it’s own image if it’s set in front-matter and if we use the one from the YAML file.

The next example is pretty much the same as the “banner image” example. I’ve created themes in sass with different color schemes and section_themes.yaml data file to map section names to a specific theme. Then, I created a partial template called get_theme.html and used it to set theme class by section name.

Values on the right-hand side are corresponding CSS classes while the left side is section (folder) names.

1
2
3
4
5
"default": "paper-theme"
"machine-learning": "gok-theme"
"hugo": "paper-theme"
"statistics": "almost-white-theme"
"linear-programming": "eflatun-theme"

get_theme.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
{{ $theme := index $.Site.Data.section_themes "default" }}

{{ if and (ne .Section "") (index $.Site.Data.section_themes .Section) }}
    {{ $theme = index $.Site.Data.section_themes .Section }}
{{ end }}

{{ if .Params.theme }}
    {{ $theme = .Params.theme }}
{{ end }}

{{ return $theme }}

Related html line:

1
<div class="container {{ partial "get_data/get_theme.html" . }}">
You are reading the 11st of 19 episodes in Hugo.
Published on 29.08.2020 by Mert Bakır with commit 0e01aa5.
hugo
#data.yml #hugo #web-dev
Next episode:
How To Pass Arguments in Hugo Partials
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 …

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