TL;DR

• このサイトで採用しているテーマ:gyorb/hugo-duskではToCを出せない
• 長い記事を書いたときに頭にToCがないと不便
• 次の記事を参考に実装した
  • Hugo の目次について考える · k-kaz
  • 各ページに目次を表示する (.TableOfContents) | まくまくHugo/Goノート

• 全てはこのdiffに書いてある Add ToC · fono09/hugo-dusk@d0c86c4

  テンプレートにToC用のpartialを追加する

テンプレート本体を肥大化させたくないためpartialに押し込む

--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -2,6 +2,7 @@
 
 <article class="post">
     <h1 class="title"> {{ .Title }} </h1>
+    {{ partial "toc.html" . }}
     <div class="content"> {{ .Content }} </div>
     {{ partial "postfooter.html" . }}
 </article>

partialでToCのテンプレートを書く

Hugo の目次について考える · k-kaz を参考にしつつ、details summary タグで折り畳めるHTMLを書く。

--- /dev/null
+++ b/layouts/partials/toc.html
@@ -0,0 +1,6 @@
+{{ if and (gt .WordCount 400) (ne .Params.toc false) }}
+<details>
+  <summary>目次</summary>
+  <div class="toc">{{ .TableOfContents }}</div>
+</details>
+{{ end }}

ToCに適用するCSSを追記する

各ページに目次を表示する (.TableOfContents) | まくまくHugo/Goノート を見ながら、リストスタイルをやめてインデントを加える部分だけ真似して終了。

--- a/static/css/layout.css
+++ b/static/css/layout.css
@@ -510,3 +510,20 @@ th, td {
   }
 }
 
+/* TableOfContents */
+#TableOfContents > ul {
+  font-size: smaller;
+}
+#TableOfContents ul {
+  list-style-type: none;
+       text-align: left;
+}
+#TableOfContents li {
+  padding-top: 0;
+}
+#TableOfContents li > ul {
+  padding-left: 1em;
+}
+#TableOfContents a {
+  font-weight: normal;
+}