refactor: partial code refactoring && optimization TOC

_config.yml

@@ -86,7 +86,7 @@ website_count:
 # See: https://github.com/theme-next/hexo-generator-searchdb
 # ---------------------------------------------------------------------------------------
 local_search:
-  enable: true
+  enable: false
 
   # If auto, trigger search by changing input.
   # If manual, trigger search by pressing enter key or search button.
@@ -141,7 +141,7 @@ side_tools:
 # Back to top
 # ---------------------------------------------------------------------------------------
 back2top:
-  enable: false
+  enable: true
 
 
 # ---------------------------------------------------------------------------------------

layout/_partial/head.ejs

@@ -15,10 +15,14 @@
         title = __('tag') + ': ' + page.tag;
     } else if (page.title === 'about') {
         title = __('about');
+    } else if (page.title === 'links') {
+        title = __('links');
     }
     %>
     <title>
-        <% if (title){ %><%= title %> | <% } %><%= config.title %>
+        <% if (title){ %><%= title %> |
+        <% } %>
+        <%= config.title %>
     </title>
     <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
     <% if (theme.style.favicon){ %>

layout/_partial/scripts.ejs

@@ -1,21 +1,24 @@
 <%- js([
-    'js/main.js',
+    'js/utils.js',
     'js/header-shrink.js',
-    'js/toggle-mode.js'
+    'js/dark-light-toggle.js',
+    'js/main.js'
 ]) %>
 
 <% if (theme.back2top.enable) { %>
-    <%- js('js/scroll-to-top.js') %>
+    <%- js('js/back2top.js') %>
 <% } %>
 
 <% if (is_post()) { %>
 
+    <%- js('js/left-side-toggle.js') %>
+
     <% if (theme.code_copy.enable) { %>
         <%- js('js/code-copy.js') %>
     <% } %>
 
     <% if (theme.toc.enable) { %>
-        <%- js(['lib/anime.min.js', 'js/toc.js', 'js/post-toc.js']) %>
+        <%- js(['lib/anime.min.js', 'js/toc.js']) %>
     <% } %>
 <% } %>
 

scripts/helpers/export-config.js

@@ -14,12 +14,15 @@ hexo.extend.helper.register('export_config', function () {
     root: config.root,
     localsearch: theme.local_search,
     themeInfo: theme.theme_info,
-        codeblock: theme.codeblock
+    codeblock: theme.codeblock,
+    toc: theme.toc,
+    back2top: theme.back2top
   };
   if (config.search) {
     exportConfig.path = config.search.path;
   }
   return `<script id="hexo-configurations">
+    let ILS = window.ILS || {};
     let CONFIG = ${JSON.stringify(exportConfig)};
   </script>`;
 });

source/css/layout/common/markdown.styl

@@ -69,15 +69,14 @@
 
 
   h1, h2, h3, h4, h5, h6 {
-    //  TODO: ...
   }
 
   h1 {
     color: var(--second-text-color);
     font-size: 2em;
     font-weight: 600;
-    margin-block-start: 1.1em;
+    margin-block-start: 1.4em;
-    margin-block-end: 1.1em;
+    margin-block-end: 1.0em;
   }
 
 
@@ -85,16 +84,16 @@
     color: var(--second-text-color);
     font-size: 1.8em;
     font-weight: 600;
-    margin-block-start: 1.1em;
+    margin-block-start: 1.4em;
-    margin-block-end: 1.1em;
+    margin-block-end: 1.0em;
   }
 
   h3 {
     color: var(--second-text-color);
     font-size: 1.6em;
     font-weight: 550;
-    margin-block-start: 1em;
+    margin-block-start: 1.2em;
-    margin-block-end: 1em;
+    margin-block-end: 0.8em;
   }
 
 
@@ -102,16 +101,16 @@
     color: var(--second-text-color);
     font-size: 1.4em;
     font-weight: 550;
-    margin-block-start: 1em;
+    margin-block-start: 1.2em;
-    margin-block-end: 1em;
+    margin-block-end: 0.8em;
   }
 
   h5 {
     color: var(--second-text-color);
     font-size: 1.2em;
     font-weight: 500;
-    margin-block-start: 0.9em;
+    margin-block-start: 1.0em;
-    margin-block-end: 0.9em;
+    margin-block-end: 0.6em;
 
   }
 
@@ -119,8 +118,8 @@
     color: var(--second-text-color);
     font-size: 1.2em;
     font-weight: 500;
-    margin-block-start: 0.9em;
+    margin-block-start: 1.0em;
-    margin-block-end: 0.9em;
+    margin-block-end: 0.6em;
   }
 
 

source/js/back2top.js

@@ -0,0 +1,35 @@
+window.addEventListener('DOMContentLoaded', () => {
+  ILS.utils = {
+
+    ...ILS.utils,
+
+    back2TopButton_dom: document.querySelector('.scroll-to-top'),
+
+    back2top() {
+      const scrollTopTimer = setInterval(function () {
+        let top = document.body.scrollTop || document.documentElement.scrollTop;
+        let speed = top / 2;
+        if (document.body.scrollTop !== 0) {
+          document.body.scrollTop -= speed;
+        } else {
+          document.documentElement.scrollTop -= speed;
+        }
+        if (top === 0) {
+          clearInterval(scrollTopTimer);
+        }
+      }, 30);
+    },
+
+    initBack2TopButton() {
+      if (ILS.utils.back2TopButton_dom) {
+        ILS.utils.back2TopButton_dom.addEventListener('click', () => {
+          this.back2top();
+        });
+      }
+    },
+  }
+
+  ILS.utils.initBack2TopButton();
+});
+
+

source/js/dark-light-toggle.js

@@ -0,0 +1,72 @@
+window.addEventListener('DOMContentLoaded', () => {
+  ILS.utils.modeToggle = {
+
+    localStorageKey: 'MAGIC',
+    modeToggleButton_dom: document.querySelector('.mode-toggle'),
+    iconDom: document.querySelector('.mode-toggle i'),
+    articleContent: document.querySelector('.main-content'),
+
+    setItemUtil(modeClass, prefersColorScheme) {
+      document.body.classList.toggle(modeClass);
+      const isDark = document.body.className.indexOf(modeClass) === -1;
+
+      if (isDark) {
+        this.iconDom.className = 'fa fa-moon-o';
+        this.articleContent.classList.remove('night-code-theme');
+      } else {
+        this.iconDom.className = 'fa fa-lightbulb-o';
+        this.articleContent.classList.add('night-code-theme');
+      }
+      localStorage.setItem(this.localStorageKey, JSON.stringify(
+        {
+          prefersColorScheme: prefersColorScheme,
+          isDark: isDark
+        }
+      ));
+    },
+
+    initModeStatus() {
+      this.modeConfig = JSON.parse(localStorage.getItem(this.localStorageKey));
+      if (this.modeConfig) {
+        if (this.modeConfig.prefersColorScheme === 'dark') {
+          if (this.modeConfig.isDark) {
+            document.body.classList.remove('light-mode');
+            this.articleContent.classList.remove('night-code-theme');
+            this.iconDom.className = 'fa fa-lightbulb-o';
+          } else {
+            document.body.classList.add('light-mode');
+            this.articleContent.classList.add('night-code-theme');
+            this.iconDom.className = 'fa fa-moon-o';
+          }
+        } else {
+
+          if (this.modeConfig.isDark) {
+            document.body.classList.remove('dark-mode');
+            this.articleContent.classList.remove('night-code-theme');
+            this.iconDom.className = 'fa fa-moon-o';
+          } else {
+            document.body.classList.add('dark-mode');
+            this.articleContent.classList.add('night-code-theme');
+            this.iconDom.className = 'fa fa-lightbulb-o';
+          }
+
+        }
+
+      }
+    },
+
+    initModeToggleButton() {
+      this.modeToggleButton_dom.addEventListener('click', () => {
+        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          this.setItemUtil('light-mode', 'dark');
+        } else {
+          this.setItemUtil('dark-mode', 'light');
+        }
+      });
+    }
+
+  }
+
+  ILS.utils.modeToggle.initModeStatus();
+  ILS.utils.modeToggle.initModeToggleButton();
+});

source/js/header-shrink.js

@@ -1,36 +1,50 @@
-const pageTemplateDom = document.querySelector('.page-main-content');
+window.addEventListener('DOMContentLoaded', () => {
-const sidebarToolsDom = document.querySelector('.sidebar-tools');
+  ILS.utils.headerShrink = {
-const headerDom = document.querySelector('.header-wrapper');
-const menuBarDom = document.querySelector('.menu-bar');
-const windowMaskDom = document.querySelector('.window-mask');
 
+    pageTemplateDom: document.querySelector('.page-main-content'),
+    sidebarToolsDom: document.querySelector('.sidebar-tools'),
+    headerDom: document.querySelector('.header-wrapper'),
+    menuBarDom: document.querySelector('.menu-bar'),
+    windowMaskDom: document.querySelector('.window-mask'),
 
-let isHeaderShrink = false;
+    isHeaderShrink: false,
-const headerHeight = headerDom.getBoundingClientRect().height;
+
+    init() {
+      this.headerHeight = this.headerDom.getBoundingClientRect().height;
+    },
+
+    headerShrink() {
 
-window.addEventListener('scroll', function (_e) {
       const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-  if (!isHeaderShrink && scrollTop > headerHeight) {
-    isHeaderShrink = true;
-    headerDom.classList.add('header-wrapper-shrink');
-    pageTemplateDom.classList.add('page-main-content-top-shrink');
-    sidebarToolsDom.classList.add('sidebar-tools-shrink');
 
-  } else if (isHeaderShrink && scrollTop <= headerHeight) {
+      if (!this.isHeaderShrink && scrollTop > this.headerHeight) {
-    isHeaderShrink = false;
+        this.isHeaderShrink = true;
-    headerDom.classList.remove('header-wrapper-shrink');
+        this.headerDom.classList.add('header-wrapper-shrink');
-    pageTemplateDom.classList.remove('page-main-content-top-shrink');
+        this.pageTemplateDom.classList.add('page-main-content-top-shrink');
-    sidebarToolsDom.classList.remove('sidebar-tools-shrink');
+        this.sidebarToolsDom.classList.add('sidebar-tools-shrink');
+
+      } else if (this.isHeaderShrink && scrollTop <= this.headerHeight) {
+        this.isHeaderShrink = false;
+        this.headerDom.classList.remove('header-wrapper-shrink');
+        this.pageTemplateDom.classList.remove('page-main-content-top-shrink');
+        this.sidebarToolsDom.classList.remove('sidebar-tools-shrink');
       }
+
+    },
+
+    initMenuBarButton() {
+      this.menuBarDom.addEventListener('click', () => {
+        this.headerDom.classList.toggle('header-drawer-show');
       });
+    },
 
-
+    initWindowMask() {
-menuBarDom.addEventListener('click', function (_e) {
+      this.windowMaskDom.addEventListener('click', () => {
-  headerDom.classList.toggle('header-drawer-show');
+        this.headerDom.classList.toggle('header-drawer-show');
       });
-
+    },
-windowMaskDom.addEventListener('click', function (_e) {
+  }
-  headerDom.classList.toggle('header-drawer-show');
+  ILS.utils.headerShrink.init();
+  ILS.utils.headerShrink.initMenuBarButton();
+  ILS.utils.headerShrink.initWindowMask();
 });
-
-

source/js/left-side-toggle.js

@@ -0,0 +1,38 @@
+window.addEventListener('DOMContentLoaded', () => {
+
+  ILS.utils.leftSideToggle = {
+
+    init() {
+      this.toggleBar = document.querySelector('.page-aside-toggle');
+      this.pageTopDom = document.querySelector('.page-main-content-top');
+      this.containerDom = document.querySelector('.page-container');
+      this.leftAsideDom = document.querySelector('.page-aside');
+      this.headerContentDom = document.querySelector('.header-wrapper .header-content');
+      this.mainContentDom = document.querySelector('.page-main-content-middle .main-content');
+      this.isOpenPageAside = false;
+    },
+
+    initToggleBarButton() {
+      if (this.toggleBar) {
+        this.toggleBar.addEventListener('click', () => {
+          this.isOpenPageAside = !this.isOpenPageAside;
+          this.changePageLayoutWhenOpenToggle(this.isOpenPageAside);
+        })
+      }
+    },
+
+    changePageLayoutWhenOpenToggle(isOpen) {
+      const pageAsideWidth = '258px';
+      this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
+      this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
+      this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
+      this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`;
+      this.headerContentDom.style.width = isOpen ? '76%' : '62%';
+      this.mainContentDom.style.width = isOpen ? '76%' : '62%';
+    },
+  }
+
+  ILS.utils.leftSideToggle.init();
+  ILS.utils.leftSideToggle.initToggleBarButton();
+
+});

source/js/main.js

@@ -1,47 +1,8 @@
 window.addEventListener('DOMContentLoaded', () => {
-  console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`);
+  // print theme info
+  ILS.utils.printThemeInfo();
 
-  pageAsideOpenToggle();
+  // init scroll
+  ILS.utils.initWindowScroll();
 
 });
-
-
-const pageAsideOpenToggle = () => {
-
-  const toggleDom = document.querySelector('.page-aside-toggle');
-  const pageTopDom = document.querySelector('.page-main-content-top');
-  const containerDom = document.querySelector('.page-container');
-  const leftAsideDom = document.querySelector('.page-aside');
-
-  const headerContentDom = document.querySelector('.header-wrapper .header-content');
-  const mainContentDom = document.querySelector('.page-main-content-middle .main-content');
-
-  let isOpen = false;
-  const openToggle = (isOpen) => {
-
-    const pageAsideWidth = '258px';
-    containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
-    pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
-    pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
-    leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`;
-
-    headerContentDom.style.width = isOpen ? '76%' : '62%';
-    mainContentDom.style.width = isOpen ? '76%' : '62%';
-
-  }
-
-
-  toggleDom.addEventListener('click', () => {
-    isOpen = !isOpen;
-    openToggle(isOpen);
-  })
-
-
-  window.utils = {
-    openToggle: () => {
-      isOpen = true;
-      openToggle(isOpen);
-    }
-  }
-
-}

source/js/post-toc.js

@@ -1,10 +0,0 @@
-window.addEventListener('DOMContentLoaded', () => {
-  const navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
-  const toggleDom = document.querySelector('.page-aside-toggle');
-
-  if (navItems.length) {
-    toggleDom.style.display = 'flex';
-    window.utils.openToggle();
-  }
-
-});

source/js/scroll-to-top.js

@@ -1,53 +0,0 @@
-(function () {
-  const scrollToTopDom = document.querySelector('.scroll-to-top');
-  const headerProgressDom = document.querySelector('.header-progress');
-  const headerWrapper = document.querySelector('.header-wrapper');
-
-  const backToTop = () => {
-    let scrollTopTimer = setInterval(function () {
-      let top = document.body.scrollTop || document.documentElement.scrollTop;
-      let speed = top / 2;
-      if (document.body.scrollTop !== 0) {
-        document.body.scrollTop -= speed;
-      } else {
-        document.documentElement.scrollTop -= speed;
-      }
-      if (top === 0) {
-        clearInterval(scrollTopTimer);
-      }
-    }, 30);
-  };
-
-  scrollToTopDom.addEventListener('click', () => {
-    backToTop();
-  });
-
-  let prevScroll = 0;
-  window.addEventListener('scroll', function (_e) {
-    // back to top & show scroll percent
-    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
-    const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
-    const clientHeight = window.innerHeight || document.documentElement.clientHeight;
-    const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
-    const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
-
-    if (percent === '0') {
-      scrollToTopDom.style.display = 'none';
-      headerProgressDom.style.display = 'none';
-    } else {
-      scrollToTopDom.style.display = 'flex';
-      headerProgressDom.style.display = 'block';
-      headerProgressDom.style.width = `${ProgressPercent}%`;
-    }
-
-    // hide header handle
-    const opacity = headerWrapper.style.opacity
-    if (scrollTop > prevScroll && scrollTop > 360) {
-      if (opacity > 0) headerWrapper.style.opacity = '0';
-    } else {
-      if (opacity < 1) headerWrapper.style.opacity = '1';
-    }
-    prevScroll = scrollTop
-  });
-
-})();

source/js/toc.js

@@ -1,37 +1,55 @@
 window.addEventListener('DOMContentLoaded', () => {
 
-  const articleToc = document.querySelector('.article-toc');
+  ILS.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
-  const postTocWrap = document.querySelector('.post-toc-wrap');
+  ILS.utils.articleToc_dom = document.querySelector('.article-toc');
-  const navItems = postTocWrap.querySelectorAll('.post-toc li');
+  ILS.utils.postTocWrap_dom = document.querySelector('.post-toc-wrap');
-  const headerWrapper = document.querySelector('.header-wrapper');
+  ILS.utils.headerWrapper_dom = document.querySelector('.header-wrapper');
 
-  if (navItems.length > 0) {
+  if (ILS.utils.navItems.length > 0) {
 
-    const sections = [...navItems].map(element => {
+    ILS.utils = {
-      let link = element.querySelector('a.nav-link');
+
-      // TOC item animation navigate.
+      ...ILS.utils,
-      link.addEventListener('click', event => {
+
+      findActiveIndexByTOC() {
+        if (!Array.isArray(ILS.utils.sections)) return;
+        let index = ILS.utils.sections.findIndex(element => {
+          return element && element.getBoundingClientRect().top - 20 > 0;
+        });
+        if (index === -1) {
+          index = ILS.utils.sections.length - 1;
+        } else if (index > 0) {
+          index--;
+        }
+        ILS.utils.activateNavByIndex(index);
+      },
+
+      registerSidebarTOC() {
+        ILS.utils.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => {
+          const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', ''));
+          element.addEventListener('click', event => {
             event.preventDefault();
-        let target = document.getElementById(event.currentTarget.getAttribute('href').replace('#', ''));
+            const offset = target.getBoundingClientRect().top + window.scrollY;
-        let offset = target.getBoundingClientRect().top + window.scrollY - 18;
             window.anime({
               targets: document.scrollingElement,
               duration: 500,
               easing: 'linear',
-          scrollTop: offset,
+              scrollTop: offset - 10,
               complete: function () {
                 setTimeout(() => {
-              if (headerWrapper.style.opacity !== '0') headerWrapper.style.opacity = '0'
+                  if (ILS.utils.headerWrapper_dom.style.opacity !== '0') ILS.utils.headerWrapper_dom.style.opacity = '0'
                 }, 100)
               }
             });
           });
-      return document.getElementById(link.getAttribute('href').replace('#', ''));
+          return target;
         });
+      },
 
+      activateNavByIndex: function (index) {
+        const target = document.querySelectorAll('.post-toc li a.nav-link')[index];
+        if (!target || target.classList.contains('active-current')) return;
 
-    function activateNavByIndex(target) {
-      if (target.classList.contains('active-current')) return;
         document.querySelectorAll('.post-toc .active').forEach(element => {
           element.classList.remove('active', 'active-current');
         });
@@ -42,66 +60,36 @@ window.addEventListener('DOMContentLoaded', () => {
           parent = parent.parentNode;
         }
         // Scrolling to center active TOC element if TOC content is taller then viewport.
+        const tocElement = document.querySelector('.post-toc-wrap');
         window.anime({
-        targets: postTocWrap,
+          targets: tocElement,
           duration: 200,
           easing: 'linear',
-        scrollTop: postTocWrap.scrollTop - (postTocWrap.offsetHeight / 2) + target.getBoundingClientRect().top - postTocWrap.getBoundingClientRect().top
+          scrollTop: tocElement.scrollTop - (tocElement.offsetHeight / 2) + target.getBoundingClientRect().top - tocElement.getBoundingClientRect().top
         });
+      },
+
+      showPageAsideWhenHasTOC() {
+        ILS.utils.leftSideToggle.toggleBar.style.display = 'flex';
+        ILS.utils.leftSideToggle.isOpenPageAside = true;
+        ILS.utils.leftSideToggle.changePageLayoutWhenOpenToggle(ILS.utils.leftSideToggle.isOpenPageAside);
+      }
     }
 
-    function findIndex(entries) {
+    ILS.utils.showPageAsideWhenHasTOC();
-      let index = 0;
+    ILS.utils.registerSidebarTOC();
-      let entry = entries[index];
-      if (entry.boundingClientRect.top > 0) {
-        index = sections.indexOf(entry.target);
-        return index === 0 ? 0 : index - 1;
-      }
-      for (; index < entries.length; index++) {
-        if (entries[index].boundingClientRect.top <= 0) {
-          entry = entries[index];
-        } else {
-          return sections.indexOf(entry.target);
-        }
-      }
-      return sections.indexOf(entry.target);
-    }
 
-    function createIntersectionObserver(marginTop) {
-
-      marginTop = Math.floor(marginTop + 10000);
-      let intersectionObserver = new IntersectionObserver((entries, observe) => {
-        let scrollHeight = document.documentElement.scrollHeight + 100;
-        if (scrollHeight > marginTop) {
-          observe.disconnect();
-          createIntersectionObserver(scrollHeight);
-          return;
-        }
-        let index = findIndex(entries);
-        activateNavByIndex(navItems[index]);
-      }, {
-        rootMargin: marginTop + 'px 0px -100% 0px',
-        threshold: 0
-      });
-      sections.forEach(element => {
-        element && intersectionObserver.observe(element);
-      });
-    }
-
-    createIntersectionObserver(document.documentElement.scrollHeight);
 
   } else {
 
-    if (postTocWrap) {
+    if (ILS.utils.postTocWrap_dom) {
-      postTocWrap.innerHTML = '';
+      ILS.utils.postTocWrap_dom.innerHTML = '';
-      postTocWrap.style.display = 'none';
+      ILS.utils.postTocWrap_dom.style.display = 'none';
     }
 
-    if (articleToc) {
+    if (ILS.utils.articleToc_dom) {
-      articleToc.style.display = 'none';
+      ILS.utils.articleToc_dom.style.display = 'none';
     }
   }
-
-
 });
 

source/js/toggle-mode.js

@@ -1,70 +0,0 @@
-/**
- * 日间/夜间 模式切换
- */
-const localStorageKey = 'MAGIC'
-const modeToggleBtn = document.querySelector('.mode-toggle');
-const iconDom = modeToggleBtn.querySelector('i');
-const articleContent = document.querySelector('.main-content');
-const modeConfig = JSON.parse(localStorage.getItem(localStorageKey));
-if (modeConfig) {
-
-    if (modeConfig.prefersColorScheme === 'dark') {
-
-        if (modeConfig.isDark) {
-            document.body.classList.remove('light-mode');
-            articleContent.classList.remove('night-code-theme');
-            iconDom.className = 'fa fa-lightbulb-o';
-        } else {
-            iconDom.className = 'fa fa-moon-o';
-            document.body.classList.add('light-mode');
-            articleContent.classList.add('night-code-theme');
-        }
-
-    } else {
-
-        if (modeConfig.isDark) {
-            document.body.classList.remove('dark-mode');
-            articleContent.classList.remove('night-code-theme');
-            iconDom.className = 'fa fa-moon-o';
-        } else {
-            document.body.classList.add('dark-mode');
-            iconDom.className = 'fa fa-lightbulb-o';
-            articleContent.classList.add('night-code-theme');
-        }
-
-    }
-
-}
-
-const setItemUtil = (modeClass, prefersColorScheme) => {
-    document.body.classList.toggle(modeClass);
-    const isDark = document.body.className.indexOf(modeClass) === -1;
-
-    if (isDark) {
-        iconDom.className = 'fa fa-moon-o';
-        articleContent.classList.remove('night-code-theme');
-    } else {
-        iconDom.className = 'fa fa-lightbulb-o';
-        articleContent.classList.add('night-code-theme');
-    }
-    localStorage.setItem(localStorageKey, JSON.stringify(
-        {
-            prefersColorScheme: prefersColorScheme,
-            isDark: isDark
-        }
-    ));
-
-
-};
-
-modeToggleBtn.addEventListener('click', function (e) {
-
-    if (
-        window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches
-    ) {
-        setItemUtil('light-mode', 'dark');
-    } else {
-        setItemUtil('dark-mode', 'light');
-    }
-
-});

source/js/utils.js

@@ -0,0 +1,60 @@
+ILS.utils = {
+  printThemeInfo() {
+    console.log(`${CONFIG.themeInfo.name} v${CONFIG.themeInfo.version}`);
+  }
+}
+
+ILS.utils = {
+
+  ...ILS.utils,
+
+  headerProgress_dom: document.querySelector('.header-progress'),
+  headerWrapper_dom: document.querySelector('.header-wrapper'),
+
+  // Scroll Style Handle
+  prevScrollValue: 0,
+  styleHandleWhenScroll() {
+    const scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
+    const scrollHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
+    const clientHeight = window.innerHeight || document.documentElement.clientHeight;
+    const percent = Math.round(scrollTop / (scrollHeight - clientHeight) * 100).toFixed(0);
+    const ProgressPercent = (scrollTop / (scrollHeight - clientHeight) * 100).toFixed(3);
+
+    if (CONFIG.back2top.enable && ILS.utils.back2TopButton_dom) {
+      ILS.utils.back2TopButton_dom.style.display = percent === '0' ? 'none' : 'flex';
+    }
+
+    if (ILS.utils.headerProgress_dom) {
+      ILS.utils.headerProgress_dom.style.display = percent === '0' ? 'none' : 'block';
+      ILS.utils.headerProgress_dom.style.width = `${ProgressPercent}%`;
+    }
+
+    // hide header handle
+    const opacity = ILS.utils.headerWrapper_dom.style.opacity;
+    if (scrollTop > ILS.utils.prevScrollValue && scrollTop > 500) {
+      if (opacity !== '0') ILS.utils.headerWrapper_dom.style.opacity = '0';
+    } else {
+      if (opacity !== '1') ILS.utils.headerWrapper_dom.style.opacity = '1';
+    }
+    ILS.utils.prevScrollValue = scrollTop;
+  },
+
+  // 初始 window scroll 事件
+  initWindowScroll() {
+    window.addEventListener('scroll', function (_e) {
+      // style handle when scroll
+      ILS.utils.styleHandleWhenScroll();
+
+      // TOC scroll handle
+      if (CONFIG.toc.enable && ILS.utils.hasOwnProperty('findActiveIndexByTOC')) {
+        ILS.utils.findActiveIndexByTOC();
+      }
+
+      // header shrink
+      ILS.utils.headerShrink.headerShrink();
+    });
+  },
+}
+
+
+