Hugo 中的两级菜单答案

【问题标题】：Two Level Menus in HugoHugo 中的两级菜单
【发布时间】：2021-03-03 04:17:02
【问题描述】：

我想使用 Hugo 创建一个具有深度菜单的网站。我希望能够使子项成为新的较低级别项的父项。我尝试使用本网站的教程。 https://codingnconcepts.com/hugo/nested-menu-hugo/

我能够创建一级子菜单，但我想要一个可以继续自动创建子页面的逻辑系统。

<nav class="nav">
    <ul class="menu">
        {{ range .Site.Menus.main }}
        <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
            <span>{{ .Name }}</span>
            {{ if .HasChildren }}
            <span class="drop-icon" for="{{ .Name }}">▾</span>
            <ul class="sub-menu">
                {{ range .Children }}
                <li class="{{ if $currentPage.HasMenuCurrent "main" . }}active{{ end }}">
                    <span>{{ .Name }}</span>
                </li>
                {{ end }}
            </ul>
           {{ end }}
        </li>
        {{ end }}
    </ul>
</nav>

上面的这个示例创建了一个子菜单，但我不知道如何使两个级别起作用。

【问题讨论】：

标签： web hugo static-site-generation

【解决方案1】：

在 config.toml 中：

[menu]

[[menu.main]]
name = "home"
identifier = "home"
url = "/home/"

[[menu.main]]
parent = "home"
name = "about"
identifier = "about"
url = "/about/"

[[menu.main]]
parent = "home"
name = "contact"
identifier = "contact"
url = "/contact/"

然后是您的模板 - 来自 docs

<aside>
    <ul>
        {{ $currentPage := . }}
        {{ range .Site.Menus.main }}
            {{ 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>
            {{ else }}
                <li>
                    <a href="{{ .URL }}">
                        {{ .Pre }}
                        <span>{{ .Name }}</span>
                    </a>
                </li>
            {{ end }}
        {{ end }}
    </ul>
</aside>

祝你愉快

【讨论】：