祖先
Syntax
PAGE.Ancestors
Returns
page.Pages
一个 section 是最高级别的内容目录,或者是带有索引文件 index.md 的任意内容目录。
使用如下的内容结构:
content/
├── auctions/
│ ├── 2023-11/ <-- front matter: weight = 202311
│ │ ├── _index.md
│ │ ├── auction-1.md
│ │ └── auction-2.md
│ ├── 2023-12/
│ │ ├── _index.md <-- front matter: weight = 202312
│ │ ├── auction-3.md
│ │ └── auction-4.md
│ ├── _index.md <-- front matter: weight = 30
│ ├── bidding.md
│ └── payment.md
├── books/
│ ├── _index.md <-- front matter: weight = 10
│ ├── book-1.md
│ └── book-2.md
├── films/
│ ├── _index.md <-- front matter: 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="{{ .Permalink }}">{{ .LinkTitle }}</a>
</li>
{{ end }}
<li class="active">
<a aria-current="page" href="{{ .Permalink }}">{{ .LinkTitle }}</a>
</li>
</ol>
</nav>
通过一些CSS,上面的代码渲染出类似于以下的内容,其中每个面包屑都链接到其页面:
首页 > 拍卖 > 2023年11月的拍卖 > 拍卖1