Add breadcrumbs config to hide current page and change home text

Changes `breadcrumbs` config into an object to add customizations such as hiding current page and changing the text of
the home crumb.

By default, Typo will now show breadcrumbs. If breadcrumbs are enabled, the current default of showing the
current page crumb is preserved.

BREAKING CHANGE: `breadcrumbs` is now an object so existing `breadcrumbs = <true/false>` line in config needs to be changed.

.gitignore

@@ -108,3 +108,5 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
+
+.idea/

assets/css/main.css

@@ -524,16 +524,14 @@ figcaption {
 /* breadcrumbs */
 
 .breadcrumbs {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2px;
   font-size: small;
   margin-bottom: calc(-0.5 * var(--h1-margin-top));
   font-family: var(--font-mono);
 }
 
-.breadcrumbs span {
-  margin-right: -5px;
-  margin-left: -5px;
-}
-
 /* Comments */
 
 .giscus {

hugo.toml

@@ -7,3 +7,9 @@ title = 'typo'
 [module.hugoVersion]
 extended = false
 min = "0.116.0"
+
+# Default config
+[params.breadcrumbs]
+enabled = true
+showCurrentPage = true
+home = "Home"

layouts/partials/breadcrumbs.html

@@ -1,9 +1,23 @@
-{{ if .Site.Params.breadcrumbs }}
+{{- if .Site.Params.breadcrumbs.enabled -}}
+{{- $breadcrumbs := .Site.Params.breadcrumbs -}}
 <div class="breadcrumbs">
-    {{ range .Ancestors.Reverse }}
+    {{- range $i, $v := .Ancestors.Reverse -}}
-    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+        <a href="{{ .RelPermalink }}">
-    <span class="breadcrumbs-separator"> / </span>
+            {{- if (and (eq $i 0) (ne $breadcrumbs.home "")) -}}
-    {{ end }}
+                {{- $breadcrumbs.home -}}
-    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+            {{- else -}}
+                {{- .Title -}}
+            {{- end -}}
+        </a>
+        
+        {{- if (lt $i (sub $.Ancestors.Len 1)) -}}
+            <span class="breadcrumbs-separator">/</span>
+        {{- end -}}
+    {{- end -}}
+
+    {{- if $breadcrumbs.showCurrentPage -}}
+        <span class="breadcrumbs-separator">/</span>
+        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
+    {{- end -}}
 </div>
-{{ end }}
+{{- end -}}

wiki/features/other-parameters.md

@@ -25,11 +25,21 @@ description = "Your description"
 
 Show breadcrumbs on pages.
 
+Example:
+
 ```toml
-[params]
+[params.breadcrumbs]
-breadcrumbs = true
+enabled = true
+showCurrentPage = true
+home = "~"
 ```
 
+Set `enabled` to `false` if you want to hide breadcrumbs. By default, breadcrumbs are shown.
+
+Set `showCurrentPage` to `false` to hide the last crumb, i.e, the current page.
+
+`home` when set with a non-empty string, uses the latter as the first crumb instead of the string "Home".
+
 ## Comments
 
 Enable comments on your posts using [Giscus](https://giscus.app/).

wiki/setup.md

@@ -114,8 +114,9 @@ paginationSize = 100
 listSummaries = true
 listDateFormat = '2 Jan 2006'
 
-# Breadcrumbs
+# Breadcrumbs (Uncomment to disable)
-breadcrumbs = true
+# [params.breadcrumbs]
+# enabled = false
 
 # Social icons
 [[params.social]]