Breadcrum with branch section support

tips & tricks
1

Hi there,

I have upgraded the actual breadcrumb code to take into account sections branches as well.

This way even branches section elements get the active tag.

By comparing the last URL element :

{{ $lastUrlElement := index (last 1 (split (delimit (split .RelPermalink “/”) “,” “”) “,”)) 0 }}


  <nav class="" aria-label="breadcrumb ">
      <ol class="breadcrumb justify-content-center">
          <li class="breadcrumb-item"><a href="/">{{i18n "Home" }}</a></li>
          {{ $lastUrlElement := index (last 1 (split (delimit (split .RelPermalink "/") "," "") ",")) 0 }}
          {{- $.Scratch.Set "url" "" -}}
          {{- range (split .RelPermalink "/") -}}
              {{- if (gt (len .) 0) -}}
                  {{- $.Scratch.Set "isSection" "false" -}}
                  {{- $.Scratch.Set "isPage" "false" -}}
                  {{- $.Scratch.Add "url" (print "/" . ) -}}
                  {{- if $.Site.GetPage (print . ".md") -}}
                      {{- with $.Site.GetPage (print . ".md") -}}
                          {{- if .IsPage -}}
                              {{- $.Scratch.Set "isPage" "true" -}}
                          {{- end -}}
                      {{- end -}}                                              
                  {{- end -}}
                  {{- if eq ($.Scratch.Get "isPage") "true" -}}
                      {{- with $.Site.GetPage (print . ".md") -}}
                          <li class="breadcrumb-item active" aria-current="page"><a href="{{ $.Scratch.Get `url` }}">
                          {{ if  (eq (i18n .Title) "" ) }} {{ .Title  }}{{ else }}{{ i18n .Title  }}{{ end }}</a></li>
                      {{- end -}}
                  {{- else -}}
                      {{- if eq $lastUrlElement . -}}
                          <li class="breadcrumb-item active"><a href="{{ $.Scratch.Get `url` }}">{{ if  (eq (i18n (humanize . )) "" ) }} {{   humanize .}}{{ else }}{{ i18n (humanize . )  }}{{ end }}</a></li>
                      {{- else -}}
                          <li class="breadcrumb-item"><a href="{{ $.Scratch.Get `url` }}">{{ if  (eq (i18n (humanize . )) "" ) }} {{   humanize .}}{{ else }}{{ i18n (humanize . )  }}{{ end }}</a></li>
                      {{- end -}}
                  {{- end -}}
              {{- end -}}
          {{- end -}}
      </ol>
  </nav>

Hope it helps someone.

2 Likes
2

Tips & Tricks is a better category for this. I will try it on my site.

3

Yeah you are right, but I can’t change the category anymore, I think it has to be an admin or moderator job now !

4

🖉 - done.

(not a moderator)

5

I tried but I a message popped : "You do not have the right to access …"

Thanks :slight_smile:

6

Hmm, I stopped wondering about my powers :slight_smile: they are many. I shall use them for the good of society :smiley:

2 Likes
7

that’s the spirit :smile:

8

It’s probably a Discourse trust level thing.

Maybe @discobot trust levels

will help

9

Hi! To find out what I can do, say @discobot display help.

1 Like
10

Thanks @Cloud-Forge

I feel ashamed when seen your approach to breadcrumbs in Hugo. My current breadcrumb setup was a desperate attempt.

{{ define "breadcrumb" }}
  {{ with .Parent }}
    {{ template "breadcrumb" . }}
    <a href="{{ .Permalink }}">{{ if .IsHome }}{{ partial "svg" "heroicons/solid/home" }} {{ i18n "home" }}{{ else }}{{.Title}}{{ end }}</a> »
  {{ end }}
{{ end }}
{{ if not .IsHome }}
  <div class="box">
    {{ template "breadcrumb" . }}
    {{.Title}}
  </div>
{{ end }}

Could you pls rate my Hugo breadcrumb code?

  • A clumsy Hugo code attempt
  • I’ve seen worse.
  • It is OK, not that bad.

0 voters

I’m simply wondering about the quality of my Hugo code in order to choose whether I should continue hacking or devote more time to learning Hugo functions.

Thanks

11

The thing is :
If your breadcrumb does what you need it to do, there is need to feel ashamed …
If it doesn’t,
search for the right approach.

In my case, I needed a breadcrumb for my site, I looked around to see if someone had the good idea to share a solution : first link in google when you look for Hugo breadcrumb you find this :

I did just adapt this very piece code to meet my need, since my site has lots of branches and the shared example above didn’t seems to tackle the “active” class for branches, I did some modifications. That’s all there is to it.

At the end of the day it’s not a race or anything, it’s just about making the Hugo engine to do what you need it to do. The real question you need to ask yourself is just that.

If it does, you are all set,
if it doesn’t, you should ask yourself : what should I do to make it so ?

  1. learn by searching around
  2. learn by asking questions here the community is quite friendly.
  3. Experiment, look at other theme to see how they tackle some of the things you need…
2 Likes