gpt4 book ai didi

web - 在 Hugo 主题上创建嵌套菜单?

转载 作者:行者123 更新时间:2023-12-05 06:04:21 29 4
gpt4 key购买 nike

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

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

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

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

content -> writing(Writing 有子文件夹 poem 和 stories)

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

诗 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

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

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

我也在 hugo 论坛上发布了这个,但无法完全回答我的问题。我在 hugo 论坛上浏览了很多关于“嵌套菜单”的主题,但仍然无法准确地弄清楚这一点。

谢谢

最佳答案

我在 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.

关于web - 在 Hugo 主题上创建嵌套菜单?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66324164/

29 4 0