Hugoで運用するブログに目次を付けてみました。
もともとHugoのframework内に.TableOfContents
という変数が用意されているので
テンプレートの実装側で必要に応じてこの変数を呼び出すことで簡単に目次を表示させることができます。
この.TableOfContents
は何をしているかというと、記事内のHタグを解析して1から順番にネストされた
リンク付きのリストを作ってくれます。
公式サイトには以下のようなサンプルが掲載されているのでこちらを参考にしました。
{{ if and (gt .WordCount 400 ) (ne .Params.toc "false") }}
<aside>
<header>
<h2>{{.Title}}</h2>
</header>
{{.TableOfContents}}
</aside>
{{ end }}
このサンプルは何をするかというと、本文が400文字以上かつ、ページパラメータとしてtocが無効にされていなかったら 記事タイトルと目次を表示させるものです。
ここでne .Params.toc "false"
のところに落とし穴があります。
記事のfront matterにはtoc: false
と書きたくなるところですがこう書いてしまうと一切判定文が動きません。
サンプルではfalseが文字列として動いているようなのでfront matter側も文字列で記述する必要があるのではないかと推測します。
わたしはfront matterにはtoc: false
のようにboolean型で宣言したかったので判定側を修正しました。
最終的に以下のようになりました。
{{ if and (isset .Params "toc" ) (eq .Params.toc true) }}
<div class="toc">
<aside>
<p>Table of Contents</p>
{{.TableOfContents}}
</aside>
</div>
{{ end }}
tocの変数が定義されており、かつtrueだった場合に目次が表示されるようになっています。
関連書籍のご案内
HUGOはGo言語で実装された静的サイトジェネレータです。Go言語について更に理解を深めたい方はこちらの書籍がオススメです。