perf: replace tocbot with statically generated toc

Generate TOC with Hugo's built-in {{ .TableOfContents }} and add minimal script to implement collapsible list and active styles.

Encapsulate TOC as a component where all JavaSript and CSS is in one place with HTML.

Configure markup.


Former-commit-id: 4b4629edb733d5ebd6485755fd2f63b0457f62c8

1 files changed, 1 insertions, 15 deletions

diff --git a/layouts/posts/single.html b/layouts/posts/single.html
index bb0daca8..e6dc6006 100644
--- a/layouts/posts/single.html
+++ b/layouts/posts/single.html
@@ -37,9 +37,7 @@
       <!-- Post Content -->
       <div id="post-content" class="post-content markdown-body"
           style="view-transition-name: post-content-{{ .File.UniqueID }}">
-        {{ if .Params.toc }}
-        <div id="toc-container"><div id="toc"></div></div>
-        {{ end }}
+        {{ if .Params.toc }}{{ partial "components/toc" . }}{{ end }}
         {{ .Site.Params.postHeaderContent | safeHTML }}
         {{ .Content }}
         {{ if eq .Site.Language.Lang "zh" }}
@@ -82,17 +80,5 @@
             {{ else }}<li class="placeholder"></li>{{ end }}
         </ul>
       </nav>
-
-      <script src="/js/tocbot.min.js"></script>
-      <script>
-      tocbot.init({
-        tocSelector: '#toc',
-        contentSelector: '#post-content',
-        headingSelector: 'h2, h3:not(blockquote > h3)',
-        hasInnerContainers: true,
-        scrollSmoothOffset: -30
-      });
-      </script>
-
     </article>
 {{ end }}