ページに目次(TOC)をつける

Hugoではコンテンツ内の見出し(Table of Contents)を.TableOfContentsで参照できる。 記事内のHタグを自動的に抽出して作成しているようだ。

https://gohugo.io/content-management/toc/ - Table of Contents

そのため、single.html 内で

single.html

{{ .TableOfContents }}

とすれば目次が作られる。ただし、Hugoの公式解説にあるように、

It assumes you are using a toc field in your content’s front matter that, unless specifically set to false, will add a TOC to any page with a .WordCount (see Page Variables) greater than 400.

400文字未満の場合は、TOCが作られないので注意が必要である。まあ、文字数少ないページなら、そもそも目次が必要ないのだろう。

ページに目次(TOC)をつけた例

実際にTOCを使う場合は、Hugoの公式サイトの例にあるような感じで、single.html に直接書くより、 layouts/partials/toc.html というファイルを作り、

layouts/partials/toc.html

{{ if and (gt .WordCount 400 ) (.Params.toc) }}
目次
<br>
<div class = "toc">
    {{.TableOfContents}}
</div>
{{ end }}

こんな感じにした方が良さそう。

WordCountが400未満かどうか？TOCが有効かどうかを判別して目次(TOC)を出すかどうかを決定する。 目次(TOC)を作りたくないページでは、マークダウンのページ作成時にtoc: false とすれば表示させないように制御することが可能である。

結果、こんな感じの目次が作られる。

以上がHugoでのコンテンツ内の見出し(TOC)の表示の仕方であるが、やり方さえわかれば、それほど難しくはないだろう。