このブログで使っているHugo (hugo-coder) に目次(ToC)を追加しました。
その時の作業手順を記載します。(10分程度で実現できます。)

今回主に参考にしたのは以下のサイトです。

• hugoで目次(tableOfContents)を表示する方法
• Hugo の目次について考える · k-kaz
• 各ページに目次を表示する (.TableOfContents) | まくまくHugo/Goノート

公式ドキュメントも参考にしました。

• Table of Contents | Hugo

Hugo Coder(テーマ)に目次表示機能を追加

Hugo Coderに目次表示機能を追加します。
機能自体はHugo側で用意されているので、HTMLテンプレートを作るだけで済みます。

hugo-coder(テーマ)配下に移動します。
layouts/partial/toc.html というファイルを新規作成し、以下のコードを記載します。

1
2
3
4
5
6

<div class="page-toc">
  <details>
    <summary>目次</summary>
    {{ .TableOfContents }}
  </details>
</div>  

次にブログ記事に目次を表示するよう layouts/posts/single.html に以下を追記します。
私は {{ .Content }} の手前に記載しました。

1
2

    {{ partial "toc.html" . }}
    {{ .Content }}

CSSで見た目を調整

hugoで目次(tableOfContents)を表示する方法 を参考に、目次の見た目をCSSファイルで調整します。

CSSファイルはテーマではなくブログ側の static/css/custom.css に以下を追記します。

1
2
3
4
5
6

.page-toc {
    margin: 1em;
    padding: 1em;
    width: auto;
    border: 1px solid #ddd;
}

これで完成です。

あとがき

目次の表示はテーマの改造が必要と知って面倒くさがっていたのですが、 思ったより簡単に実現できました。(もっと早くにやっていればよかったです。)

Hugoも最近は日本語の情報が増えてだいぶ楽になったなと感じました。
情報を残してくださった先人の方々ありがとうございます。