add 3 kinds of buttons to open toc content

assets/sass/atom.scss

@@ -36,6 +36,14 @@ $screens: (
     margin-left: $size;
     margin-right: $size;
   }
+
+  .#{$prefix}pb-#{$scale} {
+    padding-bottom: $size;
+  }
+  .#{$prefix}py-#{$scale} {
+    padding-top: $size;
+    padding-bottom: $size;
+  }
 }
 
 @each $scale in $scales {

assets/sass/main.scss

@@ -1,6 +1,7 @@
 @import "atom.scss";
 @import "markdown.scss";
 @import "syntax.scss";
+@import "toc.scss";
 
 :root {
   --pm: #0fa0ce;
@@ -99,16 +100,6 @@ header nav {
   color: var(--tag);
 }
 
-details.toc ul {
-  list-style-type: none;
-  padding-inline-start: 1em;
-  margin: 0;
-}
-
-details.toc ul > li {
-  margin: 1em 0;
-}
-
 ::-webkit-scrollbar {
   width: 4px;
   height: 4px;

assets/sass/toc.scss

@@ -0,0 +1,89 @@
+details.toc {
+  position: sticky;
+  top: 0;
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc summary {
+  position: relative;
+  width: fit-content;
+  cursor: pointer;
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc div {
+  background-color: var(--bg);
+  transition: .5s all;
+}
+
+details.toc ul {
+  list-style-type: none;
+  padding-inline-start: 1em;
+  margin: 0;
+}
+
+details.toc ul > li {
+  margin: 1em 0;
+}
+
+details.toc-bar,
+details.toc-lines {
+  & summary {
+    padding-right: 0.5em;
+    list-style: none;
+  }
+  & summary::-webkit-details-marker {
+    display: none;
+  }
+  & div {
+    padding-top: 1em;
+  }
+}
+
+details.toc-bar {
+  top: 1rem;
+  background-color: transparent;
+
+  & div {
+    top: -1em;
+    padding-top: 2em;
+    background-color: var(--bg);
+  }
+
+  & summary {
+    --toc-bar-ht: 4px;
+    --toc-bar-wd: 8%;
+    width: var(--toc-bar-wd);
+    height: var(--toc-bar-ht);
+    margin-left: calc(50% - var(--toc-bar-wd) / 2);
+    border-radius: calc(var(--toc-bar-ht) / 2);
+    background-color: var(--ft);
+    box-shadow: var(--bg) 0 0 8px 8px;
+  }
+}
+
+details.toc-default,
+details.toc-lines {
+  & summary {
+    padding-top: 1em;
+  }
+}
+
+details.toc-lines {
+  & summary::before {
+    content: "≡";
+    font-size: 1.5em;
+    position: relative;
+    top: 0;
+  }
+}
+
+details[open] {
+  &.toc-lines summary::before {
+    content: "×";
+    font-size: 1.7em;
+    top: -4px;
+  }
+}

config.toml

@@ -0,0 +1,3 @@
+[module]
+  [module.hugoVersion]
+    extended = true

exampleSite/config.toml

@@ -37,10 +37,12 @@ displayDate = true
 selectable = true
 # Custom global font. notice: `globalFontFamily` won't be working
 # on texts in some special positions like on titles
-globalFontFamily = 'Helvatica sans-serif'
+globalFontFamily = 'LXGW WenKai'
 # If set true, all your posts will use the chosen comment plugin
 # except those with a `comment: false` in their front-matter
 commentOnAllPosts = false
+# toc decides the shape of the toc button. e.g. default, lines, bar
+toc = "lines"
 
 # Disqus configuration
 [params.disqus]

layouts/_default/single.html

@@ -2,7 +2,7 @@
 {{ if .Params.toc }}
 {{ partial "toc.html" . }}
 {{ end }}
-<h1 class="mt-8 mb-6">{{ .Title }}</h1>
+<h1 class="mt-6 mb-6">{{ .Title }}</h1>
 <div class="mb-3 text-xs flex justify-between sm:flex-col">
 	<div>
 	{{ if .Site.Params.displayDate }}

layouts/partials/header.html

@@ -1,4 +1,4 @@
-<header class="flex justify-between items-center sm:my-3">
+<header class="flex justify-between items-center mb-6 sm:my-3">
   <div class="flex items-center">
     {{ if .Site.Params.brand }}
     <div class="mr-3 text-3xl"><a href="/">{{ .Site.Params.brand }}</a></div>

layouts/partials/toc.html

@@ -1,6 +1,26 @@
-<details class="toc mt-8">
+{{ if eq .Site.Params.toc "default" }}
-  <summary>Table of Contents</summary>
+<details class="toc toc-default">
-  <div>
+  <summary></summary>
+  <div class="pb-1">
     {{ .TableOfContents }}
   </div>
 </details>
+{{ end }}
+
+{{ if eq .Site.Params.toc "bar" }}
+<details class="toc toc-bar">
+  <summary></summary>
+  <div class="pb-1">
+    {{ .TableOfContents }}
+  </div>
+</details>
+{{ end }}
+
+{{ if eq .Site.Params.toc "lines" }}
+<details class="toc toc-lines">
+  <summary></summary>
+  <div class="pb-1">
+    {{ .TableOfContents }}
+  </div>
+</details>
+{{ end }}