在 Hugo 主题上创建嵌套菜单？答案

【问题标题】：Creating nesting menus on Hugo theme?在 Hugo 主题上创建嵌套菜单？
【发布时间】：2021-05-25 04:40:44
【问题描述】：

我正在尝试用 Hugo 建立一个网站。我在设置嵌套菜单时遇到了一些问题。

我在这个项目中使用Tokiwa 主题。 here 是我的仓库的链接。

在该站点的主页上，我正在尝试创建向下滑动以显示子文件夹的菜单，这是来自imperial-library 站点的示例，以说明我的意思。您可以单击“游戏书”，然后打开一个列表，其中显示该选项的所有可用主题。例如（All、Arena、...）如果您单击其中一个主题，它会将您带到一个页面，其中包含所有条目的列表和每个条目的简短描述。然后，您可以单击该条目以查看该帖子。

在我的项目中，我的目录是结构化的

内容 -> 写作（写作有子文件夹诗歌和故事）

所以在主页上我希望有人能够点击“写作”然后它会向下滑动以显示“诗歌”和“故事”。然后，您可以单击其中任何一个来查看格式如下的列表页面

第 1 首诗的描述 - 第 1 首诗的链接

第 2 首诗的描述 - 第 2 首诗的链接

第 3 首诗的描述 - 第 3 首诗的链接

除了写作之外，我还想将此功能添加到其他主题。

我的 config.toml 文件有以下内容

 sectionPagesMenu = "main"

[menu]
  [[menu.main]]
    identifier = "writing"
    name = "writing"
    url = "/writing"
    weight = 1
     [[menu.main]]
    identifier = "post"
    name = "post"
    url = "/post"
    weight = 2
  [[menu.main]]
    identifier = "poems"
    name = "poems"
    url = "/category/poems"
    parent = "writing"
    weight = 1
  [[menu.main]]
    identifier = "stories"
    name = "stories"
    url = "/category/stories"
    parent = "writing"
    weight = 2

在我的布局/index.html

{{ define "menu-item" }}
  {{ $page := .page }}
  {{ with .entry }}
    {{ if .HasChildren }}
      <li class="{{ if $page.HasMenuCurrent "main" . }}active{{ end }}">
        <a href="{{ .URL }}">{{ .Name }}</a>
        <ul class="sub-menu">
          {{ range .Children }}
            {{ template "menu-item" (dict "entry" . "page" $page) }}
          {{ end }}
        </ul>
      </li>
    {{ else }}
      <li class="{{ if $page.IsMenuCurrent "main" . }}active{{ end }}">
        <a href="{{ .URL }}">{{ .Name }}</a>
      </li>
    {{ end }}
  {{ end }}
{{ end }}

<ul>
  {{ $page := . }}
  {{ range .Site.Menus.main }}
    {{ template "menu-item" (dict "entry" . "page" $page) }}
  {{ end }}
</ul>

我也试过关注this example from the hugo docs

目前我的网站以主题显示，当我点击链接时，url 似乎是正确的 ex writing/poems/poem1。但是，文件夹显示不正确。

我也在雨果论坛上发布了此内容，但无法完全回答我的问题。我浏览了 hugo 论坛上有关“嵌套菜单”的许多主题，但仍然无法准确地弄清楚这一点。

谢谢

【问题讨论】：

标签： web hugo static-site

【解决方案1】：

我在 Tokiwa github 上问过这个问题。

解决办法是

将custom.css和custom.js放入static/lib/文件夹，在baseof.html中添加两行：

<link rel="stylesheet" href='{{"lib/custom.css"|absURL}}' crossorigin="anonymous">
<script src='{{"lib/custom.js"|absURL}}' crossorigin="anonymous"></script>
Before </head> tag.

【讨论】：