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

Question

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

我正在为这个项目使用 Tokiwa 主题。 here 是我的仓库的 link。

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

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

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

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

的列表页面

诗 1 的描述 - link 到诗 1

诗 2 的描述 - link 到诗 2

诗 3 的描述 - link 到诗 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

在我的 layouts/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

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

我也在 hugo 论坛上 post 编辑了这个，但无法完全回答我的问题。我在hugo论坛上浏览了很多关于“嵌套菜单”的主题，但仍然无法完全弄清楚。

谢谢

Answer 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.

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

Creating nesting menus on Hugo theme?

static-site

web

hugo