Pre-next-navigation: How to move along the tree?

1

Let’s say my page structure looks like this:

Topic 1

  • Subtopic 1
  • Subtopic 2

Topic 2

  • Subtopic 1
  • Subtopic 2

then

        {{ with .PrevInSection }}
          <a class="previous" href="{{.Permalink}}"> {{.Title}}</a>
        {{ end }}
        {{ with .NextInSection }}
          <a class="next" href="{{.Permalink}}"> {{.Title}}</a>
        {{ end }}

jumps from Topic 1 to Topic 2. But I want it to go like this

Topic 1 > Subtopic 1 > Subtopic 2 > Topic 2 > Subtopic 1 > Subtopic 2

How can I achieve this?

2

Hi,
I don’t know how to do that, but that’s something I’m also interested in. I’ve seen a working implementation of it in the hugo-learn theme, so the code to do that is probably in their repo somewhere: https://github.com/matcornic/hugo-theme-learn

3

Good idea!

The navigation is defined in the file layouts/partial/footer.html (line 8-52):

<div id="navigation">
    <!-- Next prev page -->
    {{ $currentNode := . }}
    
    {{ template "menu-nextprev" dict "menu" .Site.Home "currentnode" $currentNode }}
    
    {{ define "menu-nextprev" }}
        {{$currentNode := .currentnode }}
        {{ if ne .menu.Params.hidden true}}
            {{if hasPrefix $currentNode.RelPermalink .menu.RelPermalink }}
                {{ $currentNode.Scratch.Set "NextPageOK" "OK" }}
                {{ $currentNode.Scratch.Set "prevPage" ($currentNode.Scratch.Get "prevPageTmp") }}
            {{else}}
                {{if eq ($currentNode.Scratch.Get "NextPageOK") "OK"}}
                    {{ $currentNode.Scratch.Set "NextPageOK" nil }}
                    {{ $currentNode.Scratch.Set "nextPage" .menu }}
                {{end}}
            {{end}}
            {{ $currentNode.Scratch.Set "prevPageTmp" .menu }}

                {{ $currentNode.Scratch.Set "pages" .menu.Pages }}
                {{ if .menu.IsHome}}
                    {{ $currentNode.Scratch.Set "pages" .menu.Sections }}
                {{ else if .menu.Sections}}
                    {{ $currentNode.Scratch.Set "pages" (.menu.Pages | union .menu.Sections) }}
                {{end}}
                {{ $pages := ($currentNode.Scratch.Get "pages") }}

                {{ range $pages.ByWeight  }}
                    {{ template "menu-nextprev" dict "menu" . "currentnode" $currentNode }}
                {{end}}
        {{ end }}
    {{ end }}


 {{$showPrevNext := (and (not .Params.disableNextPrev) (not .Site.Params.disableNextPrev))}}
 {{if $showPrevNext}}
	{{with ($.Scratch.Get "prevPage")}}
		<a class="nav nav-prev" href="{{.RelPermalink}}" title="{{.Title}}"> <i class="fa fa-chevron-left"></i></a>
	{{end}}
	{{with ($.Scratch.Get "nextPage")}}
		<a class="nav nav-next" href="{{.RelPermalink}}" title="{{.Title}}" style="margin-right: 0px;"><i class="fa fa-chevron-right"></i></a>
	{{end}}
{{end}}
</div>

@fekete-robert: Maybe your are interested in how I found the relevant code. I inspected the live demo of the theme with the Firefox Web Console (there are similar tools for other browsers) to find the ID of the navigation (which is actually “navigation”). Then I searched in the theme’s GitHub repo for “navigation”.

I found another error in my file tree which at first looked like this

/content/topic1/topic1.md
/content/topic1/subtopic1/subtopic1.md

instead of

/content/topic1/_index.md
/content/topic1/subtopic1/_index.md

In the docs it says: The important part to understand is, that to make the section tree fully navigational, at least the lower-most section needs a content file. (e.g. _index.md ).

Now the prev-next navigation works like charm.

1 Like
5

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