Tips and Tricks: Creating a Hugo Theme

I’m starting to create my own theme for Hugo and below I’m posting all the tips and tricks (aka everything I struggled with) I come across when making a theme.

I’ll update as I go along so check back for more ^^o


Site Params in Archetypes

This one gave me quite a bit of trouble but with a little digging around github and the docs, I was able to figure out how to access .Site.Params inside archetypes.

The following example is for accessing a site parameter githubUser in the archetype

# config.toml

# other configurations removed for space

  layoutReverse = true                     # used for hyde theme
  themeColor = "theme-base-0d"             # used for hyde theme
  description = "this is the description"  # used for hyde theme
  githubUser = "funayman"
# archetypes/
title: "{{ replace .TranslationBaseName "-" " " | title }}"
date: {{ .Date }}
draft: true

source-url: "{{ .Site.Info.Params.githubuser }}/{{ .TranslationBaseName }}"

Notice how githubUser becomes githubuser. All params will become lowercase. I’m not sure why this is the case but I noticed it was this way. If you were to just put .Site.Info.Params you will see all the key-value pairs for the map Params and all them will be lower case.

Cycle Through Taxonomies | Access Var Outside Loop Context

This little snippet solves two problems I was having. Accessing .Site.BaseURL and printing all the tags on my footer. Because the context changes once you’re inside a loop, you can no longer access .Site.BaseURL or .Params. That’s because {{ . }} always refers to the current context, in this case the loop.

One solution would be to create a local variable outside the loop before hand. Here’s a quick example I found:

{{ $title := .Site.Title }}
{{ range .Params.tags }}
  <li> <a href="{{ $baseurl }}/tags/{{ . | urlize }}">{{ . }}</a> - {{ $title }} </li>
{{ end }}

Appending a $ before will allow you to access those variables. Here’s the snippet I found and use from my footer:

{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
  <a href="{{ $.Site.BaseURL }}tags/{{ $name | urlize }}">{{ $name }} </a>
{{ end }}

If you want to use categories instead, just use .Site.Taxonomies.categories.