feat: 只支持 hexo 5.0.0 及以上版本

feat: toc改為aside顯示,去掉sidebar
feat: 手機toc ui 修改
feat: 去掉 toc auto_open 配置
feat: 文章標題改為居中
improvement: 完善note標籤在readmode上的顯示
improvement: 精簡css 和 js
improvement： pjax 優化
fix: 修復當文章頁top_img設為false時，閲讀模式下文章內容不顯示的bugs

source/js/main.js

@@ -1,21 +1,11 @@
-
-/**
-  * 當menu過多時，自動適配，避免UI錯亂
-  * @param {*} n
-  * 傳入 1 sidebar打開時
-  * 傳入 2 正常狀態下
-  */
-
 $(function () {
   const blogNameWidth = $('#site-name').width()
   const menusWidth = $('#menus').width()
-  const sidebarWidth = $('#sidebar').width() || 300
 
-  const adjustMenu = function (n) {
+  const adjustMenu = () => {
     const $nav = $('#nav')
     let t
-    if (n === 0) t = true
-    else if (n === 1) t = blogNameWidth + menusWidth > $nav.width() - sidebarWidth - 30
+    if (window.innerWidth < 768) t = true
     else t = blogNameWidth + menusWidth > $nav.width() - 30
 
     if (t) {
@@ -27,157 +17,45 @@ $(function () {
 
   // 初始化header
   const initAdjust = () => {
-    if (window.innerWidth < 768) adjustMenu(0)
-    else adjustMenu(2)
+    adjustMenu()
     $('#nav').addClass('show')
   }
 
-  /**
- * 進入post頁sidebar處理
- */
-  const OpenSidebarAuto = () => {
-    if (window.innerWidth > 1024 && $('#toggle-sidebar').hasClass('on')) {
-      setTimeout(function () {
-        openSidebar()
-      }, 400)
-    }
-  }
-
-  /**
- * 點擊左下角箭頭,顯示sidebar
- */
-
-  const closeSidebar = () => {
-    $('#sidebar').removeClass('tocOpenPc').animate({
-      left: '-300px'
-    }, 400)
-    $('#menus').animate({
-      paddingRight: 0
-    }, 400)
-    $('#body-wrap').animate({
-      paddingLeft: 0
-    }, 400)
-    if ($('#nav').hasClass('hide-menu')) {
-      setTimeout(function () {
-        adjustMenu(2)
-      }, 400)
-    }
-  }
-
-  const openSidebar = () => {
-    if (!$('#nav').hasClass('hide-menu')) {
-      adjustMenu(1)
-    }
-    $('#sidebar').addClass('tocOpenPc').animate({
-      left: 0
-    }, 400)
-    $('#menus').animate({
-      paddingRight: 300
-    }, 400)
-    $('#body-wrap').animate({
-      paddingLeft: 300
-    }, 400)
-  }
-
-  const toggleSidebar = function () {
-    $('#toggle-sidebar').on('click', function () {
-      const isOpen = $(this).hasClass('on')
-      isOpen ? $(this).removeClass('on') : $(this).addClass('on')
-      if (isOpen) {
-        closeSidebar()
-      } else {
-        openSidebar()
-      }
-    })
-  }
-
-  /**
- * 手機menu和toc按鈕點擊
- * 顯示menu和toc的sidebar
- */
-
+  // sidebar menus
   const sidebarFn = () => {
     const $toggleMenu = $('#toggle-menu')
     const $mobileSidebarMenus = $('#mobile-sidebar-menus')
-    const $mobileTocButton = $('#mobile-toc-button')
     const $menuMask = $('#menu_mask')
     const $body = $('body')
-    const $sidebar = $('#sidebar')
 
-    function openMobileSidebar (name) {
+    function openMobileSidebar () {
       btf.sidebarPaddingR()
       $body.css('overflow', 'hidden')
       $menuMask.fadeIn()
-
-      if (name === 'menu') {
-        $toggleMenu.removeClass('close').addClass('open')
-        $mobileSidebarMenus.addClass('open')
-      }
-
-      if (name === 'toc') {
-        $mobileTocButton.removeClass('close').addClass('open')
-        $sidebar.addClass('tocOpenMobile').css({ transform: 'translate3d(-100%,0,0)', left: '' })
-      }
+      $toggleMenu.removeClass('close').addClass('open')
+      $mobileSidebarMenus.addClass('open')
     }
 
-    function closeMobileSidebar (name) {
+    function closeMobileSidebar () {
       $body.css({ overflow: '', 'padding-right': '' })
       $menuMask.fadeOut()
-
-      if (name === 'menu') {
-        $toggleMenu.removeClass('open').addClass('close')
-        $mobileSidebarMenus.removeClass('open')
-      }
-
-      if (name === 'toc') {
-        $mobileTocButton.removeClass('open').addClass('close')
-        $sidebar.removeClass('tocOpenMobile').css({ transform: '' })
-      }
+      $toggleMenu.removeClass('open').addClass('close')
+      $mobileSidebarMenus.removeClass('open')
     }
 
     $toggleMenu.on('click', function () {
-      openMobileSidebar('menu')
-    })
-
-    $mobileTocButton.on('click', function () {
-      openMobileSidebar('toc')
+      openMobileSidebar()
     })
 
     $menuMask.on('click touchstart', function (e) {
       if ($toggleMenu.hasClass('open')) {
-        closeMobileSidebar('menu')
-      }
-      if ($mobileTocButton.hasClass('open')) {
-        closeMobileSidebar('toc')
+        closeMobileSidebar()
       }
     })
 
     $(window).on('resize', function (e) {
       if (!$toggleMenu.is(':visible')) {
-        if ($toggleMenu.hasClass('open')) closeMobileSidebar('menu')
-      }
-    })
-
-    const mql = window.matchMedia('(max-width: 1024px)')
-    const $toggleSidebar = $('#toggle-sidebar')
-    const matchFn = (ev) => {
-      if (ev.matches) {
-        if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
-      } else {
-        if ($toggleSidebar.hasClass('on')) openSidebar()
-        if ($mobileTocButton.hasClass('open')) closeMobileSidebar('toc')
-      }
-    }
-
-    mql.addListener(matchFn)
-    document.addEventListener('pjax:send', () => { mql.removeListener(matchFn) })
-
-    // toc元素點擊
-    $sidebar.find('.toc-link').on('click', function (e) {
-      e.preventDefault()
-      btf.scrollToDest(decodeURI($(this).attr('href')))
-      if (window.innerWidth < 1024) {
-        closeMobileSidebar('toc')
+        if ($toggleMenu.hasClass('open')) closeMobileSidebar()
       }
     })
   }
@@ -427,9 +305,10 @@ $(function () {
  *  toc
  */
   const tocFn = function () {
-    const $sidebar = $('#sidebar')
-    const $tocChild = $sidebar.find('.toc-child')
-    const $tocLink = $sidebar.find('.toc-link')
+    const $cardTocLayout = $('#card-toc')
+    const $cardToc = $cardTocLayout.find('.toc-content')
+    const $tocChild = $cardToc.find('.toc-child')
+    const $tocLink = $cardToc.find('.toc-link')
     const $article = $('#article-container')
 
     $tocChild.hide()
@@ -459,10 +338,7 @@ $(function () {
       const percentage = (scrollPercentRounded > 100) ? 100
         : (scrollPercentRounded <= 0) ? 0
           : scrollPercentRounded
-      $sidebar.find('.progress-num').text(percentage)
-      $sidebar.find('.sidebar-toc__progress-bar').animate({
-        width: percentage + '%'
-      }, 100)
+      $cardToc.attr('progress-percentage', percentage)
     }
 
     // anchor
@@ -473,9 +349,36 @@ $(function () {
       }
     }
 
+    const mobileToc = {
+      open: () => {
+        $cardTocLayout.addClass('open')
+      },
+
+      close: () => {
+        $cardTocLayout.removeClass('open')
+      }
+    }
+
+    $('#mobile-toc-button').on('click', () => {
+      if ($cardTocLayout.is(':visible')) {
+        mobileToc.close()
+      } else {
+        mobileToc.open()
+      }
+    })
+
+    // toc元素點擊
+    $tocLink.on('click', function (e) {
+      e.preventDefault()
+      btf.scrollToDest(decodeURI($(this).attr('href')))
+      if (window.innerWidth < 900) {
+        mobileToc.close()
+      }
+    })
+
     const autoScrollToc = function (currentTop, item) {
       const activePosition = item.offset().top
-      const $tocContent = $sidebar.find('.sidebar-toc__content')
+      const $tocContent = $cardToc
       const sidebarScrollTop = $tocContent.scrollTop()
       if (activePosition > (currentTop + $(window).height() - 100)) {
         $tocContent.scrollTop(sidebarScrollTop + 100)
@@ -489,7 +392,6 @@ $(function () {
     // DOM Hierarchy:
     // ol.toc > (li.toc-item, ...)
     // li.toc-item > (a.toc-link, ol.toc-2child > (li.toc-item, ...))
-    const versionBiggerFive = GLOBAL_CONFIG.hexoversion.split('.')[0] >= 5
     const list = $article.find('h1,h2,h3,h4,h5,h6')
 
     const findHeadPosition = function (top) {
@@ -503,8 +405,7 @@ $(function () {
       list.each(function () {
         const head = $(this)
         if (top > head.offset().top - 70) {
-          if (versionBiggerFive) currentId = '#' + encodeURI($(this).attr('id'))
-          else currentId = '#' + $(this).attr('id')
+          currentId = '#' + encodeURI($(this).attr('id'))
         }
       })
 
@@ -765,9 +666,7 @@ $(function () {
 
   const unRefreshFn = function () {
     $(window).on('resize', function () {
-      if (window.innerWidth < 768) adjustMenu(0)
-      else if ($('#sidebar').hasClass('tocOpenPc') && $('#nav').hasClass('fixed')) adjustMenu(1)
-      else adjustMenu(2)
+      adjustMenu()
     })
 
     clickFnOfSubMenu()
@@ -779,9 +678,7 @@ $(function () {
     initAdjust()
 
     if (GLOBAL_CONFIG_SITE.isPost) {
-      OpenSidebarAuto()
-      toggleSidebar()
-      GLOBAL_CONFIG_SITE.isSidebar && tocFn()
+      GLOBAL_CONFIG_SITE.isToc && tocFn()
       GLOBAL_CONFIG.noticeOutdate !== undefined && addPostOutdateNotice()
       GLOBAL_CONFIG.relativeDate.post && relativeDate($('#post-meta time'))
     } else {