Hugo嵌套食谱章节结构下list.html模板编写及复用问题咨询

一、所需的list.html模板内容 #

你需要在layouts/recipes/list.html（对应content/recipes/_index.md的专属模板）中编写以下代码，它会自动遍历所有子章节和下属食谱，生成符合目录结构的嵌套列表：

{{ define "main" }}
  <h1>{{ .Title }}</h1>
  {{ .Content }} <!-- 展示recipes/_index.md里的正文内容 -->

  <ul>
    {{ range .Sections }}
      <li>
        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        {{ with .Pages }}
          <ul>
            {{ range . }}
              <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
            {{ end }}
          </ul>
        {{ end }}
      </li>
    {{ end }}
  </ul>
{{ end }}

代码细节说明： #

• {{ define "main" }}：如果你的主题使用了baseof.html基础模板，这段代码会替换模板中的main区块，保证页面样式和主题统一。
• .Sections：专门遍历当前recipes章节下的所有子章节（也就是bread、dessert、mains）。
• .RelPermalink：生成适配你站点URL结构的相对链接，避免硬编码路径。
• {{ with .Pages }}：只有当子章节下存在具体食谱页面时，才生成二级列表，避免出现空列表的尴尬情况。
• .Title：调用每个章节/页面_index.md或食谱文件front matter中设置的title字段，记得给每个文件都配置好标题哦！

二、是否需要为每个子章节创建独立的list.html？ #

完全不需要！上面的模板已经能在recipes主页面完整展示所有嵌套结构。如果用户点击某个子章节（比如bread）的链接进入其专属列表页，Hugo会自动使用主题默认的_default/list.html模板渲染；如果想让所有子章节的列表样式和主页面保持一致，也可以把上面的逻辑改成通用模板放在layouts/_default/list.html中，无需单独为每个子章节编写模板。

额外小提示： #

• 记得给每个子章节的_index.md配置title字段（比如bread/_index.md里写title: "面包食谱"），不然模板会显示文件名或系统默认值。
• 如果想让食谱按特定顺序排列，可以在front matter中添加weight字段（比如weight: 1），Hugo会按权重从小到大自动排序。

内容的提问来源于stack exchange，提问作者John L. Godlee