Ancestors

section 是指頂層內容目錄,或是任何包含 _index.md 檔案的內容目錄。

以下是內容結構範例:

content/
├── auctions/
│   ├── 2023-11/
│   │   ├── _index.md     <-- 前置內容: weight = 202311
│   │   ├── auction-1.md
│   │   └── auction-2.md
│   ├── 2023-12/
│   │   ├── _index.md     <-- 前置內容: weight = 202312
│   │   ├── auction-3.md
│   │   └── auction-4.md
│   ├── _index.md         <-- 前置內容: weight = 30
│   ├── bidding.md
│   └── payment.md
├── books/
│   ├── _index.md         <-- 前置內容: weight = 10
│   ├── book-1.md
│   └── book-2.md
├── films/
│   ├── _index.md         <-- 前置內容: weight = 20
│   ├── film-1.md
│   └── film-2.md
└── _index.md

以及這段範本:

{{ range .Ancestors }}
  <a href="{{ .RelPermalink }}">{{ .LinkTitle }}</a>
{{ end }}

在 2023 年 11 月的拍賣頁面上,Hugo 會呈現:

<a href="/auctions/2023-11/">2023 年 11 月的拍賣</a>
<a href="/auctions/">拍賣</a>
<a href="/">首頁</a>

在上述範例中,可以注意到 Hugo 按照從最近到最遠的順序排列祖先,這使得麵包屑導航變得簡單:

<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,上述代碼會呈現如下,並且每個麵包屑都會連結到它的頁面:

首頁 > 拍賣 > 2023 年 11 月的拍賣 > 拍賣 1