hugoで目次(tableOfContents)を表示する方法

記事内に商品プロモーションを含む場合があります。

最終更新日：2020年1月10日

hugo のページにも目次を表示したい人向けに書いています。

config.toml の設定

まずは、config.tomlを開き次のような設定を追加します。

[markup]
    [markup.tableOfContents]
        endLevel = 2
        ordered = true
        startLevel = 2

それぞれの設定について説明します。

startLevel = 2 と endLevel = 2は目次を生成するレベルを指定しています。

この設定は##でマークアップしたh2レベルの項目だけ目次が生成されることになります。

endLevel = 3 とすれば、##と###の項目が目次生成されます。

ordered = trueは<ol>タグで生成するか<ul>タグで生成するかを指定できます。
trueの場合は<ol>でタグが生成されます。

設定が完了したら、テーマファイルへ{{ .TableOfContents }}を追加します。

layouts\_default\single.htmlを開き、次のようなコードを追加すれば目次が表示されるようになります。

<h2>目次</h2>
{{ .TableOfContents }}

私の場合は、項目を作らないページの場合はタグを生成したくないのでこのようにしています。

{{ if gt (len .TableOfContents) 33 }}
<h2>目次</h2>
{{ .TableOfContents }}
{{ end }}

項目が一切無い場合でも、<nav id="TableOfContents"></nav>が生成されますので、.TableOfContentsが 33 文字より少ないときは生成しないようにしています。

公式サイトにも設定方法が書かれていますので、参考にしてください。