Hugo Sections

將內容組織成 sections。

概述

section（節）是頂級內容目錄或任何包�?_index.md 文件的內容目錄�

content/
├── articles/             <-- section（頂層目錄）
│   ├── 2022/
│   │   ├── article-1/
│   │   │   ├── cover.jpg
│   │   │   └── index.md
│   │   └── article-2.md
│   └── 2023/
│       ├── article-3.md
│       └── article-4.md
├── products/             <-- section（頂層目錄）
│   ├── product-1/        <-- section（有 _index.md 文件）
│   │   ├── benefits/     <-- section（有 _index.md 文件）
│   │   │   ├── _index.md
│   │   │   ├── benefit-1.md
│   │   │   └── benefit-2.md
│   │   ├── features/     <-- section（有 _index.md 文件）
│   │   │   ├── _index.md
│   │   │   ├── feature-1.md
│   │   │   └── feature-2.md
│   │   └── _index.md
│   └── product-2/        <-- section（有 _index.md 文件）
│       ├── benefits/     <-- section（有 _index.md 文件）
│       │   ├── _index.md
│       │   ├── benefit-1.md
│       │   └── benefit-2.md
│       ├── features/     <-- section（有 _index.md 文件）
│       │   ├── _index.md
│       │   ├── feature-1.md
│       │   └── feature-2.md
│       └── _index.md
├── _index.md
└── about.md

上面的示例有兩個頂層 sections：articles 和 products。articles 下的目錄都不是 sections，而 products 下的所有目錄都是 sections。section 內的 section 稱為嵌套 section 或子 section。

說明

sections 和非 sections 的行為不同。

	Sections	Non-sections
目錄名稱成為 URL 段	✔️	✔️
有邏輯上的祖先和後代	✔️	❌
有列表頁面	✔️	❌

使用上面示例中的文件結構：

articles section 的列表頁面包括所有文章，無論目錄結構如何；子目錄都不是 sections。
articles/2022 和 articles/2023 目錄沒有列表頁面；它們不是 sections。
products section 的列表頁面默認包括 product-1 和 product-2，但不包括它們的後代頁面。要包括後代頁面，在 section 模板中使用 RegularPagesRecursive 方法而不是 Pages 方法。
products section 中的所有目錄都有列表頁面；每個目錄都是 section。

模板選擇

Hugo 有定義的 lookup order 來確定渲染頁面時使用哪個模板。lookup rules 考慮頂層 section 名稱；選擇模板時不考慮子 section 名稱。

使用上面示例中的文件結構：

Content directory	Section template
`content/products`	`layouts/products/section.html`
`content/products/product-1`	`layouts/products/section.html`
`content/products/product-1/benefits`	`layouts/products/section.html`

Content directory	Page template
`content/products`	`layouts/products/page.html`
`content/products/product-1`	`layouts/products/page.html`
`content/products/product-1/benefits`	`layouts/products/page.html`

如果你需要為子 section 使用不同的模板，在 front matter 中指定 type 和/或 layout。

祖先和後代

section 有一個或多個祖先（包括首頁），以及零個或多個後代。使用上面示例中的文件結構：

content/products/product-1/benefits/benefit-1.md

內容文件（benefit-1.md）有四個祖先：benefits、product-1、products 和首頁。這種邏輯關系允許我們使用 .Parent 和 .Ancestors 方法遍歷站點結構。

例如，使用 .Ancestors 方法渲染面包屑導航。

layouts/_partials/breadcrumb.html

<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 渲染這個，每個面包屑都是相應頁面的鏈接：

Home » Products » Product 1 » Benefits » Benefit 1

Last updated: January 1, 0001

Improve this page