HUGOで固定ページを作成する

ロクにドキュメントを読んでいなかったので、このサイトでは今まで意味不明な方法で固定ページを作成していましたが、 今回セクションごとのパラメータをつける方法を調べた副産物で正しい方法(?)が分かったのでメモします。

hugoではsingleとlistの二種類のテンプレートを持つことで、「記事の一覧」と「記事単体」のページを簡単に生成することができますが、 その例外となるようなページを作る方法で悩んでいました。

このサイトだとAboutとか、Contactとか、Linkとかのページです。

今までは、例えばAboutであれば、セクションとして生かすために/content/about/about.mdにファイルを作成し、 テーマフォルダのセクションテンプレートに本文を書くというひどいことをしていました。

が、今回正しいっぽい手法を調べたのでここにメモします。

_index.md

hugoではセクション内の_index.mdというファイル名は予約されていて、セクションページを作成する際のパラメータを記述することができるようです。

例えば、このサイトのAboutページを作成する際には、/content/about/_index.mdに次のように記述します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

---
title: "ABOUT"
description: "このサイトについて"
draft: false
fixed: true
subtitle: ""
---

GAMMALAB(ガンマケンキュウジョ)は@totegammaが自称する架空の研究所の名前です。要するに、個人サークル名です。

このサイトは2013年くらいに誕生してから、たぶん4回くらい〜(省略)

テンプレート側の工夫

一瞬勘違いしそうな点は、たとえ_index.mdをセクション内に作成しても、そのページはlistテンプレートを用いて生成されるという点です。 僕は、ファイル内に本文を書けてしまうので、てっきり代わりにsingle.htmlが使われるようになるものと思っていました。

このままでは空のリストを表示するだけになってしまうので、index.mdに記載する追加パラメータによって表示内容が変わるようにlistテンプレートを書き換えます。

名前は何でもいいのですが、僕はfixedというパラメータを追加しました。前章で例に上げたファイルの先頭にも記載されていますね。

僕はlist.htmlの一部を次のように編集しました。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

{{ if .Params.fixed }}
<div class=contentbody>
	{{ /* 固定ページ */ }}
	{{ .Content }}
</div>
{{ else }}
<div id=listwrap>
	{{ /* リスト要素 */ }}
	{{ /* 省略 */ }}
{{ end }}

これで、_index.mdにfixed: trueが記述されている場合は、固定ページが表示されるようになるはずです。

冒頭で述べたとおり、このサイトは最初調べるのがめんどくさくて気持ち悪い方法で実装していたので、やっとスッキリしました。