Hugo で異なる Sectionの Pageの一覧を取得する

はじめに

Hugo で異なるSectionの Pageの一覧を取得してみます。
同一 Sectionの Pageの一覧を取得については以下のページにまとまっています。このサイト様は具体例も多く、本当に最高です。

maku77.github.io

例えば TOPページから別 Sectionのページの一覧に Front Matterの項目を添えて出したい時には少し異なった書き方になるようです。

Hugo Section

Section がなんたるかについては例のごとく以下のページにまとまっています。

maku77.github.io

想定する Hugo Section構成

さて、今回想定しているケースは以下のような構成で例えば ./themes/mytheme/layouts/index.html テンプレートから ./content/section1 セクションの Page一覧を取得したいケースとなります。

.
├── README.md
├── archetypes
├── config.toml
├── content
│   ├── section1
│   │   ├── _index.md
│   │   ├── section1-1.md
│   │   └── section1-2.md
├── data
├── layouts
├── resources
├── static
└── themes
    └── mytheme
        ├── LICENSE
        ├── archetypes
        ├── assets
        ├── layouts
        │   ├── 404.html
        │   ├── _default
        │   ├── index.html
        │   └── partials
        ├── static
        └── theme.toml

異なる Sectionの Pageの一覧を取得する

例えば以下のような Front Matterを利用していたとすると

---
title: セクション1 のタイトル
description: ここにはセクション1の説明文がレンダリングされます
weight: 20
---

テンプレートからは以下のようにして取得できます。
要は {{ range where .Site.Pages "Section" "section1" }} として全ページ .Site.Pagesから where で "Section" が "section1" であるものを表示しています。

{{ range where .Site.Pages "Section" "section1" }}
  <h1 class="title">{{ .Title }}</h1>
  <div class="content">
    <p>{{ .Params.description }}</p>
  </div>
{{ end }}

まとめ

Hugo で異なる Sectionの Pageの一覧を取得することができました。
Hugo でデモページを作ってます。ご参考までに。