feat: add table of content

assets/sass/_dark.scss

@@ -56,6 +56,11 @@
     }
   }
 
+  // ToC
+  .toc {
+    background-color: $dark-toc-bg;
+  }
+
   // Inline code
   p>code {
     font-size: 0.9em;

assets/sass/_post.scss

@@ -42,6 +42,36 @@
   }
 }
 
+// Table of contents
+.toc {
+    margin: 1.1rem 0 1rem 0;
+    padding: .5rem 1rem .5rem 1rem;
+    border-radius: .3rem;
+    background-color: $toc-bg;
+    cursor: pointer;
+
+    ul {
+        padding-top: 1rem;
+        margin-left: 1rem;
+        padding-left: 1rem;
+
+        li {
+        margin-bottom: 0.5em;
+        line-height: 1.4;
+
+        a {
+            color: $black;
+            text-decoration: none;
+
+            &:hover {
+            color: $text-link-blue;
+            }
+        }
+        }
+    }
+}
+
+
 // Post content
 .page-content {
   padding-top: 8px;
@@ -90,7 +120,7 @@
   }
 
   ul.task-list {
-    list-style: none; 
+    list-style: none;
     margin: 0;
 
     li::before {

assets/sass/main.scss

@@ -6,6 +6,7 @@ $bloquote-border: #c4c8cc;
 $blockquote-text: #525b66;
 $inline-code-text: #333638;
 $inline-code-bg: #d8dbe2;
+$toc-bg: #edecec;
 
 $black: #0d122b;
 $light: #ececec;
@@ -21,6 +22,7 @@ $dark-bloquote-border: #4a4d56;
 $dark-blockquote-text: #9b9ba3;
 $dark-inline-code-text: #c2c4ca;
 $dark-inline-code-bg: #2d2d2d;
+$dark-toc-bg: #323232;
 
 $dark-black: #131418;
 $dark-white: #eaeaea;
@@ -76,4 +78,4 @@ $on-widescreen: 1152px;
 @import "code";
 @import "miscellaneous";
 @import "dark";
-@import "listpage";
+@import "listpage";

exampleSite/config.toml

@@ -25,7 +25,7 @@ enableEmoji = true
     unsafe = true
 
 [menu]
-  [[menu.main]] 
+  [[menu.main]]
     # The page reference (pageRef) is useful for menu highlighting
     # When pageRef is set, setting `url` is optional; it will be used as a fallback if the page is not found.
     pageRef="/"
@@ -46,11 +46,12 @@ enableEmoji = true
 [params]
   sitename = "Awesome hugo blog"
   defaultColor = "dark" # set color mode: dark, light, auto
-  # Setting it to 'auto' applies the color scheme based on the visitor's device color preference.If you don't specify anything, ignore this parameter, or leave it blank, 
-  # the default value is set to 'auto'. 
+  # Setting it to 'auto' applies the color scheme based on the visitor's device color preference.If you don't specify anything, ignore this parameter, or leave it blank,
+  # the default value is set to 'auto'.
   # You can take a look at layouts/index.html for more information.
   description = "Minimal Hugo blog theme with light and dark mode support"
   mainSections = ['posts']
+  toc = true # set to false to disable table of contents 'globally'
 
 [params.author]
   avatar = "avatar.jpg" # put the file in assets folder; also ensure that image has same height and width
@@ -70,3 +71,9 @@ url = "https://twitter.com"
 [[params.socialIcons]]
 name = "Rss"
 url = "index.xml"
+
+[tableOfContents]
+startLevel = 2 # ToC starts from H2
+endLevel = 4 # ToC ends at H4
+ordered = false # generates <ul> instead of <ol>
+

layouts/_default/single.html

@@ -9,10 +9,16 @@ <h1 class="header-title">{{ .Title }}</h1>
                     <time datetime="{{ $ISO_time }}" itemprop="datePublished"> {{ .Date | time.Format ":date_medium" }} </time>
                 </div>
             </header>
+            {{- if or .Params.toc .Site.Params.toc }}
+            <details class="toc">
+                <summary><b>Table of Contents</b></summary>
+                {{ .TableOfContents }}
+            </details>
+            {{- end -}}
             <div class="page-content">
                 {{ .Content }}
             </div>
         </article>
     </main>
 </div>
-{{ end }}
+{{ end }}