Beginner problem - breadcrumbs, Scratch and nested sections

support
1

Hi everyone!

I apologise, I am a beginner and this might be a very easy problem. I come from a JavaScript background and am still learning to ‘think in Hugo’.

With the wonderful release of nested sections in Hugo 0.22, I have started with @bep’s demo site and am trying to add breadcrumbs functionality.

Attempt 1 - kind of works

In .\layouts\_default\baseof.html I added at the bottom:

{{ define "breadcrumbs" }}
	{{ if .Parent }}
		<li>{{ .Parent.Title }}</li>
		{{ template "breadcrumbs" .Parent }}		
	{{ end }}
{{ end }}

Then in the <body> I call it:

<ul>{{ template "breadcrumbs" .Page }}</ul>

I am trying to say “If this page has a parent, then output said parent’s title. Does the parent have a parent? Then output said parent’s title. And so on until you run out of parents.”

It works, but obviously is in reverse order from normal breadcrumbs. For example, on page http://localhost:1313/section1/s1_1/s_1_2b/c/ it correctly outputs:

* Section S1/2b
* Section S1/1
* Section1s
* Hugo Test Site

Attempt 2 with Scratch - yikes!

I would now like to output the same list in reverse order. ie:

  • Hugo Test Site
  • Section1s
  • Section S1/1
  • Section S1/2b

I tried to use Scratch to incrementally build the list. I changed the above like so:

{{ define "breadcrumbs" }}
	{{ if .Parent }}
		{{ $.Scratch.Add "breadcrumbString" (print .Parent.Title " > ") }}
		{{ template "breadcrumbs" .Parent }}		
	{{ end }}
{{ end }}

Then in the <body> I call it, then output the “breadcrumbString” from Scratch:

<ul>{{ template "breadcrumbs" .Page }}{{ $.Scratch.Get "breadcrumbString" }}</ul>

Sample results (working up the tree):

Page: http://localhost:1313/section1/s1_1/hugo-rocks/
Output: Section S1/1 >

Page: http://localhost:1313/section1/s1_1/
Output: Section1s > Section1s > Section1s > Section1s > Section1s > Section1s > Section1s > Section1s >

Page: http://localhost:1313/section1/
Output: Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site > Hugo Test Site >

Conclusion

It is clear that I don’t know what I’m doing, and I don’t know how to ‘think in Hugo’ yet :frowning: In JavaScript, I would add the parent titles to an array, then reverse the array order. But I am at a loss and I wonder if I am just approaching this problem all wrong. I would appreciate any feedback.

Thanks for reading this long story!

Birdy

2

Did you poke around with sort?

3

I have poked around with sort - the Grand Plan was to add the breadcrumbs incrementally into Scratch and use sort to reverse the order. I never got to that part of the plan though - as you can see from my original post, the Scratch output was too bonkers to sort!

4

Could you not just reverse the recursive template call and the li in your template? In other words use:

{{ define "breadcrumbs" }}
	{{ if .Parent }}
		{{ template "breadcrumbs" .Parent }}		
		{{ $.Scratch.Add "breadcrumbString" (print .Parent.Title " > ") }}
	{{ end }}
{{ end }}

This should output something like

* Hugo Test Site
* Section1s
* Section S1/1
* Section S1/2b
5

Hello,

Not sure if you managed to sort your issue but there is a breadcrumbs example in the docs that would output what you need.

[https://gohugo.io/content-management/sections/#example-breadcrumb-navigation](http://Breadcrumb example in the docs)

Hope that helps you or someone with a similar issue.