feat: implement toc (#14)

3 files changed, 38 insertions, 5 deletions

diff --git a/config.toml b/config.toml
index 74684e9..8855498 100644
--- a/config.toml
+++ b/config.toml
@@ -68,6 +68,7 @@ customJS = []             # path to custom js files, relative to './static/js/'
 dateFormat = "2006-01-02" # date format, see https://gohugo.io/functions/format/
 enableFullRSS = true      # rss full-text output
 enableHanEmph = true      # use dots to emphasize chinese texts, see https://zh.wikipedia.org/wiki/%E7%9D%80%E9%87%8D%E5%8F%B7
+toc = false               # whether to enable table of contents in posts
 
 [params.math]
 enable = true # whether to enable math typesetting
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index d197b4c..eb37df4 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -5,9 +5,9 @@
 {{ define "main" }}
 <main id="main" class="post">
   {{ if ne .Section "post"}}
-  <div class="content">
+  <article class="content">
     {{ .Content }}
-  </div>
+  </article>
   {{ else }}
   <h1>{{ .Title }}</h1>
   {{ if ne .Params.tags nil }}
@@ -18,13 +18,21 @@
     {{ end }}
   </div>
   {{ end }}
-  <div class="content">
+  {{ if or .Site.Params.toc .Params.toc }}
+  <details>
+    <summary>
+      <b>Table of Contents</b>
+    </summary>
+    <div class="toc">{{ .TableOfContents }}</div>
+  </details>
+  {{ end }}
+  <article class="content">
     {{ if .Site.Params.enableHanEmph }}
     {{ .Content | replaceRE "<strong>(\\p{Han}+?)</strong>" "<strong class=chinese>$1</strong>" | safeHTML }}
     {{ else }}
     {{ .Content }}
     {{ end }}
-  </div>
+  </article>
   <div class="paginator">
     {{ if .PrevInSection }}
     <a class="link" href="{{ .PrevInSection.Permalink }}">← prev</a>
diff --git a/static/css/single.css b/static/css/single.css
index 5a27aa4..f2a90a3 100644
--- a/static/css/single.css
+++ b/static/css/single.css
@@ -2,6 +2,30 @@
     text-align: center;
 }
 
-#main > div + .content {
+#main > .content {
     padding-top: 1rem;
 }
+
+#main .toc {
+    background-color: #EEEEEE;
+    border: black 1px dashed;
+    display: inline-block;
+    margin: 1rem;
+    padding: .5rem 1rem;
+}
+
+#main .toc a:hover {
+    text-decoration: underline;
+}
+
+#main .toc li > ul {
+    margin-left: 1.5rem;
+}
+
+#main .toc ul {
+    list-style: none;
+}
+
+#main :target {
+    background-color: azure;
+}