Hugo Snippets
Include a partial template
partial {{ "foo.html" . }}
partial {{ "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 ofthis
in Go..
passes contextual variables explicitly
Show recent posts
{{ range first 5 .Site.Pages }}
<!-- code goes here -->
<a href="{{ .Permalink }}">{{ .Title }}</a><br>
{{ end }}
.Site.Pages
is an array of all content ordered by Date with the newest firstfirst 5
gets the latest 5 posts. You can change this number as you like
Show all Sections
{{ range .Site.Sections }}
<a href="{{ .Permalink }}">{{ .Title }}</a><br>
{{ end }}
.Site.Sections
has all the top-level directories of the site
Show pages from a specific Section
<h1>{{ with .Site.GetPage "section" "blog" }}{{ .Title }}{{ end }}</h1>
List all Sections
<section>
{{ range .Site.Sections }}
<li><a href="{{ .Permalink }}">
{{ if .Name }}{{ .Name}}
{{ else }}{{ .Dir }}
{{ end }}</a></li>
{{ end }}
</section>
- Won’t render anything if there are no content pages in the section.
- Won’t list sub-sections
Render Site Menu
{{ if .Site.Menus.main }}
{{ range .Site.Menus.main }}
<a href="{{ .URL }}">{{ .Name }}</a>
{{ end }}
{{ 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:
{{ .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:
# config.yaml
dateString: "2018, January 02"
<!-- Template file -->
{{ .Date.Format .Site.Params.dateString }}
Get Tag URLs
<ul id="tags">
{{ range .Params.tags }}
<li><a href="{{ "/tags/" | relLangURL }}{{ . | urlize }}">{{ . }}</a> </li>
{{ end }}
</ul>
relLandURL
isrelURL
with language prefixrelURL
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
{{ "tags/" | absLangURL }} → "https://example.com/hugo/en/tags/"
{{ "tags/" | relLangURL }} → "/hugo/en/tags/"
{{ "tags/" | relLangURL }}{{ . }} → "/hugo/en/tags/foo"
{{ "tags/" | relLangURL }}{{ . | urlize }} → "/hugo/en/tags/foo"
{{ "/tags/" | relLangURL }}
will basically give you the relative URL for thetags
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
<!-- Group content by Section -->
{{ range .Site.Pages.GroupBy "Section" }}
<h3>{{ .Key }}</h3> <!-- .Key = the Section Title -->
<ul>
{{ range .Pages }}
<li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
{{ end }}
</ul>
{{ end }}
List all Sections and their Pages
<!-- List sections with all their posts -->
<section>
{{ range $section := .Site.Sections }}
<h3>{{ $section.Title }}</h3>
{{ range $section.Pages }}
<a href="{{ .Permalink }}">{{ .Title }}</a><br>
{{ end }}
{{ end }}
</section>
Get all site Pages
<!-- .Site.Pages
array of all content ordered by Date with the newest first -->
<h2>Archive</h2>
<ul>
{{ range .Site.Pages }}
<li>
<span class="date">{{ .Date.Format .Site.Params.dateFormat }}</span>
<a href="{{ .Permalink }}">{{ .Title }}</a><br>
</li>
{{ end }}
</ul>
.Site.Pages
gets all the pages in the site.Data.Pages
gets all the pages for the given node (sections, taxonomies)
Get most popular tags
<ul>
{{ range first 10 .Site.Taxonomies.tags.ByCount }}
<li><a href="{{ "/tags/" | relLangURL }}{{ .Name | urlize }}">{{ .Name }} <small>({{ .Count }} posts)</small></a></li>
{{ end }}
</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
<!-- https://gohugo.io/templates/taxonomy-templates/#example-list-all-site-tags -->
<h6>Tags</h6>
<section>
{{ range $name, $taxonomy := .Site.Taxonomies.tags }}
<a href="{{"/tags/" | relLangURL }}{{ $name | urlize}}">{{ $name }}</a>,
{{ end }}
</section>