.File.UniqueID and $currentNode.File.UniqueID does not match in TOC

support
1

Hello,
I am making a TOC for my hugo project.
content

└── docs   ////// level1
    ├── doc1-folder  
          └── d1_a.md      //// level 2 

    └── doc2-folder    /// level 2
          └── d2_a.md      /// 
          └── doc3-folder
                   └── d3_a.md   ///  level 3

For this, I am looping through all the folders. My objective is to have a different design for folders which are in depth = 3 or level 3 as shown above.
For depth 3 and more folder I am using template “higher-depth-template” as shown in code below.
For the overall structure, I am using template “section-tree-nav”
To highlight the active page in TOC , I am using
{{if eq .File.UniqueID $currentNode.File.UniqueID}}active{{end}}

It works for template “section-tree-nav” but not for higher-depth-template , so when I am higher depth pages, TOC does not show active class for that page element. I think there is some issue with variables.

If I print .File.Dir and $currentNode.File.Dir variables in higher-depth-template
File.Dir is showing the current page for example - …/docs/doc2 folder/doc3-folder/d3-a.md
$currentNode.File.Dir is showing parent folder…/docs/doc2 folder
Therefore it does not match Unique ID in higher-depth-template and does not add active class.


{{ $currentNode := . }}
{{ define "higher-depth-template"}}
{{ $currentNode := .currentnode }}
{{ $counter := .counter }}
{{ $depth := .depth }}
    {{ range $currentNode.Sections.ByWeight }}
        <div class="acc-card-body">
            <p class="acc-card-body__title {{if eq .File.UniqueID $currentNode.File.UniqueID}}active{{end}}">
                <a class="acc-card-body__titleLink" href="{{.Permalink}}">
                {{ or .Params.sidebarTitle .Params.pageTitle }}
                </a>
            </p>
            <ul class="acc-card-body__list">
                {{ $currentNode.Scratch.Set "pages" .Pages }}
        {{ if .Sections }}
            {{ $currentNode.Scratch.Set "pages" (.Pages | union .Sections) }}
        {{ end }}
        {{ $pages := ($currentNode.Scratch.Get "pages") }}
                {{ range .Pages }}
                    <li > 
                        <a class="{{if eq .File.UniqueID $currentNode.File.UniqueID}}active{{end}}" href="{{.Permalink}}">
                        {{ .Params.pageTitle }}
                        {{.File.UniqueID}} - {{$currentNode.File.UniqueID}}
                        </a>
                    </li>
                {{end}}
            </ul>
        </div>
        {{end}}
    {{ end }}
    {{ $currentNode := . }}
    {{ $depth := 0 }}
    {{ $showvisitedlinks := .Site.Params.showVisitedLinks }}
    {{ $counter := 1 }}  
    {{range .Site.Home.Sections.ByWeight}}
        {{ $counter = add $counter 1 }}
        {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "counter" $counter "depth" $depth}}
    {{end}}
{{ define "section-tree-nav" }}
    {{ $showvisitedlinks := .showvisitedlinks }}
    {{ $currentNode := .currentnode }}
    {{ $counter := .counter }}
    {{ $depth := .depth }}
    {{ with .sect }}
        {{ if and (.IsSection)   (eq $depth 0) }}
                <div class="doc-card">
                        {{ $numberOfPages := (add (len .Pages) (len .Sections)) }}
                           {{ if ne  $numberOfPages 0 }}

                                    {{ $currentNode.Scratch.Set "pages" .Pages }}
                                    {{ if .Sections }}
                                        {{ $currentNode.Scratch.Set "pages" (.Pages | union .Sections) }}

                                        {{ $depth = add $depth 1 }}
                                    {{ end }}
                                    {{ if(gt $depth 1 )}}
                                    <ul class="doc-card-body__list">
                                        <li class="doc-card-body__item "> 
                                            <a class="doc-card-body__itemLink 
                                            {{if eq .File.UniqueID $currentNode.File.UniqueID}}active{{end}}" href="{{.RelPermalink}}">
                                            {{or .Params.submenuTitle "Overview"}}
                                            <div class="tester"></div>
                                            </a>
                                        </li>
                                    {{ end }}
                                    {{ $pages := ($currentNode.Scratch.Get "pages") }}

                                    {{ range $pages.ByWeight }}
                                        {{ if and .Params.hidden (not $.showhidden) }} 
                                        {{else}}

                                            {{ template "section-tree-nav" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "depth" $depth}}
                                        {{end}}
                                    {{ end }}
                                {{ if(gt $depth 1 )}}
                                </ul>
                                {{ end }}
                        </div>
                    {{ end }}
                </div>
        {{ else if (gt $depth 0)}}
        {{ $currentNode := . }}
        {{ template "higher-depth-template" dict "sect" . "currentnode" $currentNode "showvisitedlinks" $showvisitedlinks "depth" $depth }}

        {{ else }}
            <li class="doc-card-body__item "> 
                <a class="doc-card-body__itemLink 
                {{if eq .File.UniqueID $currentNode.File.UniqueID}}active{{end}}" href="{{.Permalink}}">
                {{ .Params.sidebarTitle }}
                <div class="tester"></div>
                </a>
            </li>
        {{ end }}
    {{ end }}
{{ end }}
2

While I am not prepared to spend the time required to understand or debug 95 lines of code, this did catch my attention (lines 14-19):

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

Why are you ranging through .Pages instead of $pages?

3

@jmooring Thanks for looking into the code. Actually I tried $page and .Page . But I get same issue.

4

Do you mean you tried $pages? Because $page is not defined.

5

@jmooring yeah sorry, I mean I tried $pages

6

@jmooring I think the issue is where inside higher-depth-template range I am trying to find current iteration UniqueID in line {{$currentNode.File.UniqueID}} , Instead of this do I need to use something else to get current iteration’s section UniqueID. Or do you believe it is fine?

{{ range $currentNode.Sections.ByWeight }}
    {{$currentNode.File.UniqueID}}    // this I expected would return current opened file UniqueID but it  returns parent's parent folder uniqueID , probably because //$currentNode is still the parent folder node.
    {{.File.UniqueID}}  // this returns the current page uniqueID , thats what I need from above code, so that I can match and assign active class to this TOC dom element.
{{end}}