プログラマーのメモ書き

伊勢在住のプログラマーが気になることを気ままにメモったブログです

Hugo で一覧ページを表示しない方法

Google Play で公開している避難所検索@伊勢ですが、ほそぼそとメンテナンスしています。

先日、Play Console を見ていたら、まだプライバシーポリシーを追加していなかったことに気づいたので、仕事が一段落したタイミングでプライバシーポリシーを追加しました。インターネット上にプライバシーポリシーのページを作って、そのURLを Play Console で指定するだけなのでそんなにややこしい話でもないはずです。

ということで、避難所検索@伊勢のサポートページに、サクッと追加しようと思いきや、意外と手間取ってしまいました。なので、その顛末をメモにしておきます。

避難所検索@伊勢のサポートページについて

森ソフトのWebサイトは Hugo で運用しており、その中の一つとして、避難所検索@伊勢のサポートページがあります。このページは、

サーバー名/escape/

で公開しており、 Hugo のディレクトリ構成は下記のようになっています。

content
├── about.md
├── contact.md
├── escape
│   ├── images
│   │   └── google-play-badge.png
│   └── index.md
├── maptile.md
└── news
    ├── 20180122.md

escape フォルダが、こちらの記事で少し触れた Leaf Bundle になっている形です(index.md ファイルとともに、画像ファイルを置いています)。

これに対して、プライバシーポリシーのページを

サーバー名/escape/privacypolicy/

のような形で追加したいと考えました。

問題

ところが、 content/escape のフォルダは Leaf Bundle のため、単純に別記事の .md ファイルを追加しても、記事として公開されません。 また、もし、 content/escape のフォルダを Branch Bundle に変更すると、複数記事を持つことができるのですが、記事一覧のリストページが生成されてしまいます (url も『 BrachBundle のフォルダ名/記事のファイル名』の形式になってしまいちょっと冗長です)。

なので、どう対応すればよいのか?ということで悩んでしまいました。

解決策

いろいろと試したところ、今回の結論としては、 Branch Bundle に変更して、リストページを自動的に生成させないようにすることで、対応しました(もっといい解決方法があるかもしれませんが、その辺は Hugo に詳しい方にお願いしたいと思います)。

以下で、実際に設定した内容について示したいと思います。

headless 設定について

Leaf Bundle だと、 Front matter に

headless: true

を追加すると、その Leaf Bundle を生成しないようにできるようです(これを Headless Bundle と呼ぶようです)。

実際、適当な Leaf Bundle を作って試してみると、 Leaf Bundle は headless になって、その URL でなにも表示されなくなります。

これと同じことが、 Branch Bundle でできれば、リストページが作成されなくなると思ったのですが、残念ながら Branch Bundle の場合は Front Matter に headless を追加しても普通にリストページが表示されました( headless は Leaf Bundle でのみ有効なようです)。

これだと困るので調べていくと、 Branch Bundle でリストページを生成しない方法がありました。

_build オプション

こちらの記事

How to disable list page only? - support - HUGO

に紹介されているように、Front Matter に _build オプションを追加すると、指定したページを生成しなくなるそうです。

ということで、 escape フォルダにある index.md を _index.md に変更し( Branch Bundle に変更し)、このファイルの Front Matter を下記のようにすると

---
title: "escape branch bundle"
date: 2021-05-31T22:40:00+09:00
_build:
  list: never
  render: never
  publishResources : false
---

このURL(サーバー名/escape/)でアクセスしても何も表示されません(404とかが返るのではなく、空白のページになります)。

できましたね。ということで、これでリストページを抑制することができれば、なんとかなりそうです。

URL を割り振りなおし

Hugo の各記事は Front matter の指定がなければディレクトリ構成から URL が決まります。一方、 Front Matter に url 変数を指定することでその指定した URL で記事を表示させることができます。

ということで、いままでの避難所検索@伊勢の説明ページを改めて、 content/escape/escape.md として保存し、

サーバー名/escape/

でアクセスできるように url 変数を設定します。

---
title: "避難所検索@伊勢 サポートページ"
date: 2021-05-24T10:35:00+09:00
url: "/escape/"
---

さきほどの _build オプションでリストページの生成を抑制していますが、抑制したものと同じ URL を指定しても問題なく表示されました。

レイアウトファイルを切り替え

さて、これで問題ないかと思ったのですが、現在のテーマの場合、リストページ以下の記事の表示と通常の記事では若干レイアウトが異なっています。

リストページ以下の記事の場合

通常の記事の場合

記事の右上に、日付があったり、記事の右側に検索窓があったりと微妙に異なっています。

上記で作成したプライバシーポリシーのページも、 Branch Bundle 以下にあるため、前者のレイアウトになっています。

このままでもいいんですが、やっぱり他とデザイン的に合わせたいので、これを通常の記事用のレイアウトを使うように変更しておきます。

Front Matter に layout 変数を指定するとレイアウトファイルを指定できるそうです。別の方法として、表示対象ページの Content Type を指定することで、結果的に適用するレイアウトファイルを切り替えることもできるようです。

今回は、一部変更した特別なレイアウトファイルを指定するのではなく、通常の記事のレイアウトを適用したいだけなので、後者の方法を採用しました。

具体的な設定方法

いま使っているテーマ(universal)を見ると layouts フォルダ以下に page というがあり、そちらに single.html というファイルがあります。

─ layouts
  ├── 404.html
  ├── _default
  │   ├── list.html
  │   └── single.html
  ├── archetypes
  │   └── default.md
  ├── index.html
  ├── page
  │   └── single.html
  └── partials
      ├── breadcrumbs.html

このファイルは、レイアウトファイルの探索順の type の説明

Type

Is value of type if set in front matter, else it is the name of the root section (e.g. “blog”). It will always have a value, so if not set, the value is “page”.

と書かれている場合の "page" に対応していると思われます(とはいえ、 layouts フォルダ以下のフォルダ名に関するドキュメントを見つけられなかったので、あくまでも推測です)。つまり、type指定がなく、かつセクション以下にない、通常の記事に対応したレイアウトファイルになります。

一方、 Branch Bundle 以下の記事など、セクション内の記事は上記の説明より type がセクション名になるので、こちらではなく _default/single.html を使うと思われます。

ということで、現状のままだと、この escape Branch Bundle は escape セクションとして扱われるので、 type の値もセクション名( escape )になり、検索窓付のレイアウトファイルが適用されることになっていそうです。

なので、Front Matter で type を page にすることで、通常の記事のレイアウトファイルを適用することができそうです。

実際に Front Matter に設定して試してみると、うまくいきました。

---
title: "避難所検索@伊勢 サポートページ"
date: 2021-05-24T10:35:00+09:00
url: "/escape/"
type: "page"
---

同様に、プライバシーポリシーの記事の Front Matter にも type を設定して、想定のように表示されるようにします。

---
title: "避難所検索@伊勢 プライバシーポリシー"
date: 2021-05-31T16:20:00+09:00
type: "page"
---

(こちらは url はデフォルトの値でよいので指定していません)

まとめ

一応、上記の設定でうまく表示することができました。使い始めは簡単なのですが、ちょっと手を加えようとすると英文の記事をあれこれ調べないといけないのがちょっと面倒ですね。もっと、日本語ドキュメントが増えてほしいなー。