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関連記事










これからブログなどのサイトを作りたいと思っている人は、お名前.comでのドメイン取得がオススメです。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■
     ■お名前.com

アマゾンの2019年本屋大賞一覧

そして、バトンは渡された
ひと
ベルリンは晴れているか
熱帯
ある男

楽天市場のおすすめ商品一覧

お金2.0 新しい経済のルールと生き方 [ 佐藤航陽 ]
全部レンチン!やせるおかず 作りおき 時短、手間なし、失敗なし
「読む力」と「地頭力」がいっきに身につく 東大読書 [ 西岡 壱誠 ]