hexo-theme-solitude 2.1.6 → 2.1.8

package/source/js/main.js

@@ -7,15 +7,16 @@ const sidebarFn = () => {
   const toggleMobileSidebar = (isOpen) => {
     utils.sidebarPaddingR();
     $body.style.overflow = isOpen ? 'hidden' : '';
-    $body.style.paddingRight = isOpen ? '' : '';
     utils[isOpen ? 'fadeIn' : 'fadeOut']($menuMask, 0.5);
-    $mobileSidebarMenus.classList[isOpen ? 'add' : 'remove']('open');
-  }
+    $mobileSidebarMenus.classList.toggle('open', isOpen);
+  };
+
   const closeMobileSidebar = () => {
     if ($mobileSidebarMenus.classList.contains('open')) {
       toggleMobileSidebar(false);
     }
-  }
+  };
+
   $toggleMenu.addEventListener('click', () => toggleMobileSidebar(true));
   $menuMask.addEventListener('click', closeMobileSidebar);
 
@@ -25,72 +26,82 @@ const sidebarFn = () => {
     }
     sco.refreshWaterFall();
   });
-}
+};
 
 const scrollFn = () => {
-  let initTop = 0;
+  const $rightside = document.getElementById('rightside');
   const $header = document.getElementById('page-header');
-  const $rightside = document.getElementById('rightside') || null;
-  const throttledScroll = utils.throttle(() => {
-    initThemeColor();
-    const currentTop = window.scrollY || document.documentElement.scrollTop;
-    const isDown = scrollDirection(currentTop);
+  let initTop = 0;
+
+  const updateHeaderAndRightside = (isDown, currentTop) => {
     if (currentTop > 0) {
-      if (isDown) {
-        if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible');
-      } else {
-        if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible');
-      }
+      $header.classList.toggle('nav-visible', !isDown);
       $header.classList.add('nav-fixed');
-      $rightside && ($rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px);');
+      if ($rightside) {
+        $rightside.style.opacity = '0.8';
+        $rightside.style.transform = 'translateX(-58px)';
+      }
     } else {
       $header.classList.remove('nav-fixed', 'nav-visible');
-      $rightside && ($rightside.style.cssText = "opacity: ''; transform: ''");
+      if ($rightside) {
+        $rightside.style.opacity = '';
+        $rightside.style.transform = '';
+      }
     }
+  };
+
+  const throttledScroll = utils.throttle(() => {
+    initThemeColor();
+    const currentTop = window.scrollY || document.documentElement.scrollTop;
+    const isDown = currentTop > initTop;
+    initTop = currentTop;
+    updateHeaderAndRightside(isDown, currentTop);
   }, 200);
+
   window.addEventListener('scroll', (e) => {
     throttledScroll(e);
     if (window.scrollY === 0) {
-      $header.classList.remove('nav-fixed', 'nav-visible');
-      $rightside && ($rightside.style.cssText = "opacity: ''; transform: ''");
+        $header.classList.remove('nav-fixed', 'nav-visible');
+        if ($rightside) {
+          $rightside.style.cssText = "opacity: ''; transform: ''";
+        }
     }
   });
+};
 
-  function scrollDirection(currentTop) {
-    const result = currentTop > initTop;
-    initTop = currentTop;
-    return result;
-  }
-}
 const percent = () => {
   const docEl = document.documentElement;
   const body = document.body;
   const scrollPos = window.pageYOffset || docEl.scrollTop;
   const totalScrollableHeight = Math.max(body.scrollHeight, docEl.scrollHeight, body.offsetHeight, docEl.offsetHeight, body.clientHeight, docEl.clientHeight) - docEl.clientHeight;
   const scrolledPercent = Math.round((scrollPos / totalScrollableHeight) * 100);
-  const navToTop = document.querySelector("#nav-totop") || null;
-  const rsToTop = document.querySelector(".rs_show .top i") || null;
+  const navToTop = document.querySelector("#nav-totop");
+  const rsToTop = document.querySelector(".rs_show .top i");
   const percentDisplay = document.querySelector("#percent");
   const isNearEnd = (window.scrollY + docEl.clientHeight) >= (document.getElementById("post-comment") || document.getElementById("footer")).offsetTop;
-  navToTop && navToTop.classList.toggle("long", isNearEnd || scrolledPercent > 90);
-  rsToTop && rsToTop.classList.toggle("show", isNearEnd || scrolledPercent > 90);
-  percentDisplay.textContent = isNearEnd || scrolledPercent > 90 ? navToTop ? GLOBAL_CONFIG.lang.backtop : '' : scrolledPercent;
+
+  navToTop?.classList.toggle("long", isNearEnd || scrolledPercent > 90);
+  rsToTop?.classList.toggle("show", isNearEnd || scrolledPercent > 90);
+  percentDisplay.textContent = isNearEnd || scrolledPercent > 90 ? (navToTop ? GLOBAL_CONFIG.lang.backtop : '') : scrolledPercent;
+
   document.querySelectorAll(".needEndHide").forEach(item => item.classList.toggle("hide", totalScrollableHeight - scrollPos < 100));
-}
+};
+
 const showTodayCard = () => {
   const el = document.getElementById('todayCard');
   const topGroup = document.querySelector('.topGroup');
   topGroup?.addEventListener('mouseleave', () => el?.classList.remove('hide'));
-}
+};
+
 const initObserver = () => {
   const commentElement = document.getElementById("post-comment");
   const paginationElement = document.getElementById("pagination");
   const commentBarrageElement = document.querySelector(".comment-barrage");
+
   if (commentElement && paginationElement) {
     const observer = new IntersectionObserver(entries => {
       entries.forEach(entry => {
-        const action = entry.isIntersecting ? 'add' : 'remove';
-        paginationElement.classList[action]("show-window");
+        paginationElement.classList.toggle("show-window", entry.isIntersecting);
         if (GLOBAL_CONFIG.comment.commentBarrage) {
           commentBarrageElement.style.bottom = entry.isIntersecting ? "-200px" : "0px";
         }
@@ -99,9 +110,11 @@ const initObserver = () => {
     observer.observe(commentElement);
   }
 };
+
 const addCopyright = () => {
   if (!GLOBAL_CONFIG.copyright) return;
-  const {limit, author, link, source, info} = GLOBAL_CONFIG.copyright;
+  const { limit, author, link, source, info } = GLOBAL_CONFIG.copyright;
+
   document.body.addEventListener('copy', (e) => {
     e.preventDefault();
     const copyText = window.getSelection().toString();
@@ -109,10 +122,11 @@ const addCopyright = () => {
     e.clipboardData.setData('text', text);
   });
 };
+
 const asideStatus = () => {
   const status = utils.saveToLocal.get('aside-status');
   document.documentElement.classList.toggle('hide-aside', status === 'hide');
-}
+};
 
 function initThemeColor() {
   const currentTop = window.scrollY || document.documentElement.scrollTop;
@@ -131,11 +145,10 @@ function applyThemeColor(color) {
 }
 
 const handleThemeChange = mode => {
-  const themeChange = window.globalFn?.themeChange || {}
-  for (let key in themeChange) {
-    themeChange[key](mode)
-  }
-}
+  const themeChange = window.globalFn?.themeChange || {};
+  Object.values(themeChange).forEach(fn => fn(mode));
+};
+
 const sco = {
   lastSayHello: "",
   wasPageHidden: false,
@@ -144,10 +157,7 @@ const sco = {
     const targetElement = document.getElementById(elementId);
     if (targetElement) {
       const targetPosition = targetElement.getBoundingClientRect().top + window.pageYOffset - 80;
-      window.scroll({
-        top: targetPosition,
-        behavior: "smooth"
-      });
+      window.scroll({ top: targetPosition, behavior: "smooth" });
     }
   },
   musicToggle(isMeting = true) {
@@ -159,25 +169,18 @@ const sco = {
     const $console = document.getElementById('consoleMusic');
     const $rmText = document.querySelector('#menu-music-toggle span');
     const $rmIcon = document.querySelector('#menu-music-toggle i');
-    
+
     this.musicPlaying = !this.musicPlaying;
     $music.classList.toggle("playing", this.musicPlaying);
     $music.classList.toggle("stretch", this.musicPlaying);
     $console?.classList.toggle("on", this.musicPlaying);
-    
-    if (this.musicPlaying) {
-      if (typeof rm !== 'undefined' && rm?.menuItems.music[0]) {
-        $rmText.textContent = GLOBAL_CONFIG.right_menu.music.stop;
-        $rmIcon.className = 'solitude fas fa-pause';
-      }
-    } else {
-      if (typeof rm !== 'undefined' && rm?.menuItems.music[0]) {
-        $rmText.textContent = GLOBAL_CONFIG.right_menu.music.start;
-        $rmIcon.className = 'solitude fas fa-play';
-      }
+
+    if (typeof rm !== 'undefined' && rm?.menuItems.music[0]) {
+      $rmText.textContent = this.musicPlaying ? GLOBAL_CONFIG.right_menu.music.stop : GLOBAL_CONFIG.right_menu.music.start;
+      $rmIcon.className = this.musicPlaying ? 'solitude fas fa-pause' : 'solitude fas fa-play';
     }
 
-    if(isMeting){
+    if (isMeting) {
       this.musicPlaying ? $meting.aplayer.play() : $meting.aplayer.pause();
     }
   },
@@ -185,7 +188,7 @@ const sco = {
     const $music = document.querySelector('#nav-music');
     const $name = document.querySelector('#nav-music .aplayer-music');
     const $button = document.querySelector('#nav-music .aplayer-button');
-    
+
     $name?.addEventListener('click', () => {
       $music.classList.toggle("stretch");
     });
@@ -193,18 +196,19 @@ const sco = {
     $button?.addEventListener('click', () => {
       this.musicToggle(false);
     });
-    
+
     this.isMusicBind = true;
   },
   switchCommentBarrage() {
-    let commentBarrageElement = document.querySelector(".comment-barrage");
-    let consoleCommentBarrage = document.querySelector("#consoleCommentBarrage");
+    const commentBarrageElement = document.querySelector(".comment-barrage");
+    const consoleCommentBarrage = document.querySelector("#consoleCommentBarrage");
     if (!commentBarrageElement) return;
+
     const isDisplayed = window.getComputedStyle(commentBarrageElement).display === "flex";
     commentBarrageElement.style.display = isDisplayed ? "none" : "flex";
-    consoleCommentBarrage && consoleCommentBarrage.classList.toggle("on", !isDisplayed);
+    consoleCommentBarrage?.classList.toggle("on", !isDisplayed);
     utils.saveToLocal.set("commentBarrageSwitch", !isDisplayed, .2);
-    rm?.menuItems.barrage && rm.barrage(isDisplayed)
+    rm?.menuItems.barrage && rm.barrage(isDisplayed);
   },
   switchHideAside() {
     const htmlClassList = document.documentElement.classList;
@@ -266,15 +270,17 @@ const sco = {
     document.querySelectorAll('.waterfall').forEach(el => observer.observe(el));
   },
   addRuntime() {
-    let el = document.getElementById('runtimeshow');
-    el && GLOBAL_CONFIG.runtime && (el.innerText = utils.timeDiff(new Date(GLOBAL_CONFIG.runtime), new Date()) + GLOBAL_CONFIG.lang.day);
+    const el = document.getElementById('runtimeshow');
+    if (el && GLOBAL_CONFIG.runtime) {
+      el.innerText = utils.timeDiff(new Date(GLOBAL_CONFIG.runtime), new Date()) + GLOBAL_CONFIG.lang.day;
+    }
   },
   toTalk(txt) {
     const inputs = ["#wl-edit", ".el-textarea__inner", "#veditor", ".atk-textarea"];
     inputs.forEach(selector => {
       const el = document.querySelector(selector);
       if (el) {
-        el.dispatchEvent(new Event('input', {bubble: true, cancelable: true}));
+        el.dispatchEvent(new Event('input', { bubble: true, cancelable: true }));
         el.value = '> ' + txt.replace(/\n/g, '\n> ') + '\n\n';
         utils.scrollToDest(utils.getEleTop(document.getElementById('post-comment')), 300);
         el.focus();
@@ -297,9 +303,11 @@ const sco = {
     }
   },
   addPhotoFigcaption() {
-    document.querySelectorAll('#article-container img:not(.gallery-item img)').forEach(image => {
+    document.querySelectorAll('.article-container img:not(.gallery-item img)').forEach(image => {
       const captionText = image.getAttribute('alt');
-      captionText && image.insertAdjacentHTML('afterend', `<div class="img-alt is-center">${captionText}</div>`);
+      if (captionText) {
+        image.insertAdjacentHTML('afterend', `<div class="img-alt is-center">${utils.escapeHtml(captionText)}</div>`);
+      }
     });
   },
   scrollToComment: () => utils.scrollToDest(utils.getEleTop(document.getElementById('post-comment')), 300),
@@ -320,22 +328,16 @@ const sco = {
         }
         return null;
       };
-      const nick = localData ? (localData.nick ? localData.nick : localData.display_name) : null;
-
-      let prefix;
-      if (this.wasPageHidden) {
-        prefix = GLOBAL_CONFIG.aside.sayhello3.back + nick;
-        this.wasPageHidden = false;
-      } else {
-        prefix = GLOBAL_CONFIG.aside.sayhello3.prefix + nick;
-      }
+      const nick = localData ? (localData.nick || localData.display_name) : null;
+
+      const prefix = this.wasPageHidden ? GLOBAL_CONFIG.aside.sayhello3.back + nick : GLOBAL_CONFIG.aside.sayhello3.prefix + nick;
 
       const greetings = [
-        {start: 0, end: 5, text: nick ? prefix : lang.goodnight},
-        {start: 6, end: 10, text: nick ? prefix : lang.morning},
-        {start: 11, end: 14, text: nick ? prefix : lang.noon},
-        {start: 15, end: 18, text: nick ? prefix : lang.afternoon},
-        {start: 19, end: 24, text: nick ? prefix : lang.night},
+        { start: 0, end: 5, text: nick ? prefix : lang.goodnight },
+        { start: 6, end: 10, text: nick ? prefix : lang.morning },
+        { start: 11, end: 14, text: nick ? prefix : lang.noon },
+        { start: 15, end: 18, text: nick ? prefix : lang.afternoon },
+        { start: 19, end: 24, text: nick ? prefix : lang.night },
       ];
       const greeting = greetings.find(g => hours >= g.start && hours <= g.end);
       el.innerText = greeting.text;
@@ -375,11 +377,7 @@ const sco = {
     if (scrollBar) {
       const isScrollBarAtEnd = () => scrollBar.scrollLeft + scrollBar.clientWidth >= scrollBar.scrollWidth - 8;
       const scroll = () => {
-        if (isScrollBarAtEnd()) {
-          scrollBar.scroll({left: 0, behavior: "smooth"});
-        } else {
-          scrollBar.scrollBy({left: scrollBar.clientWidth, behavior: "smooth"});
-        }
+        scrollBar.scroll({ left: isScrollBarAtEnd() ? 0 : scrollBar.clientWidth, behavior: "smooth" });
       };
       scrollBar.addEventListener("scroll", () => {
         clearTimeout(this.timeoutId);
@@ -395,7 +393,7 @@ const sco = {
     document.getElementById("more-tags-btn")?.remove();
   },
   listenToPageInputPress() {
-    const toGroup = document.querySelector(".toPageGroup")
+    const toGroup = document.querySelector(".toPageGroup");
     const pageText = document.getElementById("toPageText");
     if (!pageText) return;
     const pageButton = document.getElementById("toPageButton");
@@ -403,7 +401,7 @@ const sco = {
     const lastPageNumber = +pageNumbers[pageNumbers.length - 1].textContent;
     if (!pageText || lastPageNumber === 1) {
       toGroup.style.display = "none";
-      return
+      return;
     }
     pageText.addEventListener("keydown", (event) => {
       if (event.keyCode === 13) {
@@ -420,7 +418,9 @@ const sco = {
   },
   addNavBackgroundInit() {
     const scrollTop = document.documentElement.scrollTop;
-    (scrollTop !== 0) && document.getElementById("page-header").classList.add("nav-fixed", "nav-visible");
+    if (scrollTop !== 0) {
+      document.getElementById("page-header").classList.add("nav-fixed", "nav-visible");
+    }
   },
   toPage() {
     const pageNumbers = document.querySelectorAll(".page-number");
@@ -459,178 +459,185 @@ const sco = {
       const itemRect = owoItem.getBoundingClientRect();
       owoBig.style.left = `${itemRect.left - (owoBig.offsetWidth / 4)}px`;
       owoBig.style.top = `${itemRect.top}px`;
-    }
+    };
     document.addEventListener('mouseover', showOwoBig);
     document.addEventListener('mouseout', hideOwoBig);
   },
   changeTimeFormat(selector) {
     selector.forEach(item => {
-      const timeVal = item.getAttribute('datetime')
-      item.textContent = utils.diffDate(timeVal, true)
-      item.style.display = 'inline'
-    })
+      const timeVal = item.getAttribute('datetime');
+      item.textContent = utils.diffDate(timeVal, true);
+      item.style.display = 'inline';
+    });
   },
   switchComments() {
-    const switchBtn = document.getElementById('switch-btn')
-    if (!switchBtn) return
-    let switchDone = false
-    const commentContainer = document.getElementById('post-comment')
+    const switchBtn = document.getElementById('switch-btn');
+    if (!switchBtn) return;
+    let switchDone = false;
+    const commentContainer = document.getElementById('post-comment');
     const handleSwitchBtn = () => {
-      commentContainer.classList.toggle('move')
+      commentContainer.classList.toggle('move');
       if (!switchDone && typeof loadTwoComment === 'function') {
-        switchDone = true
-        loadTwoComment()
+        switchDone = true;
+        loadTwoComment();
       }
-    }
-    utils.addEventListenerPjax(switchBtn, 'click', handleSwitchBtn)
+    };
+    utils.addEventListenerPjax(switchBtn, 'click', handleSwitchBtn);
   }
 };
+
 const addHighlight = () => {
   const highlight = GLOBAL_CONFIG.highlight;
   if (!highlight) return;
-  const {copy, expand, limit, syntax} = highlight;
+  const { copy, expand, limit, syntax } = highlight;
   const $isPrismjs = syntax === 'prismjs';
   const $isShowTool = highlight.enable || copy || expand || limit;
-  const expandClass = !expand === true ? 'closed' : ''
-  const $syntaxHighlight = syntax === 'highlight.js' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
-  if (!(($isShowTool || limit) && $syntaxHighlight.length)) return
+  const expandClass = expand ? '' : 'closed';
+  const $syntaxHighlight = syntax === 'highlight.js' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]');
+  
+  if (!(($isShowTool || limit) && $syntaxHighlight.length)) return;
+
   const copyEle = copy ? `<i class="solitude fas fa-copy copy-button"></i>` : '<i></i>';
   const expandEle = `<i class="solitude fas fa-angle-down expand"></i>`;
   const limitEle = limit ? `<i class="solitude fas fa-angles-down"></i>` : '<i></i>';
-  const alertInfo = (ele, text) => utils.snackbarShow(text, false, 2000)
+  
+  const alertInfo = (ele, text) => utils.snackbarShow(text, false, 2000);
+  
   const copyFn = (e) => {
-    const $buttonParent = e.parentNode
-    $buttonParent.classList.add('copy-true')
-    const selection = window.getSelection()
-    const range = document.createRange()
-    const preCodeSelector = $isPrismjs ? 'pre code' : 'table .code pre'
-    range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0])
-    selection.removeAllRanges()
-    selection.addRange(range)
-    document.execCommand('copy')
-    alertInfo(e.lastChild, GLOBAL_CONFIG.lang.copy.success)
-    selection.removeAllRanges()
-    $buttonParent.classList.remove('copy-true')
-  }
-  const expandClose = (e) => e.classList.toggle('closed')
+    const $buttonParent = e.parentNode;
+    $buttonParent.classList.add('copy-true');
+    const selection = window.getSelection();
+    const range = document.createRange();
+    const preCodeSelector = $isPrismjs ? 'pre code' : 'table .code pre';
+    range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0]);
+    selection.removeAllRanges();
+    selection.addRange(range);
+    document.execCommand('copy');
+    alertInfo(e.lastChild, GLOBAL_CONFIG.lang.copy.success);
+    selection.removeAllRanges();
+    $buttonParent.classList.remove('copy-true');
+  };
+
+  const expandClose = (e) => e.classList.toggle('closed');
   const shrinkEle = function () {
-    this.classList.toggle('expand-done')
-  }
+    this.classList.toggle('expand-done');
+  };
+
   const ToolsFn = function (e) {
-    const $target = e.target.classList
-    if ($target.contains('expand')) expandClose(this)
-    else if ($target.contains('copy-button')) copyFn(this)
-  }
+    const $target = e.target.classList;
+    if ($target.contains('expand')) expandClose(this);
+    else if ($target.contains('copy-button')) copyFn(this);
+  };
+
   const createEle = (lang, item, service) => {
-    const fragment = document.createDocumentFragment()
+    const fragment = document.createDocumentFragment();
     if ($isShowTool) {
-      const captionItem = item.querySelector('figcaption')
-      let caption = ''
+      const captionItem = item.querySelector('figcaption');
+      let caption = '';
       if (captionItem) {
-        caption = `<div class="caption">${captionItem.innerHTML}</div>`
-        item.removeChild(captionItem)
+        caption = `<div class="caption">${captionItem.innerHTML}</div>`;
+        item.removeChild(captionItem);
       }
-      const hlTools = document.createElement('div')
-      hlTools.className = `highlight-tools ${expandClass}`
-      hlTools.innerHTML = expandEle + lang + caption + copyEle
-      utils.addEventListenerPjax(hlTools, 'click', ToolsFn)
-      fragment.appendChild(hlTools)
+      const hlTools = document.createElement('div');
+      hlTools.className = `highlight-tools ${expandClass}`;
+      hlTools.innerHTML = expandEle + lang + caption + copyEle;
+      utils.addEventListenerPjax(hlTools, 'click', ToolsFn);
+      fragment.appendChild(hlTools);
     }
     if (limit && item.offsetHeight > limit + 30) {
-      const ele = document.createElement('div')
-      ele.className = 'code-expand-btn'
-      ele.innerHTML = limitEle
-      utils.addEventListenerPjax(ele, 'click', shrinkEle)
-      fragment.appendChild(ele)
+      const ele = document.createElement('div');
+      ele.className = 'code-expand-btn';
+      ele.innerHTML = limitEle;
+      utils.addEventListenerPjax(ele, 'click', shrinkEle);
+      fragment.appendChild(ele);
     }
     if (service === 'hl') {
-      item.insertBefore(fragment, item.firstChild)
+      item.insertBefore(fragment, item.firstChild);
     } else {
-      item.parentNode.insertBefore(fragment, item)
+      item.parentNode.insertBefore(fragment, item);
     }
-  }
+  };
+
   if ($isPrismjs) {
     $syntaxHighlight.forEach(item => {
-      const langName = item.getAttribute('data-language') || 'Code'
-      const highlightLangEle = `<div class="code-lang">${langName}</div>`
-      utils.wrap(item, 'figure', {
-        class: 'highlight'
-      })
-      createEle(highlightLangEle, item)
-    })
+      const langName = item.getAttribute('data-language') || 'Code';
+      const highlightLangEle = `<div class="code-lang">${utils.escapeHtml(langName)}</div>`;
+      utils.wrap(item, 'figure', { class: 'highlight' });
+      createEle(highlightLangEle, item);
+    });
   } else {
     $syntaxHighlight.forEach(item => {
-      let langName = item.getAttribute('class').split(' ')[1]
-      if (langName === 'plain' || langName === undefined) langName = 'Code'
-      const highlightLangEle = `<div class="code-lang">${langName}</div>`
-      createEle(highlightLangEle, item, 'hl')
-    })
+      let langName = item.getAttribute('class').split(' ')[1];
+      if (langName === 'plain' || langName === undefined) langName = 'Code';
+      const highlightLangEle = `<div class="code-lang">${utils.escapeHtml(langName)}</div>`;
+      createEle(highlightLangEle, item, 'hl');
+    });
   }
-}
+};
 
 class toc {
   static init() {
-    const tocContainer = document.getElementById('card-toc')
+    const tocContainer = document.getElementById('card-toc');
     if (!tocContainer || !tocContainer.querySelector('.toc a')) {
-      tocContainer.style.display = 'none'
-      return
+      tocContainer.style.display = 'none';
+      return;
     }
-    const el = document.querySelectorAll('.toc a')
+    const el = document.querySelectorAll('.toc a');
     el.forEach((e) => {
       e.addEventListener('click', (event) => {
-        event.preventDefault()
-        utils.scrollToDest(utils.getEleTop(document.getElementById(decodeURI((event.target.className === 'toc-text' ? event.target.parentNode.hash : event.target.hash).replace('#', '')))), 300)
-      })
-    })
-    this.active(el)
+        event.preventDefault();
+        utils.scrollToDest(utils.getEleTop(document.getElementById(decodeURI((event.target.className === 'toc-text' ? event.target.parentNode.hash : event.target.hash).replace('#', '')))), 300);
+      });
+    });
+    this.active(el);
   }
 
   static active(toc) {
-    const $article = document.getElementById('article-container')
-    const $tocContent = document.getElementById('toc-content')
-    const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6')
-    let detectItem = ''
-
-    function autoScroll(el) {
-      const activePosition = el.getBoundingClientRect().top
-      const sidebarScrollTop = $tocContent.scrollTop
+    const $article = document.querySelector('.article-container');
+    const $tocContent = document.getElementById('toc-content');
+    const list = $article.querySelectorAll('h1,h2,h3,h4,h5,h6');
+    let detectItem = '';
+
+    const autoScroll = (el) => {
+      const activePosition = el.getBoundingClientRect().top;
+      const sidebarScrollTop = $tocContent.scrollTop;
       if (activePosition > (document.documentElement.clientHeight - 100)) {
-        $tocContent.scrollTop = sidebarScrollTop + 150
+        $tocContent.scrollTop = sidebarScrollTop + 150;
       }
       if (activePosition < 100) {
-        $tocContent.scrollTop = sidebarScrollTop - 150
+        $tocContent.scrollTop = sidebarScrollTop - 150;
       }
-    }
+    };
 
-    function findHeadPosition(top) {
-      if (top === 0) return false
-      let currentIndex = ''
-      list.forEach(function (ele, index) {
+    const findHeadPosition = (top) => {
+      if (top === 0) return false;
+      let currentIndex = '';
+      list.forEach((ele, index) => {
         if (top > utils.getEleTop(ele) - 80) {
-          currentIndex = index
+          currentIndex = index;
         }
-      })
-      if (detectItem === currentIndex) return
-      detectItem = currentIndex
+      });
+      if (detectItem === currentIndex) return;
+      detectItem = currentIndex;
       document.querySelectorAll('.toc .active').forEach((i) => {
-        i.classList.remove('active')
-      })
-      const activeitem = toc[detectItem]
+        i.classList.remove('active');
+      });
+      const activeitem = toc[detectItem];
       if (activeitem) {
-        let parent = toc[detectItem].parentNode
-        activeitem.classList.add('active')
-        autoScroll(activeitem)
+        let parent = toc[detectItem].parentNode;
+        activeitem.classList.add('active');
+        autoScroll(activeitem);
         for (; !parent.matches('.toc'); parent = parent.parentNode) {
-          if (parent.matches('li')) parent.classList.add('active')
+          if (parent.matches('li')) parent.classList.add('active');
         }
       }
-    }
+    };
 
-    window.tocScrollFn = utils.throttle(function () {
-      const currentTop = window.scrollY || document.documentElement.scrollTop
-      findHeadPosition(currentTop)
-    }, 100)
-    window.addEventListener('scroll', tocScrollFn)
+    window.tocScrollFn = utils.throttle(() => {
+      const currentTop = window.scrollY || document.documentElement.scrollTop;
+      findHeadPosition(currentTop);
+    }, 100);
+    window.addEventListener('scroll', tocScrollFn);
   }
 }
 
@@ -641,20 +648,17 @@ class tabs {
   }
 
   static clickFnOfTabs() {
-    document.querySelectorAll('#article-container .tab > button').forEach((item) => {
+    document.querySelectorAll('.article-container .tab > button').forEach((item) => {
       item.addEventListener('click', function () {
-        const that = this;
-        const $tabItem = that.parentNode;
+        const $tabItem = this.parentNode;
         if (!$tabItem.classList.contains('active')) {
           const $tabContent = $tabItem.parentNode.nextElementSibling;
           const $siblings = utils.siblings($tabItem, '.active')[0];
           $siblings && $siblings.classList.remove('active');
           $tabItem.classList.add('active');
-          const tabId = that.getAttribute('data-href').replace('#', '');
-          const childList = [...$tabContent.children];
-          childList.forEach((item) => {
-            if (item.id === tabId) item.classList.add('active');
-            else item.classList.remove('active');
+          const tabId = this.getAttribute('data-href').replace('#', '');
+          [...$tabContent.children].forEach((item) => {
+            item.classList.toggle('active', item.id === tabId);
           });
         }
       });
@@ -662,22 +666,20 @@ class tabs {
   }
 
   static backToTop() {
-    document.querySelectorAll('#article-container .tabs .tab-to-top').forEach((item) => {
+    document.querySelectorAll('.article-container .tabs .tab-to-top').forEach((item) => {
       item.addEventListener('click', function () {
-        utils.scrollToDest(utils.getEleTop(item.parentElement.parentElement.parentNode), 300);
+        utils.scrollToDest(utils.getEleTop(this.parentElement.parentElement.parentNode), 300);
       });
     });
   }
 
   static lureAddListener() {
     if (!GLOBAL_CONFIG.lure) return;
-    let title = document.title;
+    const title = document.title;
     document.addEventListener('visibilitychange', () => {
-      const {lure} = GLOBAL_CONFIG;
-      if (document.visibilityState === 'hidden') {
-        document.title = lure.jump;
-      } else if (document.visibilityState === 'visible') {
-        document.title = lure.back;
+      const { lure } = GLOBAL_CONFIG;
+      document.title = document.visibilityState === 'hidden' ? lure.jump : lure.back;
+      if (document.visibilityState === 'visible') {
         setTimeout(() => {
           document.title = title;
         }, 2000);
@@ -686,7 +688,7 @@ class tabs {
   }
 
   static expireAddListener() {
-    const {expire} = GLOBAL_CONFIG;
+    const { expire } = GLOBAL_CONFIG;
     if (!expire) return;
     const list = document.querySelectorAll('.post-meta-date time');
     const post_date = list.length ? list[list.length - 1] : document.querySelector('.datatime');
@@ -705,72 +707,74 @@ const scrollFnToDo = () => {
   const { toc } = PAGE_CONFIG;
 
   if (toc) {
-    const $cardTocLayout = document.getElementById('card-toc')
-      $cardToc = $cardTocLayout.querySelector('.toc-content')
-      $tocLink = $cardToc.querySelectorAll('.toc-link')
-      $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
-      isExpand = $cardToc.classList.contains('is-expand')
-
-      // toc percentage
-      const tocItemClickFn = e => {
-        const target = e.target.closest('.toc-link')
-        if (!target) return
-
-        e.preventDefault()
-        utils.scrollToDest(utils.getEleTop(document.getElementById(decodeURI(target.getAttribute('href')).replace('#', ''))), 300)
-        if (window.innerWidth < 900) {
-          $cardTocLayout.classList.remove('open')
-        }
+    const $cardTocLayout = document.getElementById('card-toc');
+    const $cardToc = $cardTocLayout.querySelector('.toc-content');
+    const $tocLink = $cardToc.querySelectorAll('.toc-link');
+    const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage');
+    const isExpand = $cardToc.classList.contains('is-expand');
+
+    const tocItemClickFn = e => {
+      const target = e.target.closest('.toc-link');
+      if (!target) return;
+
+      e.preventDefault();
+      utils.scrollToDest(utils.getEleTop(document.getElementById(decodeURI(target.getAttribute('href')).replace('#', ''))), 300);
+      if (window.innerWidth < 900) {
+        $cardTocLayout.classList.remove('open');
       }
-      utils.addEventListenerPjax($cardToc, 'click', tocItemClickFn)
+    };
+    utils.addEventListenerPjax($cardToc, 'click', tocItemClickFn);
   }
-}
+};
 
 const forPostFn = () => {
-  scrollFnToDo()
-}
+  scrollFnToDo();
+};
 
 window.refreshFn = () => {
-  const {is_home, is_page, page, is_post} = PAGE_CONFIG;
-  const {runtime, lazyload, lightbox, randomlink, covercolor, post_ai, lure, expire} = GLOBAL_CONFIG;
+  const { is_home, is_page, page, is_post } = PAGE_CONFIG;
+  const { runtime, lazyload, lightbox, randomlink, covercolor, post_ai, lure, expire } = GLOBAL_CONFIG;
   const timeSelector = (is_home ? '.post-meta-date time' : is_post ? '.post-meta-date time' : '.datatime') + ', .webinfo-item time';
   document.body.setAttribute('data-type', page);
   sco.changeTimeFormat(document.querySelectorAll(timeSelector));
   runtime && sco.addRuntime();
   [scrollFn, sidebarFn, sco.addPhotoFigcaption, sco.setTimeState, sco.tagPageActive, sco.categoriesBarActive, sco.listenToPageInputPress, sco.addNavBackgroundInit, sco.refreshWaterFall].forEach(fn => fn());
   lazyload.enable && utils.lazyloadImg();
-  lightbox && utils.lightbox(document.querySelectorAll("#article-container img:not(.flink-avatar,.gallery-group img, .no-lightbox)"));
+  lightbox && utils.lightbox(document.querySelectorAll(".article-container img:not(.flink-avatar,.gallery-group img, .no-lightbox)"));
   randomlink && randomLinksList();
   post_ai && is_post && ai.init();
   sco.switchComments();
   initObserver();
   if (is_home) {
     showTodayCard();
-    typeof updatePostsBasedOnComments === 'function' && updatePostsBasedOnComments()
   }
+  typeof updatePostsBasedOnComments === 'function' && updatePostsBasedOnComments();
   if (is_post || is_page) {
     addHighlight();
     tabs.init();
   }
-  if (is_post) {
-    if (expire) tabs.expireAddListener();
+  if (is_post && expire) {
+    tabs.expireAddListener();
   }
   if (covercolor.enable) coverColor();
   if (PAGE_CONFIG.toc) toc.init();
   if (lure) tabs.lureAddListener();
 
   forPostFn();
-}
+};
+
 document.addEventListener('DOMContentLoaded', () => {
   [addCopyright, window.refreshFn, asideStatus, () => window.onscroll = percent, sco.initConsoleState].forEach(fn => fn());
 });
+
 document.addEventListener('visibilitychange', () => {
   if (document.hidden) {
     sco.wasPageHidden = true;
   }
 });
+
 window.onkeydown = e => {
-  const {keyCode, ctrlKey, shiftKey} = e;
+  const { keyCode, ctrlKey, shiftKey } = e;
   if (keyCode === 123 || (ctrlKey && shiftKey && keyCode === 67)) {
     utils.snackbarShow(GLOBAL_CONFIG.lang.f12, false, 3000);
   }
@@ -778,6 +782,7 @@ window.onkeydown = e => {
     sco.hideConsole();
   }
 };
+
 document.addEventListener('copy', () => {
   utils.snackbarShow(GLOBAL_CONFIG.lang.copy.success, false, 3000);
 });