HUGO公式にある目次のサンプルの落とし穴

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言語について更に理解を深めたい方はこちらの書籍がオススメです。


comments powered by Disqus