Breadcrumbs for only blog posts links to home page

Using Themes
1

I’m using the Congo theme and would like to modify the breadcrumbs partial such that the breadcrumbs for only blog posts link to the home page while those for other types of pages link to the section index.

I know that I need to insert a conditional somewhere in this but I’m just not able to understand how this works

<ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden">
  {{ 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="{{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }} inline">
    <a
      class="dark:underline-neutral-600 decoration-neutral-300 hover:underline"
      href="{{ .p1.RelPermalink }}"
      >{{ if .p1.Title }}
        {{- .p1.Title -}}
      {{ else }}
        {{- .p1.Section -}}
      {{ end }}</a
    ><span class="px-1 text-primary-500">/</span>
  </li>
{{ end }}
2

Not sure this is the best solution but I added a conditional in the <a> tag {{ if eq .p1.RelPermalink "/blog/" }} {{ .p1.Site.Home }} {{ else }} {{ .p1.RelPermalink }} {{ end }} and it seems to work?

<ol class="text-sm text-neutral-500 dark:text-neutral-400 print:hidden">
  {{ 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="{{ if or (eq .p1 .p2) (.p1.IsHome) }}hidden{{ end }} inline">
  <a
    class="dark:underline-neutral-600 decoration-neutral-300 hover:underline"
    href="{{ if eq .p1.RelPermalink "/blog/" }} {{ .p1.Site.Home }} {{ else }} {{ .p1.RelPermalink }} {{ end }}"
    >{{ if .p1.Title }}
    {{- .p1.Title -}}
    {{ else }}
    {{- .p1.Section -}}
    {{ end }}</a
	       ><span class="px-1 text-primary-500">/</span>
</li>
{{ end }}
3

Breadcrumbs got a lot easier when the Ancestors method was introduced a few years ago.

layouts/partials/breadcrumbs.html 
{{ with .Ancestors.Reverse }}
  <nav class="nav-inline breadcrumbs">
    <ol>
      {{ $p := . | append $ }}
      {{ range $k, $_ := $p }}
        {{ if and (not $k) (ne $.Section "blog")}}
          {{ continue }}
        {{ end }}
        {{ if eq $k (sub (len $p) 1) }}
          <li><a aria-current="page" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
        {{ else }}
          <li><a aria-current="true" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a></li>
        {{ end }}
      {{ end }}
    </ol>
  </nav>
{{ end }}
2 Likes
4

i did find the Ancestors method on the Hugo docs but it kinda went over my head. I’ll maybe take a look into this soon though. thanks!

5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.