feat(TOC): add keepStatic param for TOC (#372)

assets/css/_partial/_single/_toc.scss

@@ -115,6 +115,10 @@
   display: none;
   margin: .8rem 0;
 
+  &[kept=true] {
+    display: block;
+  }
+
   .toc-title {
     display: flex;
     justify-content: space-between;

exampleSite/config.toml

@@ -756,8 +756,11 @@ enableEmoji = true
       # whether to enable the table of the contents
       # 是否使用目录
       enable = true
-      # whether to make the table of the contents automatically collapsed
-      # 是否使目录自动折叠展开
+      # whether to keep the static table of the contents in front of the post
+      # 是否保持使用文章前面的静态目录
+      keepStatic = false
+      # whether to make the table of the contents in the sidebar automatically collapsed
+      # 是否使侧边目录自动折叠展开
       auto = true
     # Code config
     # 代码配置

exampleSite/content/posts/theme-documentation-basics/index.en.md

@@ -424,7 +424,9 @@ Please open the code block below to view the complete sample configuration :(far
     [params.page.toc]
       # whether to enable the table of the contents
       enable = true
-      # whether to make the table of the contents automatically collapsed
+      # {{< version 0.2.9 >}} whether to keep the static table of the contents in front of the post
+      keepStatic = true
+      # whether to make the table of the contents in the sidebar automatically collapsed
       auto = true
     # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} mathematical formulas
     [params.page.math]

exampleSite/content/posts/theme-documentation-basics/index.fr.md

@@ -429,7 +429,9 @@ Please open the code block below to view the complete sample configuration :(far
     [params.page.toc]
       # whether to enable the table of the contents
       enable = true
-      # whether to make the table of the contents automatically collapsed
+      # {{< version 0.2.9 >}} whether to keep the static table of the contents in front of the post
+      keepStatic = true
+      # whether to make the table of the contents in the sidebar automatically collapsed
       auto = true
     # {{< version 0.2.0 changed >}} {{< link "https://katex.org/" KaTeX >}} mathematical formulas
     [params.page.math]

exampleSite/content/posts/theme-documentation-basics/index.zh-cn.md

@@ -427,7 +427,9 @@ hugo
     [params.page.toc]
       # 是否使用目录
       enable = true
-      # 是否使目录自动折叠展开
+      # {{< version 0.2.9 >}} 是否保持使用文章前面的静态目录
+      keepStatic = true
+      # 是否使侧边目录自动折叠展开
       auto = true
     # {{< version 0.2.0 >}} 代码配置
     [params.page.code]

exampleSite/content/posts/theme-documentation-content/index.en.md

@@ -130,7 +130,7 @@ library:
 * **linkToMarkdown**: if `true`, the footer of the content will be shown the link to the orignal Markdown file.
 * **rssFullText**: {{< version 0.2.4 >}} if `true`, the full text content will be shown in RSS.
 
-* **toc**: {{< version 0.2.0 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **toc**: {{< version 0.2.9 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).

exampleSite/content/posts/theme-documentation-content/index.fr.md

@@ -135,7 +135,7 @@ library:
 * **linkToMarkdown**: if `true`, the footer of the content will be shown the link to the orignal Markdown file.
 * **rssFullText**: {{< version 0.2.4 >}} if `true`, the full text content will be shown in RSS.
 
-* **toc**: {{< version 0.2.0 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
+* **toc**: {{< version 0.2.9 changed >}} the same as the `params.page.toc` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **code**: {{< version 0.2.0 >}} the same as the `params.page.code` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **math**: {{< version 0.2.0 changed >}} the same as the `params.page.math` part in the [site configuration](../theme-documentation-basics#site-configuration).
 * **mapbox**: {{< version 0.2.0 >}} the same as the `params.page.mapbox` part in the [site configuration](../theme-documentation-basics#site-configuration).

exampleSite/content/posts/theme-documentation-content/index.zh-cn.md

@@ -130,7 +130,7 @@ library:
 * **linkToMarkdown**: 如果设为 `true`, 内容的页脚将显示指向原始 Markdown 文件的链接.
 * **rssFullText**: {{< version 0.2.4 >}} 如果设为 `true`, 在 RSS 中将会显示全文内容.
 
-* **toc**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.toc` 部分相同.
+* **toc**: {{< version 0.2.9 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.toc` 部分相同.
 * **code**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.code` 部分相同.
 * **math**: {{< version 0.2.0 changed >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.math` 部分相同.
 * **mapbox**: {{< version 0.2.0 >}} 和 [网站配置](../theme-documentation-basics#site-configuration) 中的 `params.page.mapbox` 部分相同.

layouts/posts/single.html

@@ -72,7 +72,7 @@
 
         {{- /* Static TOC */ -}}
         {{- if ne $toc.enable false -}}
-            <div class="details toc" id="toc-static">
+            <div class="details toc" id="toc-static"  kept="{{ if $toc.keepStatic }}true{{ end }}">
                 <div class="details-summary toc-title">
                     <span>{{ T "contents" }}</span>
                     <span><i class="details-icon fas fa-angle-right"></i></span>

src/js/theme.js

@@ -397,7 +397,7 @@ class Theme {
     initToc() {
         const $tocCore = document.getElementById('TableOfContents');
         if ($tocCore === null) return;
-        if (this.util.isTocStatic()) {
+        if (document.getElementById('toc-static').getAttribute('kept') || this.util.isTocStatic()) {
             const $tocContentStatic = document.getElementById('toc-content-static');
             if ($tocCore.parentElement !== $tocContentStatic) {
                 $tocCore.parentElement.removeChild($tocCore);
@@ -640,29 +640,34 @@ class Theme {
             $viewComments.style.display = 'block';
         }
         const $fixedButtons = document.getElementById('fixed-buttons');
-        const MIN_SCROLL = 20;
+        const ACCURACY = 20, MINIMUM = 100;
         window.addEventListener('scroll', () => {
             this.newScrollTop = this.util.getScrollTop();
             const scroll = this.newScrollTop - this.oldScrollTop;
+            const isMobile = this.util.isMobile();
             this.util.forEach($headers, $header => {
-                if (scroll > MIN_SCROLL) {
+                if (scroll > ACCURACY) {
                     $header.classList.remove('fadeInDown');
                     this.util.animateCSS($header, ['fadeOutUp', 'faster'], true);
-                } else if (scroll < - MIN_SCROLL) {
+                } else if (scroll < - ACCURACY) {
                     $header.classList.remove('fadeOutUp');
                     this.util.animateCSS($header, ['fadeInDown', 'faster'], true);
                 }
             });
-            if (this.newScrollTop > MIN_SCROLL) {
-                if (scroll > MIN_SCROLL) {
+            if (this.newScrollTop > MINIMUM) {
+                if (isMobile && scroll > ACCURACY) {
                     $fixedButtons.classList.remove('fadeIn');
                     this.util.animateCSS($fixedButtons, ['fadeOut', 'faster'], true);
-                } else if (scroll < - MIN_SCROLL) {
+                } else if (!isMobile || scroll < - ACCURACY) {
                     $fixedButtons.style.display = 'block';
                     $fixedButtons.classList.remove('fadeOut');
                     this.util.animateCSS($fixedButtons, ['fadeIn', 'faster'], true);
                 }
             } else {
+                if (!isMobile) {
+                    $fixedButtons.classList.remove('fadeIn');
+                    this.util.animateCSS($fixedButtons, ['fadeOut', 'faster'], true);
+                }
                 $fixedButtons.style.display = 'none';
             }
             for (let event of this.scrollEventSet) event();