chore: support table of content

Signed-off-by: Bo-Yi Wu <appleboy.tw@gmail.com>
appleboy · May 26, 2021 · 5d6ca1e · 5d6ca1e
1 parent 9300eb8
commit 5d6ca1e
Show file tree

Hide file tree

Showing 4 changed files with 151 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ This project was forked from [halogenica/beautifulhugo](https://github.com/halog
 
 ## New Feature
 
-* [X] [d5f4dc0](https://github.com/appleboy/blog-theme/commit/d5f4dc014998fa5c5d4a3b1083483f7801493f5e) Add shortcode: speakerdeck
+* [X] [d5f4dc0](https://github.com/appleboy/blog-theme/commit/d5f4dc0) Add shortcode: speakerdeck
 
 ## Beautiful Hugo
 

diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html
@@ -0,0 +1,10 @@
+{{ if or .Params.toc (and .Site.Params.toc (ne .Params.toc false)) }}
+  {{ $toc := .TableOfContents }}
+  <!-- count the number of remaining li tags -->
+  <!-- and only display ToC if more than 1, otherwise why bother -->
+  {{ if gt (len (split $toc "<li>")) 2 }}
+    <aside class="toc-article">
+      {{ safeHTML .TableOfContents }}
+    </aside>
+  {{ end }}
+{{- end }}
diff --git a/static/css/main.css b/static/css/main.css
@@ -767,7 +767,7 @@ div.splitbox div.right {
     padding: 15px 25px;
   }
 }
-.disqus-comments button:hover, 
+.disqus-comments button:hover,
 .disqus-comments button:focus {
   color: #FFF;
   background: #0085a1;
@@ -815,3 +815,106 @@ h4.see-also {
  ul.share li:hover .fab {
   transform: scale(1.4)
 }
+
+/* --- TableOfContents --- */
+
+#TableOfContents {
+  position: absolute;
+  margin-left: 975px;
+  width: 300px;
+  background: #f5f5f5;
+  padding: 0.5em 0em;
+  line-height: 1.2em;
+  font-size: .8em;
+  border: solid 1px lightgray;
+  border-radius: 4px;
+  box-shadow: 1px 1px 2px rgb(0 0 0 / 13%);
+}
+
+ @media (max-width: 768px) {
+  #TableOfContents {
+    display: none;
+  }
+}
+#TableOfContents ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 1px 0 1px 10px;
+}
+
+#TableOfContents > ul > li > ul {
+  list-style: none;
+}
+
+#TableOfContents > ul > li > ul > li > ul {
+  list-style: none;
+}
+
+#TableOfContents > ul {
+  list-style-type: none;
+}
+
+#TableOfContents > ul > li > ul > li {
+  margin-bottom: 5px;
+}
+
+#TableOfContents > ul > li > ul > li > ul {
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+
+#TableOfContents > ul > li > ul > li > ul > li {
+  margin-bottom: 5px;
+}
+
+#TableOfContents a {
+  padding: 0px 5px;
+}
+
+#TableOfContents li.active {
+  font-weight: 500;
+}
+
+#TableOfContents > ul > li > ul > li > a, #TableOfContents > ul > li > ul > li > ul > li > a {
+	display: inline-block;
+	position: relative;
+	padding-bottom: 1px;
+}
+
+#TableOfContents > ul > li > ul > li > a:before, #TableOfContents > ul > li > ul > li > ul > li > a:before {
+  content: "|";
+  font-weight: bolder;
+  margin-right: .5rem;
+  color: #0085a1;
+}
+
+#TableOfContents > ul > li > ul > li > a:after, #TableOfContents > ul > li > ul > li > ul > li > a:after {
+	content: '';
+	display: block;
+	margin: auto;
+	height: 2px;
+	width: 0px;
+	background: transparent;
+  transition: all 300ms ease 0s;
+}
+
+#TableOfContents > ul > li > ul > li > a:hover:after,
+#TableOfContents > ul > li > ul > li.active > a:after,
+#TableOfContents > ul > li > ul > li > ul > li > a:hover:after,
+#TableOfContents > ul > li > ul > li > ul > li.active > a:after {
+	width: 100%;
+	background: #0085a1;
+}
+
+#TableOfContents a {
+  text-decoration: none;
+  color: #1a2027;
+  display: block;
+}
+
+#TableOfContent > ul > li > ul > li > a::before {
+  content: "|";
+  font-weight: bolder;
+  margin-right: .5rem;
+  color: #0085a1;
+}
diff --git a/static/js/main.js b/static/js/main.js
@@ -6,6 +6,41 @@ var main = {
   numImgs : null,
 
   init : function() {
+    const SPACING = 100;
+    const $toc = $('#TableOfContents');
+    const $footer = $('.post-footer');
+
+    if ($toc.length) {
+      const minScrollTop = $toc.offset().top - SPACING;
+      const maxScrollTop = $footer.offset().top - $toc.height() - SPACING;
+
+      const tocState = {
+        start: {
+          'position': 'absolute',
+        },
+        process: {
+          'position': 'fixed',
+          'top': SPACING,
+        },
+        end: {
+          'position': 'absolute',
+          'top': maxScrollTop,
+        },
+      };
+
+      $(window).scroll(function() {
+        const scrollTop = $(window).scrollTop();
+
+        if (scrollTop < minScrollTop) {
+          $toc.css(tocState.start);
+        } else if (scrollTop > maxScrollTop) {
+          $toc.css(tocState.end);
+        } else {
+          $toc.css(tocState.process);
+        }
+      });
+    }
+
     // Shorten the navbar after scrolling a little bit down
     $(window).scroll(function() {
         if ($(".navbar").offset().top > 50) {
@@ -179,4 +214,4 @@ var main = {
 
 // 2fc73a3a967e97599c9763d05e564189
 
-document.addEventListener('DOMContentLoaded', main.init);
+document.addEventListener('DOMContentLoaded', main.init);