A couple of useful Hugo snippets used with the Bulma CSS framework. 🧠
Speaking Engagements
<!-- Speaking Category --> {{ $speaking := ($.Site.Taxonomies.categories.speaking).Pages }} <!-- Upcoming Events --> {{ $upcomingEvents := where $speaking "Date" "ge" now }} <!-- Past Events --> {{ $pastEvents := where $speaking "Date" "lt" now }} <!-- Show Upcoming Events --> {{ if (len $upcomingEvents) "ge" 1 }} <h2> ⏳️ {{ len $upcomingEvents }} Upcoming {{ if gt (len $upcomingEvents) 1 }}Events{{ else }}Event{{ end }} </h2> <div class="columns is-multiline"> {{ range $upcomingEvents.ByDate.Reverse }} <div class="column is-half-tablet is-one-third-desktop is-one-third-widescreen is-one-third-fullhd" > {{ partial "card.html" . }} </div> {{ end }} </div> {{ end }} <!-- Show Past Events --> <h2>⌛️ {{ len $pastEvents }} Past Events</h2> <div class="columns is-multiline"> {{ range $pastEvents.ByDate.Reverse }} <div class="column is-half-tablet is-one-third-desktop is-one-third-widescreen is-one-third-fullhd" > {{ partial "card.html" . }} </div> {{ end }} </div>
Archive
{{ $regularPages := .Site.RegularPages }} <div class="table-border-none"> <h2> ✒️ I've written about {{ len $regularPages }} different things so far. </h2> <!-- Pages --> {{ range $regularPages.GroupByDate "2006" }} <!-- Line Separator - Year --> <!-- Check for No Date --> {{ if not (eq .Key "0001") }} <!-- Year --> <h3>{{ .Key }}</h3> <!-- Table --> <table class="table"> <tbody> {{ range .Pages }} <tr> <td>{{ dateFormat "January 2" .Date }}</td> <td><a href="{{ .RelPermalink }}">{{ .Title }}</a></td> </tr> {{ end }} </tbody> </table> {{ end }} <!-- End - Range - Year --> {{ end }} <!-- End Message --> {{ partial "content/list/end-message.html" . }} </div>
Navbar
{{ $currentPage := . }} <nav class="navbar has-shadow is-spaced" role="navigation" aria-label="main navigation"> <div class="container is-fluid"> <!-- Brand --> <div class="navbar-brand"> <!-- Logo --> <a class="navbar-item" href="{{ "/" | absLangURL }}"> <img class="lozad" loading="lazy" data-src="/assets/img/logos/logo-square.png" src="/assets/img/logos/logo-square.png" height="128" alt="{{ .Title }}"> </a> <!-- Left Icons --> <!-- Hidden on Desktop, Mobile Only --> <div class="navbar-item is-hidden-fullhd"> <div class="buttons"> {{ range .Site.Menus.social }} <a class="button is-white" href="{{ .Permalink }}" target="_blank" rel="noopener"> {{ if .Identifier }}<i class="{{ .Identifier }}" alt="{{ .Name }}" title="{{ .Name }}"></i>{{ end }} </a> {{ end }} </div> </div> <!-- Hamburger Menu --> <a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navMenu"> <span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span> </a> </div> <!-- Main Menu --> <div id="navMenu" class="navbar-menu"> <div class="navbar-start"> {{ range .Site.Menus.main }} {{ if .HasChildren }} <div class="navbar-item has-dropdown is-hoverable"> <a class="navbar-link{{ if (eq $currentPage.Permalink .Permalink) }} is-active{{ end }}" href="{{ .Permalink | relLangURL }}"> {{ if .Identifier }}<i class="{{ .Identifier }}" alt="{{ .Name }}"></i> {{ end }}{{- .Name -}} </a> <div class="navbar-dropdown"> {{ range .Children }} <a class="navbar-item{{ if (eq $currentPage.Permalink .Permalink) }} is-active{{ end }}" href="{{ .Permalink | relLangURL }}"> {{ if .Identifier }}<i class="{{ .Identifier }}" alt="{{ .Name }}"></i>{{ end }} {{ .Name }} </a> {{ end }} </div> </div> {{ else }} <a class="navbar-item{{ if (eq $currentPage.Permalink .Permalink) }} is-active{{ end }}" href="{{ .Permalink | absLangURL }}"> {{- if .Identifier -}}<i class="{{ .Identifier }}" alt="{{ .Name }}"></i>{{- end -}} {{ .Name }} </a> {{ end }} {{ end }} </div> <!-- Social Icons --> <div class="navbar-end is-hidden-touch"> <div class="navbar-item"> <div class="buttons"> {{ range .Site.Menus.social }} <a class="button is-white" href="{{ .Permalink }}" target="_blank" rel="noopener"> {{ if .Identifier }}<i class="{{ .Identifier }}" alt="{{ .Name }}" title="{{ .Name }}"></i>{{ end }} </a> {{ end }} </div> </div> </div> </div> </div> </nav>
Tags & Categories
{{ if or (or (.Params.tags) (.Params.categories)) }} <!-- Taxonomy --> <div class="columns"> <!-- Categories --> {{ if .Params.categories }} <div class="column"> <h3><a href="/categories/"> 📂 {{ i18n "categories" }}</a></h3> <ul> {{ range $category := .Params.categories }} <li> <a href="/categories/{{ $category | urlize }}/" title="{{ $category }}"> {{ $category }} </a> </li> {{ end }} </ul> </div> {{ end }} <!-- Tags --> {{ if .Params.tags }} <div class="column"> <h3><a href="/tags/"> 📌 {{ i18n "tags" }}</a></h3> <ul> {{ range $tag := .Params.tags }} <li> <a href="/tags/{{ $tag | urlize }}/" title="{{ $tag }}"> {{ $tag }} </a> </li> {{ end }} </ul> </div> {{ end }} </div> {{ end }}
SEO
<!-- Series --> <!-- Add prefetch and prerender on section pages. Works especially well for articles or blog posts in a series --> {{ if .IsPage }} <!-- Previous Section --> {{ if .PrevInSection }} <link rel="prefetch" href="{{ .PrevInSection.Permalink }}" /> <link rel="prerender" href="{{ .PrevInSection.Permalink }}" /> <link rel="prev" href="{{ .PrevInSection.Permalink }}" /> {{ end }} <!-- Next Section --> {{ if .NextInSection }} <link rel="prefetch" href="{{ .NextInSection.Permalink }}" /> <link rel="prerender" href="{{ .NextInSection.Permalink }}" /> <link rel="next" href="{{ .NextInSection.Permalink }}" /> {{ end }} {{ end }} <!-- Canonical --> <link rel="canonical" href="{{ .Permalink | safeURL }}" /> <!-- Alternative Output --> {{ range .AlternativeOutputFormats -}} {{ printf `<link rel="%s" type="%s" href="%s" title="%s" />` .Rel .MediaType.Type .Permalink $.Site.Title | safeHTML }} {{ end -}}
Show Posts From Specific Category
<!-- Variables --> {{ $blog := ($.Site.Taxonomies.categories.blog).Pages }} <!-- Blog --> <p>{{ len $blog}} blog posts written</p> <div class="columns is-multiline"> {{ range $blog }} {{ if .Date.Before now }} <div class="column is-half-tablet is-one-third-desktop is-one-third-widescreen is-one-third-fullhd" > {{ partial "card.html" . }} </div> {{ end }} {{ end }} </div>
Table of Contents
{{- if .Params.toc }} <aside class="menu"> <p class="menu-label">Table of Contents</p> <div class="menu-list"> {{ .TableOfContents }} </div> </aside> {{- end }}
Param Date
{{ $recDate := time .Params.recordingDate }} <!-- Recording Date --> {{- if .Params.recordingDate }} <p class="has-text-weight-light u-margin-top--sm u-margin-bottom--sm"> <span class="u-margin-right--sm">🎤</span>{{ if le $recDate now }}Recorded{{ else }}Recording{{ end }} {{ dateFormat "January 2, 2006" .Params.recordingDate }} </p> {{- end }}
146 views
Last updated on May 3rd, 2020