
本文详解如何在 Hugo 静态站点中,针对不同 URL 路径(如 /blog-folder-1/ 与 /blog-folder-2/)差异化渲染列表页,避免默认 list.html 混淆内容;核心方法包括按 Section 定制模板、利用 .Section 变量动态过滤,以及正确使用 where 和 .Data.Pages。
本文详解如何在 hugo 静态站点中,针对不同 url 路径(如 `/blog-folder-1/` 与 `/blog-folder-2/`)差异化渲染列表页,避免默认 `list.html` 混淆内容;核心方法包括按 section 定制模板、利用 `.section` 变量动态过滤,以及正确使用 `where` 和 `.data.pages`。
在 Hugo 中,目录结构(如 content/blog-folder-1/)会自动映射为 Section(节),其名称即为文件夹名(blog-folder-1)。当访问 example.com/blog-folder-1/ 时,Hugo 会优先查找 layouts/blog-folder-1/list.html;若不存在,则回退至 layouts/_default/list.html。因此,最清晰、最可维护的解决方案是为每个 Section 单独定义模板。
✅ 推荐做法:为每个博客文件夹创建专属列表模板
在主题的 layouts/ 目录下建立对应文件夹结构:
layouts/
├── _default/
│ └── list.html # 通用兜底模板(如首页)
├── blog-folder-1/
│ └── list.html # 仅用于 /blog-folder-1/ 路径
└── blog-folder-2/
└── list.html # 仅用于 /blog-folder-2/ 路径
每个 Section 模板内可精准控制其内容范围。例如 layouts/blog-folder-1/list.html 中只需列出本 Section 的文章:
{{ define "main" }}
<h1>{{ .Title }}</h1>
-
{{ range .Pages }}
- {{ .Title }} {{ end }}
⚠️ 注意:.Pages 在 Section 列表页中默认仅包含当前 Section 下的页面(即 blog-folder-1/ 下的 .md 文件),无需额外过滤 —— 这正是 Hugo 的设计优势。
❌ 若你仍需在 _default/list.html 中实现路径感知过滤(例如首页需排除某 Section),则必须显式使用 .Data.Pages 并结合 .Section 字段筛选:
{{ $pages := where .Data.Pages "Section" "==" "blog-folder-1" }}
{{ range $pages }}
<article><h2><a href="%7B%7B%20.Permalink%20%7D%7D">{{ .Title }}</a></h2>
<p>{{ .Summary }}</p>
</article>
{{ end }}
或更常见地,在分页场景中排除特定 Section:
{{ $filtered := where .Data.Pages "Section" "!=" "blog-folder-2" }}
{{ $paginated := .Paginate $filtered }}
{{ range $paginated.Pages }}
<!-- 渲染 -->
{{ end }}
? 关键要点总结:
- ✅ 优先使用 Section 模板(
layouts/{section}/list.html)——语义明确、零配置、无歧义; - ✅
.Pages在 Section 上下文中自动作用域隔离,无需手动过滤; - ✅
.Data.Pages是全站所有页面集合(含草稿、未发布页),仅在需要跨 Section 筛选时使用; - ❌ 避免在
_default/list.html中硬编码路径逻辑,易出错且难维护; - ? 所有 Page 对象均提供
.Section字段(字符串),可用于where条件判断,支持==,!=,in等操作符。
通过合理组织模板层级与善用 Hugo 内置变量,即可优雅实现“一路径一视图”,让内容结构与呈现逻辑完全对齐。










