chore(header): remove all dummy-targets and update smooth scroll

README.zh.md

@@ -134,7 +134,7 @@
 
 * `assets/css/_varibales.scss`： 你可以覆盖 `_variables.scss` 中的变量来自定义样式
 * `assets/css/_custom.scss`： 你可以把自定义的样式放在这个文件
-*  需要使用hugo extended版本编译sass，否则修改css无法生效
+* 需要使用hugo extended版本编译sass，否则修改css无法生效
 
 ## 网站图标、浏览器配置、网站清单
 

assets/css/_core/_media.scss

@@ -32,7 +32,7 @@
 }
 
 @media only screen and (max-width: 960px) {
-  header.desktop {
+  #header-desktop {
     .header-wrapper {
       margin: 0 1rem;
     }
@@ -52,11 +52,11 @@
 }
 
 @media only screen and (max-width: 560px) {
-  header.desktop {
+  #header-desktop {
     display: none;
   }
 
-  header.mobile {
+  #header-mobile {
     display: block;
   }
 

assets/css/_page/_single.scss

@@ -54,13 +54,6 @@
   @import "../_partial/_single/toc";
 
   .content {
-    .post-dummy-target:target {
-      display: inline-block;
-      position: relative;
-      top: -5.6rem;
-      visibility: hidden;
-    }
-
     h1,
     h2,
     h3,
@@ -75,17 +68,6 @@
       }
     }
 
-    h2::before,
-    h3::before,
-    h4::before,
-    h5::before,
-    h6::before {
-      display: block;
-      content: "";
-      height: 1.2 * $header-height;
-      margin: -1.2 * $header-height 0 0;
-    }
-
     h2 > a:first-child::before {
       content: "#";
       margin-right: .3125rem;

assets/css/_partial/_header.scss

@@ -10,7 +10,7 @@ header {
   }
 }
 
-header.desktop {
+#header-desktop {
   display: block;
   z-index: 100;
 
@@ -45,7 +45,7 @@ header.desktop {
   }
 }
 
-header.mobile {
+#header-mobile {
   display: none;
   z-index: 100;
   transition: all 0.3s ease 0s;

assets/js/lib/VERSION

@@ -7,4 +7,4 @@ echarts@4.5.0
 typeit@6.0.3
 aplayer@1.10.1
 meting@2.0.1
-smooth-scroll@16.1.0
+smooth-scroll@16.1.2

assets/js/theme.js

@@ -9,10 +9,6 @@
     };
 
     class Theme {
-        initSmoothScroll() {
-            new SmoothScroll('[smooth-scroll]', {speed: 300, speedAsDuration: true});
-        }
-
         initMobileMenu() {
             document.getElementById('menu-toggle').onclick = () => {
                 document.getElementById('menu-toggle').classList.toggle('active');
@@ -34,7 +30,7 @@
         initDynamicToTop() {
             const min = 300;
             const toTopButton = document.getElementById('dynamic-to-top');
-            window.onscroll = () => {
+            document.addEventListener('scroll', () => {
                 const scrollTop = (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
                 if (typeof document.body.style.maxHeight === 'undefined') {
                     toTopButton.style.position = 'absolute';
@@ -69,7 +65,7 @@
                         }
                     })(document.getElementById('dynamic-to-top'));
                 }
-            };
+            }, false);
         }
 
         initHighlight() {
@@ -104,7 +100,20 @@
             });
         }
 
+        initHeaderLink() {
+            for (let num = 1; num <= 6; num++) {
+                forEachElement(document.querySelectorAll('.content > h' + num), (header) => {
+                    header.classList.add('headerLink');
+                    header.innerHTML = `<a href="#${header.id}"></a>${header.innerHTML}`;
+                });
+            }
+        }
+
         _refactorToc(toc) {
+            forEachElement(toc.querySelectorAll('a:first-child'), (link) => {
+                link.classList.add('toc-link');
+            });
+
             // when headings do not start with `h1`
             const oldTocList = toc.children[0];
             let newTocList = oldTocList;
@@ -116,43 +125,30 @@
             if (newTocList !== oldTocList) toc.replaceChild(newTocList, oldTocList);
         }
 
-        _linkToc() {
-            forEachElement(document.querySelectorAll('#TableOfContents a:first-child'), (link) => {
-                link.classList.add('toc-link');
-            });
-            for (let num = 1; num <= 6; num++) {
-                forEachElement(document.querySelectorAll('.content > h' + num), (header) => {
-                    header.classList.add('headerLink');
-                    header.innerHTML = `<a href="#${header.id}"></a>${header.innerHTML}`;
-                });
-            }
-        }
-
-        _initTocState() {
-            const toc = document.getElementById('post-toc');
-            if (toc && window.getComputedStyle(toc, null).display !== 'none') {
-                const HEADER_SPACING = 80;
-                const minTop = toc.offsetTop;
-                const minScrollTop = minTop - HEADER_SPACING;
+        _initTocState(tocContainer) {
+            if (window.getComputedStyle(tocContainer, null).display !== 'none') {
+                const TOP_SPACING = 80;
+                const minTop = tocContainer.offsetTop;
+                const minScrollTop = minTop - TOP_SPACING;
                 const footerTop = document.getElementById('post-footer').offsetTop;
-                const toclinks = toc.getElementsByClassName('toc-link');
+                const toclinks = tocContainer.getElementsByClassName('toc-link');
                 const headerLinks = document.getElementsByClassName('headerLink') || [];
-                const tocLinkLis = toc.querySelectorAll('.post-toc-content li');
-                const INDEX_SPACING = 10;
+                const tocLinkLis = tocContainer.querySelectorAll('.post-toc-content li');
+                const INDEX_SPACING = document.getElementById('header-desktop').getBoundingClientRect().height + 5;
 
                 const changeTocState = () => {
                     const scrollTop = document.documentElement.scrollTop;
-                    const maxTop = footerTop - toc.getBoundingClientRect().height;
-                    const maxScrollTop = maxTop - HEADER_SPACING;
+                    const maxTop = footerTop - tocContainer.getBoundingClientRect().height;
+                    const maxScrollTop = maxTop - TOP_SPACING;
                     if (scrollTop < minScrollTop) {
-                        toc.style.position = 'absolute';
-                        toc.style.top = `${minTop}px`;
+                        tocContainer.style.position = 'absolute';
+                        tocContainer.style.top = `${minTop}px`;
                     } else if (scrollTop > maxScrollTop) {
-                        toc.style.position = 'absolute';
-                        toc.style.top = `${maxTop}px`;
+                        tocContainer.style.position = 'absolute';
+                        tocContainer.style.top = `${maxTop}px`;
                     } else {
-                        toc.style.position = 'fixed';
-                        toc.style.top = `${HEADER_SPACING}px`;
+                        tocContainer.style.position = 'fixed';
+                        tocContainer.style.top = `${TOP_SPACING}px`;
                     }
 
                     forEachElement(toclinks, (link) => { link.classList.remove('active'); });
@@ -179,7 +175,7 @@
                 changeTocState();
 
                 if (!this._initTocOnce) {
-                    window.onscroll = changeTocState;
+                    document.addEventListener('scroll', changeTocState, false);
                     this._initTocOnce = true;
                 }
             }
@@ -193,10 +189,11 @@
                     tocContainer.parentElement.removeChild(tocContainer);
                 } else {
                     this._refactorToc(toc);
-                    this._linkToc();
-                    this._initTocState();
+                    this._initTocState(tocContainer);
                     window.addEventListener("resize", () => {
-                        window.setTimeout(this._initTocState, 0);
+                        window.setTimeout(() => {
+                            this._initTocState(tocContainer);
+                        }, 0);
                     }, false);
                 }
             }
@@ -261,17 +258,22 @@
             }
         }
 
+        initSmoothScroll() {
+            new SmoothScroll('[href^="#"]', {speed: 300, speedAsDuration: true, header: '#header-desktop'});
+        }
+
         init() {
-            this.initSmoothScroll();
             this.initMobileMenu();
             this.initSwitchTheme();
             this.initDynamicToTop();
             this.initHighlight();
             this.initTable();
+            this.initHeaderLink();
             this.initMermaid();
             this.initEcharts();
             this.initTypeit();
             this.initToc();
+            this.initSmoothScroll();
         }
     }
 

layouts/_default/baseof.html

@@ -52,7 +52,7 @@
         </div>
 
         {{- /* Dynamic to top button */ -}}
-        <a href="#" class="dynamic-to-top" id="dynamic-to-top" smooth-scroll>
+        <a href="#" class="dynamic-to-top" id="dynamic-to-top">
             <span>&nbsp;</span>
         </a>
 

layouts/partials/header.html

@@ -1,5 +1,5 @@
 {{- /* Desktop header */ -}}
-<header class="desktop">
+<header class="desktop" id="header-desktop">
     <div class="header-wrapper">
         <div class="header-title animated bounceIn">
             <a href="{{ .Site.BaseURL }}">
@@ -19,7 +19,7 @@
 </header>
 
 {{- /* Mobile header */ -}}
-<header class="mobile">
+<header class="mobile" id="header-mobile">
     <div class="header-wrapper">
         <div class="header-container">
             <div class="header-title animated bounceIn">

layouts/partials/hook/content.html

@@ -25,14 +25,4 @@
 {{- $REout = `↩︎` -}}
 {{- $content = replaceRE $REin $REout $content -}}
 
-{{- /* Dummy target */ -}}
-{{- $REin = `<(.+) (id="fnref:.+?")>` -}}
-{{- $REout = `<a class="post-dummy-target" $2></a><$1>` -}}
-{{- $content = replaceRE $REin $REout $content -}}
-
-{{- /* Dummy target */ -}}
-{{- $REin = `<li (id="fn:.+?")(.*?)>\s?<p>` -}}
-{{- $REout = `<li $2><p><a class="post-dummy-target" $1></a>` -}}
-{{- $content = replaceRE $REin $REout $content -}}
-
 {{- return $content -}}