Notes

Hugo Snippets

Hugo template snippets i reuse, partials, recent posts, listing sections and their pages, menus, date formats and tags

Edit on GitHub

Web Development
4 minutes
Hugo snippets

Include a partial template

1partial {{ "foo.html" . }}
2partial {{ "foo" . }}
  • you use the partial function
  • the partial directory is layouts > partials, this is where your partial templates will go
  • templates are always .html files
  • you don’t have to specify the file extension when including a partial template, Hugo knows it’s an html file
  • {{ . }} represents the current context. {{ . }} always refers to the current context, meaning the data changes based on where it was used. It’s the JS equivalent of this in Go.
  • . passes contextual variables explicitly

Show recent posts

1{{ range first 5 .Site.Pages }}
2  <!-- code goes here -->
3  <a href="{{ .Permalink }}">{{ .Title }}</a><br>
4{{ end }}
  • .Site.Pages is an array of all content ordered by Date with the newest first
  • first 5 gets the latest 5 posts. You can change this number as you like

Show all Sections

1{{ range .Site.Sections }}
2  <a href="{{ .Permalink }}">{{ .Title }}</a><br>
3{{ end }}
  • .Site.Sections has all the top-level directories of the site

Show pages from a specific Section

1<h1>{{ with .Site.GetPage "section" "blog" }}{{ .Title }}{{ end }}</h1>

List all Sections

1<section>
2  {{ range .Site.Sections }}
3      <li><a href="{{ .Permalink }}">
4        {{ if .Name }}{{ .Name}}
5        {{ else }}{{ .Dir }}
6        {{ end }}</a></li>
7  {{ end }}
8</section>
  • Won’t render anything if there are no content pages in the section.
  • Won’t list sub-sections

Render Site Menu

1  {{ if .Site.Menus.main }}
2    {{ range .Site.Menus.main }}
3      <a href="{{ .URL }}">{{ .Name }}</a>
4    {{ end }}
5  {{ end }}
  • the above is when you don’t have any submenus
  • a site can have multiple menus,main is the menu you’re rendering here

Format Dates

You can use the Format function and provide a custom date format string, like so:

1{{ .Date.Format "2018, January 02"}}

Alternatively, you can save the format as a variable in your config file and reference it from the templates, like so:

1# config.yaml
2dateString: "2018, January 02"

1<!-- Template file -->
2{{ .Date.Format .Site.Params.dateString }}

Get Tag URLs

reference link

1<ul id="tags">
2  {{ range .Params.tags }}
3    <li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> </li>
4  {{ end }}
5</ul>
  • relLandURL is relURL with language prefix
  • relURL gives a relative URL according to a page’s position in directory structure
  • since {{ . }} is the current context, it’ll give you the tag name
  • urlize is a function that takes a string, sanitizes it for usage in URLs, and converts spaces to hyphens
1{{ "tags/" | absLangURL }} → "https://example.com/hugo/en/tags/"
2{{ "tags/" | relLangURL }} → "/hugo/en/tags/"
3{{ "tags/" | relLangURL }}{{ . }} → "/hugo/en/tags/foo"
4{{ "tags/" | relLangURL }}{{ . | urlize }} → "/hugo/en/tags/foo"
  • {{ "/tags/" | relLangURL }} will basically give you the relative URL for the tags page
  • {{ "/tags/" | relLangURL }}{{ . }} will give you the tags link and append the tag name to it
  • {{ "/tags/" | relLangURL }}{{ . | urlize }} will give you a sanitized URL direct to the specific tag page

Group content by Section

reference link

 1<!-- Group content by Section -->
 2
 3{{ range .Site.Pages.GroupBy "Section" }}
 4<h3>{{ .Key }}</h3> <!-- .Key = the Section Title -->
 5<ul>
 6  {{ range .Pages }}
 7    <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
 8  {{ end }}
 9</ul>
10{{ end }}

List all Sections and their Pages

reference link

1<!-- List sections with all their posts -->
2<section>
3  {{ range $section := .Site.Sections }}
4    <h3>{{ $section.Title }}</h3>
5    {{ range $section.Pages }}
6      <a href="{{ .Permalink }}">{{ .Title }}</a><br>
7    {{ end }}
8  {{ end }}
9</section>

Get all site Pages

 1<!-- .Site.Pages
 2  array of all content ordered by Date with the newest first -->
 3
 4<h2>Archive</h2>
 5<ul>
 6  {{ range .Site.Pages }}
 7    <li>
 8      <span class="date">{{ .Date.Format .Site.Params.dateFormat }}</span>
 9      <a href="{{ .Permalink }}">{{ .Title }}</a><br>
10    </li>
11  {{ end }}
12</ul>
  • .Site.Pages gets all the pages in the site
  • .Data.Pages gets all the pages for the given node (sections, taxonomies)

reference link

1<ul>
2  {{ range first 10 .Site.Taxonomies.tags.ByCount }}
3    <li><a href="{{ "/tags/" | relLangURL }}{{ .Name | urlize }}">{{ .Name }} <small>({{ .Count }} posts)</small></a></li>
4  {{ end }}
5</ul>
  • You can change 10 to a different number to change the number of tags shown
  • {{ "/tags/" | relLangURL }}{{ .Name | urlize }} will generate a link to the listing page for the specific tag

List all site Tags

1  <!-- https://gohugo.io/templates/taxonomy-templates/#example-list-all-site-tags -->
2  <h6>Tags</h6>
3  <section>
4    {{ range $name, $taxonomy := .Site.Taxonomies.tags }}
5    <a href="{{"/tags/" | relLangURL }}{{ $name | urlize}}">{{ $name }}</a>, 
6    {{ end }}
7  </section>

Related

Browse all topics