✨ Add breadcrumbs

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Breadcrumbs
 - i18n support
 
 ### Changed

config/_default/params.toml

@@ -14,6 +14,7 @@
   showDate = true
   dateFormat = "2 January 2006"
   showAuthor = true
+  showBreadcrumbs = false
   showDraftLabel = true
   showHeadingAnchors = true
   showPagination = true
@@ -21,6 +22,7 @@
   # sharingLinks = ["facebook", "twitter", "reddit", "linkedin", "email"]
 
 [list]
+  showBreadcrumbs = false
   groupByYear = true
 
 [taxonomy]

exampleSite/config.toml

@@ -35,6 +35,10 @@ relativeURLs = true
 
 [params.list]
   groupByYear = false
+  showBreadcrumbs = true
+
+[params.article]
+  showBreadcrumbs = true
 
 [[menu.main]]
   name = "Docs"

exampleSite/content/docs/configuration.md

@@ -62,12 +62,14 @@ Many of the article defaults here can be overridden on a per article basis by sp
 |`article.showDate`|boolean|`true`|Whether or not article dates are displayed.|
 |`article.dateFormat`|string|`"2 January 2006"`|How article dates are formatted. Refer to the [Hugo docs](https://gohugo.io/functions/format/#gos-layout-string) for acceptable formats.|
 |`article.showAuthor`|boolean|`true`|Whether or not the author box is displayed in the article footer.|
+|`article.showBreadcrumbs`|boolean|`false`|Whether or not breadcrumbs are displayed in the article header.|
 |`article.showDraftLabel`|boolean|`true`|Whether or not the draft indicator is shown next to articles when site is built with `--buildDrafts`.|
 |`article.showHeadingAnchors`|boolean|`true`|Whether or not heading anchor links are displayed alongside headings within articles.|
 |`article.showPagination`|boolean|`true`|Whether or not the next/previous article links are displayed in the article footer.|
 |`article.showReadingTime`|boolean|`true`|Whether or not article reading times are displayed.|
 |`article.sharingLinks`|array of strings|_Not set_|Which sharing links to display at the end of each article. When not provided, or set to `false` no links will be displayed.|
-|`list.groupByYear`|boolean|`true`|Whether or not articles are grouped under years in the article listing.|
+|`list.showBreadcrumbs`|boolean|`false`|Whether or not breadcrumbs are displayed in the header on list pages.|
+|`list.groupByYear`|boolean|`true`|Whether or not articles are grouped by year on list pages.|
 |`sitemap.excludedKinds`|array of strings|`["taxonomy", "term"]`|Kinds of content that should be excluded from the generated `/sitemap.xml` file. Refer to the [Hugo docs](https://gohugo.io/templates/section-templates/#page-kinds) for acceptable values.|
 |`taxonomy.showTermCount`|boolean|`true`|Whether or not the number of articles within a taxonomy term is displayed on the taxonomy listing.|
 |`fathomAnalytics.site`|string|_Not set_|The site code generated by Fathom Analytics for the website. Refer to the [Analytics docs](#analyticshtml) below for more details.|

layouts/_default/single.html

@@ -1,6 +1,9 @@
 {{ define "main" }}
   <article class="max-w-prose">
     <header>
+      {{ if .Site.Params.article.showBreadcrumbs | default false }}
+        {{ partial "breadcrumbs.html" . }}
+      {{ end }}
       <h1 class="mt-0 text-4xl font-extrabold">{{ .Title | emojify }}</h1>
       <div class="mt-8 mb-12 text-base text-gray-400 dark:text-gray-500">
         {{ partial "article-meta.html" . }}

layouts/partials/breadcrumbs.html

@@ -0,0 +1,13 @@
+<ol class="text-sm text-gray-400 dark:text-gray-600">
+  {{ template "crumb" (dict "p1" . "p2" .) }}
+</ol>
+{{ define "crumb" }}
+  {{ if .p1.Parent }}
+    {{ template "crumb" (dict "p1" .p1.Parent "p2" .p2 ) }}
+  {{ else if not .p1.IsHome }}
+    {{ template "crumb" (dict "p1" .p1.Site.Home "p2" .p2 ) }}
+  {{ end }}
+  <li class="inline {{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }}">
+    <a href="{{ .p1.Permalink }}">{{ .p1.Title }}</a><span class="px-1 text-primary-500">/</span>
+  </li>
+{{ end }}

layouts/partials/section-heading.html

@@ -1,3 +1,6 @@
+{{ if .Site.Params.list.showBreadcrumbs | default false }}
+  {{ partial "breadcrumbs.html" . }}
+{{ end }}
 <section class="prose dark:prose-light">
   <h1 class="mb-3 text-4xl font-extrabold">{{ .Title }}</h1>
   <section>{{ .Content }}</section>