章节
概述
一个 section(章节)是一个顶级内容目录,或者任何包含 _index.md
文件的内容目录。包含 _index.md
文件的内容目录也被称为 分支包 。章节模板接收一个或多个页面 集合 作为 上下文 。
一个典型的站点由一个或多个章节组成。例如:
content/
├── articles/ <-- 章节 (顶级目录)
│ ├── 2022/
│ │ ├── article-1/
│ │ │ ├── cover.jpg
│ │ │ └── index.md
│ │ └── article-2.md
│ └── 2023/
│ ├── article-3.md
│ └── article-4.md
├── products/ <-- 章节 (顶级目录)
│ ├── product-1/ <-- 章节 (包含 _index.md 文件)
│ │ ├── benefits/ <-- 章节 (包含 _index.md 文件)
│ │ │ ├── _index.md
│ │ │ ├── benefit-1.md
│ │ │ └── benefit-2.md
│ │ ├── features/ <-- 章节 (包含 _index.md 文件)
│ │ │ ├── _index.md
│ │ │ ├── feature-1.md
│ │ │ └── feature-2.md
│ │ └── _index.md
│ └── product-2/ <-- 章节 (包含 _index.md 文件)
│ ├── benefits/ <-- 章节 (包含 _index.md 文件)
│ │ ├── _index.md
│ │ ├── benefit-1.md
│ │ └── benefit-2.md
│ ├── features/ <-- 章节 (包含 _index.md 文件)
│ │ ├── _index.md
│ │ ├── feature-1.md
│ │ └── feature-2.md
│ └── _index.md
├── _index.md
└── about.md
上面的例子有两个顶级章节:articles 和 products。articles 下面的目录都不是章节,而 products 下面的所有目录都是章节。章节内的章节称为嵌套章节或子章节。
解释
章节和非章节的行为不同。
章节 | 非章节 | |
---|---|---|
目录名称成为 URL 段 | ✔️ | ✔️ |
具有逻辑祖先和后代 | ✔️ | ❌ |
具有列表页面 | ✔️ | ❌ |
使用 上面的例子 中的文件结构:
-
articles 章节的列表页面包含所有文章,无论目录结构如何;没有子目录是章节。
-
articles/2022 和 articles/2023 目录没有列表页面;它们不是章节。
-
products 章节的列表页面默认包含 product-1 和 product-2,但不包含它们的后代页面。要包含后代页面,请在列表模板中使用
RegularPagesRecursive
方法而不是Pages
方法。
- products 章节中的所有目录都有列表页面;每个目录都是一个章节。
模板选择
Hugo 有一个定义好的 查找顺序 来确定渲染页面时使用哪个模板。 查找规则 考虑顶级章节名称;在选择模板时不考虑子章节名称。
使用 上面的例子 中的文件结构:
内容目录 | 章节模板 |
---|---|
content/products | layouts/products/list.html |
content/products/product-1 | layouts/products/list.html |
content/products/product-1/benefits | layouts/products/list.html |
内容目录 | 单个模板 |
---|---|
content/products | layouts/products/single.html |
content/products/product-1 | layouts/products/single.html |
content/products/product-1/benefits | layouts/products/single.html |
如果您需要为子章节使用不同的模板,请在 front matter 中指定 type
和/或 layout
。
祖先和后代
一个章节有一个或多个祖先(包括主页),以及零个或多个后代。使用 上面的例子 中的文件结构:
content/products/product-1/benefits/benefit-1.md
内容文件 (benefit-1.md) 有四个祖先:benefits、product-1、products 和主页。这种逻辑关系允许我们使用 .Parent
和 .Ancestors
方法来遍历站点结构。
例如,使用 .Ancestors
方法来渲染面包屑导航。
<nav aria-label="breadcrumb" class="breadcrumb">
<ol>
{{ range .Ancestors.Reverse }}
<li>
<a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
</li>
{{ end }}
<li class="active">
<a aria-current="page" href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
</li>
</ol>
</nav>
使用此 CSS:
.breadcrumb ol {
padding-left: 0;
}
.breadcrumb li {
display: inline;
}
.breadcrumb li:not(:last-child)::after {
content: "»";
}
Hugo 渲染这个,其中每个面包屑都是指向相应页面的链接:
主页 » 产品 » 产品 1 » 优点 » 优点 1