Question

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

我正在为此项目使用 Tokiwa 主题。 here 是指向我的存储库的链接。

在站点的主页面上，我尝试创建向下滑动以显示子文件夹的菜单，以下是来自 imperial-library 站点的示例来说明我的意思。您可以单击“游戏书籍”，然后会打开一个列表，其中显示该选项的所有可用主题。 Ex (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

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

我也在 Hugo 论坛上发布了此内容，但无法完全回答我的问题。我在 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 主题上创建嵌套菜单？

1 个答案: