Hugo Component Snippets
Bootstrap
List card with grid
<div class="row g-0">
<div class="p-0 col-1 col-sm-2">hello</div>
<div class="col-11 col-sm-10 card-body">
<div class="d-flex justify-content-between">
<h2 class="mt-auto mb-1 h5">{{- .Params.title -}}</h2>
<small class="text-muted">{{- .PublishDate.Format "Jan 2, 2006" -}}</small>
</div>
<small class="text-muted">{{ .Params.description | safeHTML }}</small>
</div>
</div>
Sidebar
Generic sidebar
source: Hugo docs
<!-- sidebar start -->
<aside>
<ul>
{{ $currentPage := . }}
{{ range .Site.Menus.main }}
{{ if .HasChildren }}
<li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
<a href="#">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
<ul class="sub-menu">
{{ range .Children }}
<li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
<a href="{{ .URL }}">{{ .Name }}</a>
</li>
{{ end }}
</ul>
{{ else }}
<li>
<a href="{{ .URL }}">
{{ .Pre }}
<span>{{ .Name }}</span>
</a>
</li>
{{ end }}
{{ end }}
<li>
<a href="#" target="_blank">Hardcoded Link 1</a>
</li>
<li>
<a href="#" target="_blank">Hardcoded Link 2</a>
</li>
</ul>
</aside>
Navbars
Generic navbar
unknown source
<header>
<nav class="navbar" role="navigation">
<div class="container">
<div class="navbar-brand">
<a href="/" title="home" class="navbar-item">
<span class="logo"><h1>{{ .Site.Title }}</h1></span>
</a>
{{ range .Site.Menus.social }}
<a href="{{ .URL | relURL }}" class="navbar-item is-hidden-desktop" title="{{ .Name }}"
><span class="icon">{{ .Pre }}</span></a
>
{{ end }}
<a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
{{ range .Site.Menus.main }}
<a href="{{ .URL }}" class="navbar-item">{{ .Name }}</a>
{{ end }}
</div>
<div class="navbar-end">
{{ range .Site.Menus.social }}
<a href="{{ .URL }}" class="navbar-item is-hidden-touch" title="{{ .Name }}"
><span class="icon">{{ .Pre }}</span></a
>
{{ end }}
</div>
</div>
</div>
</nav>
<script>
$(document).ready(function () {
$('.navbar-burger').click(function () {
$('.navbar-burger').toggleClass('is-active');
$('.navbar-menu').toggleClass('is-active');
});
});
</script>
</header>
Navbar with links
<nav
class="navbar has-shadow is-white"
role="navigation"
aria-label="main navigation"
>
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="{{ "/" | relLangURL }}">
{{- if (fileExists (print "/static" .Site.Data.defaults.icons.brand)) }}
<img alt="Brand" src="{{ .Site.Data.defaults.icons.brand }}" />
{{- end }}
<div class="title is-4"> {{ .Site.Title }}</div>
</a>
<!-- Using a <label /> here -->
<label
role="button"
class="navbar-burger has-text-dark"
aria-label="menu"
aria-expanded="false"
for="navbar-burger-state"
>
<!-- ^^^^^^^^^^^^^^^^^^^ -->
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</label>
</div>
<!-- This checkbox is hidden -->
<input type="checkbox" id="navbar-burger-state" />
<!-- ^^^^^^^^^^^^^^^^^^^ -->
<div class="navbar-menu">
<div class="navbar-end">
{{- $node := . }}
{{- range .Site.Menus.main }}
<a
href="{{ .URL }}"
class="navbar-item
{{ if or ($node.IsMenuCurrent "main" .) ($node.HasMenuCurrent "main" .) -}}
is-active
{{- end }}"
>{{- if .Pre }}{{ .Pre }}{{ end -}}
{{ .Name }}
{{- if .Post }}{{ .Post }}{{ end -}}
</a>
{{- end }}
</div>
</div>
</div>
</nav>
Taxonomies
Combining tags
source: Hugo Discourse
{{ $var := .Scratch }}
<!-- Collect Specific cateogries -->
{{ range $taxName, $terms := .Site.Taxonomies.authors }} {{ $var.Add "mergedTax" (slice (dict "termName" $taxName "term"
. ))}} {{ end }} {{ range $taxName, $terms := .Site.Taxonomies.recipients }} {{ $var.Add "mergedTax" (slice (dict
"termName" $taxName "term" . ))}} {{ end }}
<!-- Test (presumably your template) -->
{{ range ($var.Get "mergedTax") }}
<!-- Terms key -->
<p><strong>{{ .termName }}</strong></p>
<!-- Terms map (weighted pages, if needed) -->
<p>{{ .term.Pages }}</p>
{{ end }}
Notes:
- Using .Scratch.Add to push into an array (collection)
- Using “slice” to indicate this is an array item for the “.Add” method
- Using dict to collect the term similar to it’s original map structure (to get the key and the map)
- Looping though the final created array or dictionary items (key/value pairs) for testing that all were collected
Bulma Components
Categories list
Categories as image cards via Bulma. Source: pakstech.com
{{ define "main" }}
<div class="container">
<div class="section">
<div class="content">
<h1>{{ .Title }}</h1>
{{ .Content }}
</div>
<div class="columns is-mobile is-multiline">
{{ range .Data.Terms.ByCount }}
<div class="column is-half-mobile is-one-third-tablet is-one-quarter-desktop is-one-fifth-widescreen">
<div class="card">
<div class="card-image">
<a href="{{ .Page.Permalink }}">
<figure class="image is-3by2">
{{ $firstChild := index .Pages 0 }} {{ with $firstChild.Params.images }}
<img src="{{ index . 0 }}" alt="" />
{{ end }}
</figure>
</a>
</div>
<div class="card-content has-text-centered">
<div>
<a class="title is-5 is-size-6-mobile" href="{{ .Page.Permalink }}">{{ .Page.Title }}</a>
{{ $pageCount := len .Pages }}
<p>{{ $pageCount }} post{{ if ne $pageCount 1 }}s{{ end }}</p>
</div>
</div>
</div>
</div>
{{ end }}
</div>
</div>
</div>
{{ end }}
Categories cards
source: capsule theme
{{ define "main" }}
<section class="section" style="flex:1">
<!-- Content -->
<div class="container" style="min-height:56vh">
<h1 class="title">List of {{ .Title }}</h1>
<ul>
{{- $data := .Data }}
{{- range $key, $value := .Data.Terms.ByCount }}
<li class="title is-4 is-flex" style="justify-content:space-between">
<span>
<a
href="{{ urlize "/" }}{{ $data.Plural }}/{{ $value.Name | urlize }}"
>
{{ $value.Name | title }}
</a>
</span>
<span> {{ $value.Count }} posts </span>
</li>
{{- end }}
</ul>
</div>
</section>
{{ end }}
Minimal list
source: hugoma
{{ define "main" }}
<section class="section">
<div class="container">
<ol>
{{ $data := .Data }} {{ range $key, $value := .Data.Terms.ByCount }}
<li>
<p>
<a href="{{ $value.Name | urlize }}">{{ $value.Name }}</a> -
<b>{{ $value.Count }}</b>
</p>
</li>
{{ end }}
</ol>
</div>
</section>
{{ end }}