雨果：如何在配置文件中特定于部分的菜单中显示子页面？

Question

我正在使用Hugo建立一个文档网站。它具有主要的NAV和侧栏NAV。研究之后，我使用配置文件降落了菜单。菜单呈现正确，但是我坚持如何根据我使用的配置文件进行渲染侧边栏导航（请参见下面的示例）。

页面布局的屏幕截图

这是我的config json。如您所见，我正在调用一个“主”菜单，但使用“父”进行导航，这将属于侧边栏导航。

{
    "baseURL": "http://example.com/",
    "languageCode": "en-us",
    "title": "DS",
    "menu": {
        "main": [
            {
                "name": "Getting Started",
                "url": "/getting-started",
                "pageRef": "getting-started",
                "weight": 10
            },
            {
                "name": "Contents",
                "url": "/contents",
                "pageRef": "contents",
                "parent": "Getting Started"
            },
            {
                "name": "Download",
                "url": "/download",
                "pageRef": "download",
                "parent": "Getting Started"
            },
            {
                "name": "Foundations",
                "url": "/foundations",
                "pageRef": "foundations",
                "weight": 20
            },
            {
                "name": "Colors",
                "url": "/colors",
                "pageRef": "colors",
                "parent": "Foundations"
            },
            {
                "name": "Grid",
                "url": "/grid",
                "pageRef": "grid",
                "parent": "Foundations"
            },
            {
                "name": "Components",
                "url": "/components",
                "pageRef": "components",
                "weight": 30
            },
            {
                "name": "Alerts",
                "url": "/alerts",
                "pageRef": "alerts",
                "parent": "Components"
            },
            {
                "name": "Badges",
                "url": "/badges",
                "pageRef": "badges",
                "parent": "Components"
            },
            {
                "name": "Utilities",
                "url": "/utilities",
                "pageRef": "utilities",
                "weight": 40
            },
            {
                "name": "Background",
                "url": "/background",
                "pageRef": "background",
                "parent": "Utilities"
            },
            {
                "name": "Borders",
                "url": "/borders",
                "pageRef": "borders",
                "parent": "Utilities"
            }
        ]
    }
}

这是我的主航的代码，它运行良好。

<header class="header">
    <nav class="header__nav">
        <div class="container header__nav-container">
            <div class="header__brand">
                <a href="{{ .Site.BaseURL }}" class="header__brand-type-link">{{ .Site.Title }}</a>
            </div>

            <ul class="header__nav-list">
                {{- $currentPage := . -}} 
                
                {{- range .Site.Menus.main -}}
                <li class="header__nav-item">
                    <a href="{{ .URL }}" class='header__nav-link {{ if or ($currentPage.IsMenuCurrent "main" .) ($currentPage.HasMenuCurrent "main" .) }}current_page_link{{end}}'>{{ .Name }}</a>
                </li>
                {{ end }}
            </ul>
        </div>
    </nav>
</header>

这是我的侧边栏导航的代码。如果我不需要基于您所处的部分显示导航，这将效果很好。我觉得与我的范围内的.Children有一些可靠的东西。我尝试了.site.Section.Children之类的方法，但这无效。关于我在这里缺少的东西有什么想法吗？

<nav class="sidebar__nav">
    <ul class="sidebar__nav-list">
        {{- $currentPage := . -}} 
        
        {{- range .Site.Menus.main -}}
                {{- range .Children -}}
                <li class="sidebar__nav-item">
                    <a href="{{ .URL }}" class="sidebar__nav-link {{ if $currentPage.IsMenuCurrent `main` . }}current_page_link{{end}}">{{ .Name }}</a>
                </li>
                {{ end }}
        {{ end }}
    </ul>
</nav>

Answer 1

我相信您可以使用{{$ proction：= $ currentpage.section}}获得当前页面的部分{ - 如果eq .parent $ pection-}} 。我没有测试过这一点，但理论上应该起作用。您还应该检查菜单条目本身是否有孩子，如果没有孩子，即使是当前页面，也只会将其显示为独立条目。

<ul class="sidebar__nav-list">
  {{- $currentPage := . -}}
  {{- $section := $currentPage.Section -}}
  {{- range .Site.Menus.main -}}
    {{- if .HasChildren -}}
      <li class="sidebar__nav-item">
        <a href="{{ .URL }}" class="sidebar__nav-link {{ if $currentPage.IsMenuCurrent `main` . }}current_page_link{{end}}">
          {{ .Name }}
        </a>
        <ul class="sub-menu">
          {{ range .Children }}
            {{- if eq .Parent $section -}}
              <li class="sidebar__nav-item">
                <a href="{{ .URL }}" class="sidebar__nav-link">{{ .Name }}</a>                  
              </li>
            {{ end }}
          {{ end }}
        </ul>
      </li>
    {{ else }}
      <li class="sidebar__nav-item">
        <a href="{{ .URL }}" class="sidebar__nav-link {{ if $currentPage.IsMenuCurrent `main` . }}current_page_link{{end}}">
          {{ .Name }}              
        </a>
      </li>
    {{ end }}
  {{ end }}
</ul>