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

記事内に商品プロモーションを含む場合があります。
最終更新日:2020年1月10日

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

config.toml の設定

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

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

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

startLevel = 2endLevel = 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 文字より少ないときは生成しないようにしています。

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

https://gohugo.io/content-management/toc

https://gohugo.io/getting-started/configuration-markup#table-of-contents

hugoのコードブロックをハイライトする方法

hugoのコードブロックをハイライトする方法

hugoのsummaryで出力される文字数を指定した値にする方法

hugoのsummaryで出力される文字数を指定した値にする方法

HUGOで必要最低限なサイトマップを作る

HUGOで必要最低限なサイトマップを作る

hugoで生成した静的ページをCircleCIでさくらのレンタルサーバへ自動アップ

hugoで生成した静的ページをCircleCIでさくらのレンタルサーバへ自動アップ

hugoのshuffleを使って記事の並び順をランダムにする方法

hugoのshuffleを使って記事の並び順をランダムにする方法

hugoのserverコマンドで使えるオプションをまとめた

hugoのserverコマンドで使えるオプションをまとめた

hugoのarchetypeを使って記事のテンプレート

hugoのarchetypeを使って記事のテンプレート

hugoのショートコードを使ってコードの掲載を効率化

hugoのショートコードを使ってコードの掲載を効率化

ubuntu 16.04 LTSに最新のhugoをインストールする方法

ubuntu 16.04 LTSに最新のhugoをインストールする方法