Using menus with .Name

support
1

I am trying to replicate Hugo docs side nav, I have a page under content | data-store | _index.md and content | data-store | structuring-the-data.md, they have the following front matter:

# _index.md
---
title: "Data Store"
date: 2020-01-10T13:29:16+13:00
draft: false
menu: 
    docs:
        parent: "data-store"
        pre: "hdd"
        weight: 15
---

and

# structuring-the-data.md
title: "Structuring the Data"
date: 2020-01-10T18:50:32+13:00
draft: false
menu: 
    docs:
        parent: "data-store"
        weight: 16

And my HTML code is:

<nav id="docs-nav" class="docs-nav navbar">
    <ul class="section-items list-unstyled nav flex-column pb-3">
        {{ $currentPage := . }}
        {{ range .Site.Menus.docs.ByWeight }}
            {{ if .HasChildren }}
                <li class="nav-item section-title">
                    <a class="nav-link {{if or ($currentPage.IsMenuCurrent "docs" .) ($currentPage.HasMenuCurrent "docs" .) }}active{{ end }}" href="#">{{ .Name }}</a>
                </li>
                {{ range .Children }}
                    <li class="nav-item">
                        <a class="nav-link {{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}"
                           href="{{ .URL }}">{{ .Name }}</a>
                    </li>
                {{end}}
        {{end}}
    </ul>

</nav>

At the root {{.Name}} it renders as data-store which is taken from parent, but from https://github.com/gohugoio/hugoDocs/blob/master/content/en/about/_index.md, it is rendered as About Hugo. If I change the parent menu to Data Store, then I get the correct result. Is there a way I can replicate what’s in the Hugo docs?

2

Try:

# _index.md
---
title: "Data Store"
date: 2020-01-10T13:29:16+13:00
draft: false
menu: 
    docs:
        pre: "hdd"
        weight: 15
---
3

This is creating a seperate nav list instead of being in the tree as in

|- Data Store
|
`- data-store
    |
    `- Structuring the Data
4

You need to define a menu item entry "data-store" which has menu item .Name = "Data Store" .

See Hugo docs site config

This is the parent entry that the children entries point to.

5

I got this working, by just using identifier so that you can still use {{.Name}} and get the title defined in the content page:

    <ul>
        {{ $currentPage := . }}
        {{ range .Site.Menus.docs.ByWeight }}
            {{ if .HasChildren }}
                <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
                    <a href="#">
                        {{ .Pre }}
						<span>{{.Name}}</span>
                    </a>
                </li>
                <ul class="sub-menu">
                    {{ range .Children }}
                        <li class="{{ if $currentPage.IsMenuCurrent "main" . }}active{{ end }}">
                            <a href="{{ .URL }}">{{ .Name }}</a>
                        </li>
                    {{ end }}
                </ul>
            {{ end }}
        {{ end }}
    </ul>

# _index.md
---
title: "Data Store"
date: 2020-01-10T13:29:16+13:00
draft: false
menu: 
  docs:
    pre: "hdd"
    identifier: data-store
---