feat: support table of content

optiminimalist · Aug 16, 2021 · cbe158b · cbe158b
1 parent 82e53f4
commit cbe158b
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 10 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -25,8 +25,14 @@ <h1 class="title">{{ .Title }}</h1>
         </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
@@ -0,0 +1,10 @@
+<aside class="toc">
+  <details>
+      <summary>
+          {{- i18n "toc" | default "Table of Contents" }}
+      </summary>
+      <div>
+          {{ .TableOfContents }}
+      </div>
+  </details>
+</aside>
diff --git 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;