add toc-bot

4 files changed, 47 insertions, 35 deletions

diff --git a/layouts/partials/article.html b/layouts/partials/article.html
index 2706403..b0e7380 100644
--- a/layouts/partials/article.html
+++ b/layouts/partials/article.html
@@ -19,7 +19,7 @@
         {{- partial "post/wc.html" . }}
       </div>
     </div>
-    <div class="article-entry marked-body" itemprop="articleBody">
+    <div class="article-entry marked-body js-toc-content" itemprop="articleBody">
       {{ .Content }}
     </div>
     <div class="article-footer">
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index ef3cd86..3119aec 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -56,6 +56,7 @@
   {{- if eq .Site.Params.comment.type "gitalk"}} 
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css">    
   {{- end }}
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.css">
   {{/* NOTE: These Hugo Internal Templates can be found starting at https://github.com/spf13/hugo/blob/master/tpl/tplimpl/template_embedded.go#L158 */}}
   {{- template "_internal/opengraph.html" . -}}
   {{- template "_internal/google_news.html" . -}}
diff --git a/layouts/partials/script.html b/layouts/partials/script.html
index 159b345..b18a56c 100644
--- a/layouts/partials/script.html
+++ b/layouts/partials/script.html
@@ -3,39 +3,52 @@
 {{ end }}
 <script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>
 <script>
-   window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
+    window.jQuery || document.write('<script src="js/jquery.min.js"><\/script>')
 </script>
 <script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/highlight.min.js"></script>
 <script type="text/javascript" src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/rust.min.js"></script>
 <script type="text/javascript"
-   src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/dockerfile.min.js"></script>
+    src="https://cdn.staticfile.org/highlight.js/9.15.10/languages/dockerfile.min.js"></script>
 <script>
-hljs.configure({
-  tabReplace: '    ', // 4 spaces
-  classPrefix: ''     // don't append class prefix
-                      // … other options aren't changed
-})
-hljs.initHighlightingOnLoad();
+    hljs.configure({
+        tabReplace: '    ', // 4 spaces
+        classPrefix: ''     // don't append class prefix
+        // … other options aren't changed
+    })
+    hljs.initHighlightingOnLoad();
 </script>
 <script type="text/javascript" src="{{ "js/application.js" | absURL }}"></script>
 <script type="text/javascript" src="{{ "js/plugin.js" | absURL }}"></script>
 <script>
-      (function (window) {
-          var INSIGHT_CONFIG = {
-              TRANSLATION: {
-                  POSTS: '{{ T "insight_posts"}}',
-                  PAGES: '{{ T "insight_pages"}}',
-                  CATEGORIES: '{{ T "insight_categories"}}',
-                  TAGS: '{{ T "insight_tags"}}',
-                  UNTITLED: '{{ T "insight_untitled"}}',
-              },
-              ROOT_URL: '{{ .Site.BaseURL }}',
-              CONTENT_URL: '{{ print .Site.BaseURL "/searchindex.json" | safeURL }} ',
-          };
-          window.INSIGHT_CONFIG = INSIGHT_CONFIG;
-      })(window);
-      </script>
+    (function (window) {
+        var INSIGHT_CONFIG = {
+            TRANSLATION: {
+                POSTS: '{{ T "insight_posts"}}',
+                PAGES: '{{ T "insight_pages"}}',
+                CATEGORIES: '{{ T "insight_categories"}}',
+                TAGS: '{{ T "insight_tags"}}',
+                UNTITLED: '{{ T "insight_untitled"}}',
+            },
+            ROOT_URL: '{{ .Site.BaseURL }}',
+            CONTENT_URL: '{{ print .Site.BaseURL "/searchindex.json" | safeURL }} ',
+        };
+        window.INSIGHT_CONFIG = INSIGHT_CONFIG;
+    })(window);
+</script>
 <script type="text/javascript" src="{{ "js/insight.js" | absURL }}"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/tocbot/4.4.2/tocbot.min.js"></script>
+<script>
+    tocbot.init({
+        // Where to render the table of contents.
+        tocSelector: '.js-toc',
+        // Where to grab the headings to build the table of contents.
+        contentSelector: '.js-toc-content',
+        // Which headings to grab inside of the contentSelector element.
+        headingSelector: 'h1, h2, h3',
+        // For headings inside relative or absolute positioned containers within content.
+        hasInnerContainers: true,
+    });
+</script>
 {{- if eq .Type "repository" }}
 {{- partial "_script/repository.html" . }}
 {{- end}}
@@ -47,4 +60,4 @@ hljs.initHighlightingOnLoad();
 {{- partial "_script/comment.html" . }}
 {{- end }}
 {{- partial "_script/fancybox.html" . }}
-{{- partial "_script/analytics.html" . }}
+{{- partial "_script/analytics.html" . }}
\ No newline at end of file
diff --git a/layouts/partials/sidebar-toc.html b/layouts/partials/sidebar-toc.html
index 0aeed16..16c9c1c 100644
--- a/layouts/partials/sidebar-toc.html
+++ b/layouts/partials/sidebar-toc.html
@@ -1,12 +1,10 @@
 {{- if .Site.Params.config.toc }}
-  <aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
-    <div class="slimContent">
-      <nav id="toc" class="article-toc">
-        <h3 class="toc-title">{{T "article_catalogue" }}</h3>
-        <div class="toc-content always-active">
-          {{- .TableOfContents }}
-        </div>
-      </nav>
-    </div>
-  </aside>
+<aside class="sidebar sidebar-toc collapse" id="collapseToc" itemscope itemtype="http://schema.org/WPSideBar">
+  <div class="slimContent">
+    <h4 class="toc-title">{{T "article_catalogue" }}</h4>
+    <nav id="toc" class="js-toc toc">
+
+    </nav>
+  </div>
+</aside>
 {{- end }}
\ No newline at end of file