feat: support table of content

7 files changed, 103 insertions, 10 deletions

diff --git a/README-zh_CN.md b/README-zh_CN.md
index 11c74e0..f9ea224 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -135,7 +135,16 @@ hugo
 
 ## 3. 可选配置
 
-### 3.1 在某页面禁用评论
+### 3.1 Table of Content
+
+如果要启用目录，你可以将 `showToc` 设置为 `true`：
+
+```yaml
+showToc: true
+```
+
+
+### 3.2 在某页面禁用评论
 
 要在某页面禁用评论，你可以在页面的 Front Matter 中将 `enableComments` 设置为 `false`。
 
@@ -148,7 +157,7 @@ enableComments: false
 ---
 ```
 
-### 3.2 自定义 CSS 和 JS
+### 3.3 自定义 CSS 和 JS
 
 你可以将自定义 CSS 和 JS 放在 `static` 中，也可以使用远程的 CSS 或 JS 文件。
 
@@ -164,7 +173,7 @@ customJS:
 ```
 
 
-### 3.3 数学排版
+### 3.4 数学排版
 
 该主题使用了 [KaTeX](https://katex.org/) 来支持数学符号拍版。
 
diff --git a/README.md b/README.md
index 75edd12..74b47e9 100644
--- a/README.md
+++ b/README.md
@@ -132,9 +132,19 @@ hugo
 ```
 
 
-## 3. Optional
+## 3. Optional Configuration
 
-### 3.1 Disable Comments on a single post
+### 3.1 Table of Content
+
+To enable table of content, you could set `showToc` to `true`.
+
+For example:
+
+```yaml
+showToc: true
+```
+
+### 3.2 Disable Comments on a single post
 
 You can set `enableComments` to `false` in front matter to disable disqus comments on a single post.
 
@@ -147,7 +157,7 @@ enableComments: false
 ---
 ```
 
-### 3.2 Custom CSS and JS
+### 3.3 Custom CSS and JS
 
 You can put your custom css and js files to `static` directory, or use remote css and js files which start with `http://` or `https://`.
 
@@ -162,7 +172,7 @@ customJS:
   - https://example.com/custom.js # remote js
 ```
 
-### 3.3 Math Typesetting
+### 3.4 Math Typesetting
 
 Mathematical notation is enabled by [KaTeX](https://katex.org/).
 
diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml
index b3ece8c..53cb813 100644
--- a/exampleSite/config.yaml
+++ b/exampleSite/config.yaml
@@ -14,12 +14,15 @@ googleAnalytics: your-google-analytics-id
 disqusShortname: your-disqus-shortname
 
 # Hugo Configure Markup
-# see: https://gohugo.io/getting-started/configuration-markup#highlight
+# more info: https://gohugo.io/getting-started/configuration-markup#
 markup:
   highlight:
     guessSyntax: true
     style: emacs
-
+  tableOfContents:
+    endLevel: 3
+    ordered: false
+    startLevel: 2
 
 # Social links in footer, support github,twitter,stackoverflow,facebook
 social:
@@ -50,6 +53,8 @@ params:
   enableComments: true
   # To enable comments, you may need to set `googleAnalytics`
   enableGoogleAnalytics: true
+  # To enable table of content, you could set `showToc: true`
+  showToc: true
   # To hidden powerBy message in the page footer, you could set: `showPowerBy: false`, default is `true`
   showPowerBy: true
   # To enable math typesetting , you could set `math: true`
diff --git a/exampleSite/content/posts/test.md b/exampleSite/content/posts/test.md
index bf9136c..20b6065 100644
--- a/exampleSite/content/posts/test.md
+++ b/exampleSite/content/posts/test.md
@@ -9,6 +9,36 @@ tags = [
 ]
 +++
 
+## t1
+
+aaaa
+
+### t1.1
+
+aaaa
+
+
+### t1.2
+
+aaaa
+
+
+#### t1.2.1
+
+aaaa
+
+
+#### t1.2.2
+
+aaaa
+
+
+## t2
+
+aaaa
+
+## t3
+
 超宽显示 `var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";var a = "text";`  超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示超宽显示 `var a = "text";`
 
 ```
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index e3fdadc..22a559e 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -25,8 +25,14 @@
         </span>
     </div>
 
+    
+    {{ if or .Site.Params.showToc .Params.showToc }}
+        {{ partial "toc.html" . }}
+    {{ end }}
+
+
     <div class="content">
-      {{  .Content }}
+      {{ .Content }}
     </div>
 
     {{ with .Params.tags }}
diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
new file mode 100644
index 0000000..4f20f04
--- /dev/null
+++ b/layouts/partials/toc.html
@@ -0,0 +1,10 @@
+<aside class="toc">
+  <details>
+      <summary>
+          {{- i18n "toc" | default "Table of Contents" }}
+      </summary>
+      <div>
+          {{ .TableOfContents }}
+      </div>
+  </details>
+</aside>
\ No newline at end of file
diff --git a/static/css/style.css b/static/css/style.css
index 5861415..e197a60 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -180,6 +180,29 @@ nav.navigation a.button {
   }
 }
 
+/* toc */
+.toc {
+  margin: auto;
+  background: #f8f8f8;
+  border-radius: 0;
+  padding: 10px 7px;
+  margin-top: 36px;
+}
+.toc details summary {
+  cursor: zoom-in;
+  margin-inline-start: 14px;
+  font-weight: 500;
+}
+.toc details[open] summary {
+  cursor: zoom-out;
+}
+.toc #TableOfContents {
+  margin-left: 10px;
+}
+.toc ul {
+  padding-inline-start: 24px;
+}
+
 /* comment */
 #comment {
   margin-top: 64px;