You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在Hugo中基于list.html实现章节子文件夹的HTML页面列表

在Hugo的list.html中列出章节子文件夹的方法

要在当前章节的list.html里展示下属子文件夹(对应Hugo的子章节),直接利用Hugo内置的页面变量即可,步骤如下:

  1. 确认子文件夹的章节属性
    Hugo只把包含_index.md文件的文件夹识别为「章节(Section)」,所以如果你想展示某个子文件夹,先确保该文件夹内存在_index.md(可以是空内容,仅需保留文件结构)。

  2. 在list.html中循环渲染子章节
    在当前章节的list.html模板里,使用.Sections变量获取所有直接子章节,然后循环输出:

    <div class="sub-sections">
      <h3>子文件夹列表</h3>
      <ul>
        {{ range .Sections }}
          <li>
            <a href="{{ .Permalink }}">{{ .Title }}</a>
            {{ with .Description }}
              <p>{{ . }}</p>
            {{ end }}
          </li>
        {{ end }}
      </ul>
    </div>
    
    • .Sections:返回当前章节下的所有直接子章节(仅一级子文件夹)
    • 如果需要展示所有层级的嵌套子章节,改用.Sections.Recursive即可
  3. 可选:筛选特定子文件夹
    要是只想展示部分子章节,可以通过Front Matter的自定义参数筛选,比如先在子章节的_index.md里加:

    ---
    title: "我的子文件夹"
    show_in_parent_list: true
    ---
    

    然后在list.html里修改循环逻辑:

    {{ range where .Sections "Params.show_in_parent_list" true }}
      <li><a href="{{ .Permalink }}">{{ .Title }}</a></li>
    {{ end }}
    

内容的提问来源于stack exchange,提问作者Nedjma Média

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.28 23:40:12