Hugo の固定ページでサブページを作る

2023-12-31 備忘録

Hugo で作成した固定ページでサブページを作成する方法が分からなかったのでメモしました。

困ったこと

Hugo のウェブサイトで以下の構成でページを作ると test.md が無視されます（インデックスページで上書きされる？）。https://example.com/test/ で test.md が表示されて https://example.com/test/sub/ で sub.md が表示されることが期待されますが、実際には https://example.com/test/ で test/ 内の記事一覧が表示されます。

content/
- test/
  - image.png
  - icon.jpg
  - sub.md
- test.md

次に test.md を index.md に改名して test/ 内に移動すると sub.md が表示できなくなり、_index.md に改名すると sub.md のみの一覧が生成されました。

この記事では最終的に https://example.com/test/ で test.md が表示されるようにします。ちなみに content/ 直下に test.md が必要な理由は、テーマが自動生成するメニューに項目を表示するのに必要だからです。

解決方法

まず content/test/ に以下の内容で _index.md を作成しました。

---
title: "index"
showDate: false
_build:
  list: never
  render: never
  publishResources : false
---

これで content/test/ の記事一覧が表示されなくなったので、次に test.md のフロントマターで url: "/test/" を指定して解決しました。

もっと詳しく

Page bundles について

sub.md が表示できなくなったり表示できなくなったりした理由ですが、Hugo には Branch Bundle と Leaf Bundle という仕組みが存在するのが理由です。まだ詳しく理解していないので雑に説明しますが、Branch Bundle は複数ページを収めるための仕組みで Leaf Bundle は単一ページを収めるための仕組みです。

最初、content/test/ 内に sub.md 以外の Markdown ファイルが存在しなかったため、Hugo によって Branch Bundle として扱われます。この場合、複数の Markdown ファイルが扱われる前提だったので一覧が自動で生成されました。次に test.md を index.md に改名して content/test/ 内に移動しました。index.md が存在するディレクトリは自動で Leaf Bundle として扱われ、それ以外の Markdown ファイルは存在しないものとして扱われます。

結果、test.md と sub.md を元の構成に戻すことで Branch Bundle に戻すことで sub.md は表示できるようになりました（test.md と sub.md は同じディレクトリに置くこともできますが、前述した理由のために別のディレクトリに置きました）。なお、_index.md は Branch Bundle でも特別なファイルとして扱われるので、後述するビルドオプションの設定に使うことができます。

フロントマターのオプション

Hugo ではフロントマターの _build でビルドオプションを指定することができます。そのオプションで一覧を表示しないことにしました。その場所が空き地になり何も表示されなくなるので、test.md のフロントマターで url: "/test/" を指定することで意図した動作をするようになりました。

まとめ

WordPress は難しいけど Hugo も意外と難しいかもしれん…。

なーのブログ