Hugo 如何按内容目录层级生成嵌套页面菜单列表

你当前的代码无法生成嵌套结构，核心原因是遍历的对象选错了：

• .Site.RegularPages是Hugo提供的全站普通页面扁平集合，会自动过滤所有目录对应的Section节点，也不会保留页面间的父子目录层级，最终只会把所有md文件拉成一个平铺列表，完全丢失嵌套关系。

要实现按content目录结构生成嵌套菜单，只需要两个改动：

1. 不再使用全局扁平的页面集合，改成从站点根目录开始逐层遍历，保留页面/目录的父子关联
2. 借助Hugo的partial模板递归能力，逐层级渲染嵌套的ul/li结构

具体修改步骤 #

1. 新建递归渲染模板 #

在layouts/partials/目录下新建render-menu.html，作为通用的递归渲染组件，内容为：

{{ $pageSet := . }}
{{/* 只有当存在有效页面集合时才输出ul，避免生成空白嵌套标签 */}}
{{ with $pageSet }}
<ul>
    {{ range $pageSet }}
    <li>
        <a href="{{ .Permalink }}">{{ .Name }}</a>
        {{/* 递归调用自身，渲染当前节点下的所有子层级 */}}
        {{ partial "render-menu.html" .Pages }}
    </li>
    {{ end }}
</ul>
{{ end }}

2. 替换原有的菜单渲染代码 #

把之前写的平铺遍历逻辑，替换成从根目录触发递归渲染的调用：

{{/* 传入根目录下的第一级所有节点，启动递归渲染 */}}
{{ partial "render-menu.html" .Site.Home.Pages }}

渲染效果说明 #

最终输出的结构会完全匹配你的预期：

• 第一级遍历拿到的节点包括：1.md、a目录对应的Section节点、b目录对应的Section节点
• 1.md作为普通文件没有子页面，递归时传入的页面集合为空，不会生成多余的嵌套标签，最终输出独立的<li>1</li>
• 遍历到a节点时，先输出节点本身的链接项，再递归把a目录下的2.md、3.md传入组件，生成对应的内层嵌套ul
• 遍历到b节点时同理，递归渲染出下层的4.md，形成符合要求的嵌套层级。

内容的提问来源于stack exchange，提问作者kernelc