Hugo - Snippets for Breadcrumbs, Table of contents, Import code file as markdown, Quote
May 28, 2024 | Reading Time: 2 min
Note that the below snippets are stylized to Bootstrap 5. These can be easily adopted to any styling need.
Breadcrumbs
Partial
1<!-- layouts/partials/breadcrumbs.html -->
2<div id="breadcrumbs-container" style="height: 1.2em; line-height: 1em; margin: 0; overflow: hidden; font-size: small;">
3<ul id="breadcrumbs" style="list-style: none; padding: 0;">
4 {{ range $index, $element := .Ancestors.Reverse }}
5 {{if not $element.IsHome }}
6 <li class="text-muted" style="display: inline;">
7 <span>></span>
8 <a class="text-muted" href="{{ $element.RelPermalink }}">{{$element.Title}}</a>
9 </li>
10 {{else}}
11 <li class="text-muted" style="display: inline;">
12 <a class="text-muted" href="{{ "/" | relLangURL }}" aria-label="home"><i class="fas fa-home"></i></a>
13 </li>
14 {{ end }}{{ end }}
15 {{ if not .IsHome }}
16 <li class="text-muted" style="display: inline;">
17 <span>></span>
18 </li>
19 {{ end }}
20</ul>
21</div>
Use as
1<!-- Uncomment below -->
2{{/* partial "breadcrumbs.html" . */}}
Table of contents
Partial
1<!-- layouts/partials/toc.html -->
2<div class="mt-1 mb-5">
3 {{ if and (gt .WordCount 300 ) (ne .Params.toc false) }}
4 <aside>
5 <h4>Table of contents</h4>
6 {{ .TableOfContents }}
7 </aside>
8 {{ end }}
9</div>
Use as
1<!-- Uncomment below -->
2{{/* - partial "toc.html" . - */}}
Code file as markdown
Shortcode
1<!-- layouts/shortcodes/codefile.html -->
2{{ $file := .Get "file" }}
3{{ $lang := .Get "lang" | default "plaintext" }}
4{{ $content := readFile $file }}
5
6{{- /* Insert the content as a Markdown code block */ -}}
7{{ printf "```%s\n%s\n```" $lang $content | markdownify }}
Use as
1<!-- Uncomment below -->
2{{/* % codefile file="posts/shell/zshrc" lang="shell" % */}}
Quote
Shortcode
1<!-- layouts/shortcodes/authorquote.html -->
2<div class="authorquote border-start border-3 border-secondary px-4 py-1" style="margin: 2.5em 10px; position: relative;">
3 <div class="quote-wrapper d-flex align-items-start">
4 <i class="fas fa-quote-left text-muted pe-2" style="font-size: 2em; flex-shrink: 0;"></i>
5 <div class="quote-content flex-grow-1" style="line-height: 1.5;">{{ .Inner }}</div>
6 </div>
7 <div class="author text-muted text-end mt-1" style="font-style: italic; font-weight: bold;">-- {{ .Get "author" | markdownify }}</div>
8</div>
Use as
1<!-- Uncomment below -->
2{{/* % authorquote author="Ian MacLaren" % */}}
3Be kind, for everyone is fighting a hard battle.
4{{/* % /authorquote % */}}