Hugoで目次(TOC)を表示する

目次はHugo0.60.0から標準でサポートされています。（デフォルトMarkdownライブラリGoldmarkの機能）

config.tomlの設定

config.toml

[markup]
	[markup.tableOfContents]
	endLevel = 5       # どのレベルまで目次に表示するか (h5)
	startLevel = 2     # どのレベルから目次に表示する（h2)

テンプレートの修正

目次を表示したいテンプレートの任意の場所に以下を追加します。

layouts/_default/single.html

   {{ .TableOfContents }}

スタイルシートの設定

以下のようなHTMLが生成されるため適当なスタイルシートを設定します。

toc.html

<nav id="TableOfContents">
   <ul>
     <li><a href="#mermaid">Mermaid</a></li>
     <li><a href="#sample">sample)</a>
       <ul>
         <li><a href="#sample-1">sample-1</a></li>
         <li><a href="#sample-1">sample-2</a></li>
       </ul>
     </li>
   </ul>
</nav>