1. chore: 只支持hexo 4.2.0以上版本

2. feat: 可隱藏Mobile sidebar 子菜單 3. refactor: archives和card-post 改為flex佈局 4. feat: 當寬度小於1024時，點擊toc滾動，增加滾動效果 5. feat: 點擊滾動，如果滾動是向上時，將會偏移60px，避免導航欄遮擋 close #317 6. feat: 可配置font-size 7. refactor: 去除字體放大、縮小按鈕 8. refactor: 部分css由'px'改為'em'，適應font-size值改變而改變 9. feat: pjax增加exclude配置 10. fix: 修復canvas_nest 配置沒有生效的Bugs 11. feat: 新增 cnzz_analytics 12. feat: 騰訊分析改為騰訊移動分析，並適配pjax 13. perf: 改cookies為localstore存儲 14. feat: 設置中的theme_color可單獨配置幾個，而不需要全部開啟 close #314 15. feat: butterfly.yml 採用deepMerge, 與_config文件進行合併而不是替換 16. fix: 修復rightsize-bottom配置無效的bug 17. refactor: aside增加position sticky 18. refactor: 調整webinfo 寬度小時的顯示 19. feat: 更改addtoany item的寫法 20. refactor: aside 內容邊距調整 21. feat: 增加最後更新時間顯示
2026-04-16 20:30:53 +08:00 · 2020-08-18 00:33:05 +08:00
parent 195ae9f4c5
commit c512a5fda5
66 changed files with 1032 additions and 923 deletions
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -1,3 +1,4 @@
+
 /**
  * 當menu過多時，自動適配，避免UI錯亂
  * @param {*} n
@@ -5,9 +6,9 @@
  * 傳入 2 正常狀態下
  */

-const blogNameWidth = $('#blog_name').width()
+const blogNameWidth = $('#site-name').width()
 const menusWidth = $('.menus').width()
-const sidebarWidth = $('#sidebar').width()
+const sidebarWidth = $('#sidebar').width() || 300

 const adjustMenu = function (n) {
  const $nav = $('#nav')
@@ -17,13 +18,9 @@ const adjustMenu = function (n) {
  else t = blogNameWidth + menusWidth > $nav.width() - 30

  if (t) {
-    $nav.find('.toggle-menu').addClass('is-visible-inline')
-    $nav.find('.menus_items').addClass('is-invisible')
-    $nav.find('#search_button span').addClass('is-invisible')
+    $nav.addClass('hide-menu')
  } else {
-    $nav.find('.toggle-menu').removeClass('is-visible-inline')
-    $nav.find('.menus_items').removeClass('is-invisible')
-    $nav.find('#search_button span').removeClass('is-invisible')
+    $nav.removeClass('hide-menu')
  }
 }

@@ -59,18 +56,17 @@ const closeSidebar = () => {
  $('#body-wrap').animate({
    paddingLeft: 0
  }, 400)
-  $('#toggle-sidebar').css({
-    transform: 'rotateZ(0deg)',
-    color: '#1F2D3D',
-    opacity: '1'
-  })
-  setTimeout(function () {
-    adjustMenu(2)
-  }, 400)
+  if ($('#nav').hasClass('hide-menu')) {
+    setTimeout(function () {
+      adjustMenu(2)
+    }, 400)
+  }
 }

 const openSidebar = () => {
-  adjustMenu(1)
+  if (!$('#nav').hasClass('hide-menu')) {
+    adjustMenu(1)
+  }
  $('#sidebar').addClass('tocOpenPc').animate({
    left: 0
  }, 400)
@@ -80,11 +76,6 @@ const openSidebar = () => {
  $('#body-wrap').animate({
    paddingLeft: 300
  }, 400)
-  $('#toggle-sidebar').css({
-    transform: 'rotateZ(180deg)',
-    color: '#99a9bf',
-    opacity: '1'
-  })
 }

 const toggleSidebar = function () {
@@ -167,7 +158,7 @@ const sidebarFn = () => {
  })

  const mql = window.matchMedia('(max-width: 1024px)')
-  mql.addListener(function (ev) {
+  mql.addEventListener('change', function (ev) {
    if (ev.matches) {
      if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
    } else {
@@ -178,11 +169,10 @@ const sidebarFn = () => {

  // toc元素點擊
  $sidebar.find('.toc-link').on('click', function (e) {
+    e.preventDefault()
+    scrollToDest(decodeURI($(this).attr('href')))
    if (window.innerWidth <= 1024) {
      closeMobileSidebar('toc')
-    } else {
-      e.preventDefault()
-      scrollToDest(decodeURI($(this).attr('href')))
    }
  })
 }
@@ -201,12 +191,15 @@ const scrollDownInIndex = () => {
 * 只適用於Hexo默認的代碼渲染
 */
 const addHighlightTool = function () {
-  const $figureHighlight = $('figure.highlight')
-  const isHighlightCopy = GLOBAL_CONFIG.highlightCopy
-  const isHighlightLang = GLOBAL_CONFIG.highlightLang
+  const isHighlightCopy = GLOBAL_CONFIG.highlight.highlightCopy
+  const isHighlightLang = GLOBAL_CONFIG.highlight.highlightLang
  const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
+  const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
+  const $figureHighlight = GLOBAL_CONFIG.highlight.plugin === 'highlighjs' ? $('figure.highlight') : $('pre[class*="language-"')
+
+  if (isShowTool && $figureHighlight.length) {
+    const isPrismjs = GLOBAL_CONFIG.highlight.plugin === 'prismjs'

-  if ($figureHighlight.length && (isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined)) {
    let highlightShrinkEle = ''
    let highlightCopyEle = ''
    const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
@@ -220,16 +213,26 @@ const addHighlightTool = function () {
    }

    if (isHighlightLang) {
-      let langName
-      $figureHighlight.each(function () {
-        const $this = $(this)
-        langName = $this.attr('class').split(' ')[1]
-        if (langName === 'plain' || langName === undefined) langName = 'Code'
-        const highlightLangEle = `<div class="code-lang">${langName}</div>`
-        $this.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
-      })
+      if (isPrismjs) {
+        $figureHighlight.each(function () {
+          const $this = $(this)
+          const langName = $this.attr('data-language') !== undefined ? $this.attr('data-language') : 'Code'
+          const highlightLangEle = `<div class="code-lang">${langName}</div>`
+          $this.wrap('<figure class="highlight"></figure>').before(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
+        })
+      } else {
+        $figureHighlight.each(function (i, o) {
+          const $this = $(this)
+          let langName = $this.attr('class').split(' ')[1]
+          if (langName === 'plain' || langName === undefined) langName = 'Code'
+          const highlightLangEle = `<div class="code-lang">${langName}</div>`
+          $this.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightLangEle + highlightCopyEle}</div>`)
+        })
+      }
    } else {
-      $figureHighlight.prepend(`<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightCopyEle}</div>`)
+      const ele = `<div class="highlight-tools ${highlightShrinkClass}">${highlightShrinkEle + highlightCopyEle}</div>`
+      if (isPrismjs) $figureHighlight.wrap('<figure class="highlight"></figure>').before(ele)
+      else $figureHighlight.prepend(ele)
    }

    /**
@@ -237,7 +240,7 @@ const addHighlightTool = function () {
     */

    if (isHighlightShrink !== undefined) {
-      $figureHighlight.find('.highlight-tools >.expand').on('click', function () {
+      $('.highlight-tools >.expand').on('click', function () {
        const $this = $(this)
        const $table = $this.parent().nextAll()
        $this.toggleClass('closed')
@@ -277,12 +280,13 @@ const addHighlightTool = function () {
      }

      // click events
-      $figureHighlight.find('.highlight-tools >.copy-button').on('click', function () {
+      $('.highlight-tools >.copy-button').on('click', function () {
        const $buttonParent = $(this).parents('figure.highlight')
        $buttonParent.addClass('copy-true')
        const selection = window.getSelection()
        const range = document.createRange()
-        range.selectNodeContents($buttonParent.find('table .code pre')[0])
+        if (isPrismjs) range.selectNodeContents($buttonParent.find('> pre code')[0])
+        else range.selectNodeContents($buttonParent.find('table .code pre')[0])
        selection.removeAllRanges()
        selection.addRange(range)
        const text = selection.toString()
@@ -477,7 +481,7 @@ const tocFn = function () {
    let currentId = ''
    list.each(function () {
      const head = $(this)
-      if (top > head.offset().top - 25) {
+      if (top > head.offset().top - 70) {
        if (versionBiggerFive) currentId = '#' + encodeURI($(this).attr('id'))
        else currentId = '#' + $(this).attr('id')
      }
@@ -537,33 +541,17 @@ $rightsideEle.on('click', '#readmode', function () {
  $('body').toggleClass('read-mode')
 })

-// font change
-const originFontSize = $('body').css('font-size')
-$rightsideEle.on('click', '#font_plus', () => {
-  const nowFontSize = parseFloat($('body').css('font-size'))
-  if (nowFontSize < 20) {
-    $('body').css('font-size', nowFontSize + 1)
-  }
-})
-
-$rightsideEle.on('click', '#font_minus', () => {
-  const nowFontSize = parseFloat($('body').css('font-size'))
-  if (nowFontSize > 10) {
-    $('body').css('font-size', nowFontSize - 1)
-  }
-})
-
 // Switch Between Light And Dark Mode
 if ($('#darkmode').length) {
  const switchReadMode = function () {
    const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
    if (nowMode === 'light') {
      activateDarkMode()
-      Cookies.set('theme', 'dark', 2)
+      saveToLocal.set('theme', 'dark', 2)
      GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
    } else {
      activateLightMode()
-      Cookies.set('theme', 'light', 2)
+      saveToLocal.set('theme', 'light', 2)
      GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
    }
  }
@@ -590,7 +578,7 @@ $rightsideEle.on('click', '#go-up', () => scrollToDest('body'))
 const clickFnOfSubMenu = function () {
  $('#mobile-sidebar-menus .expand').on('click', function () {
    $(this).parents('.menus_item').find('> .menus_item_child').slideToggle()
-    $(this).toggleClass('closed')
+    $(this).toggleClass('hide')
  })

  $(window).on('touchmove', function (e) {
@@ -633,7 +621,23 @@ const addRuntime = () => {
  const $runtimeCount = $('#webinfo-runtime-count')
  if ($runtimeCount.length) {
    const publishDate = $runtimeCount.attr('publish_date')
-    $runtimeCount.text(diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime_unit)
+    $runtimeCount.text(diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime)
+  }
+}
+
+/**
+ * 最後一次更新時間
+ */
+const addLastPushDate = () => {
+  const $lastPushDateItem = $('.webinfo-last-push-date')
+  if ($lastPushDateItem.length) {
+    const lastPushDate = $lastPushDateItem.attr('last-push-date')
+    const diffDay = diffDate(lastPushDate)
+    if (diffDay > 365) {
+      $lastPushDateItem.text(lastPushDate)
+    } else {
+      $lastPushDateItem.text(diffDay + ' ' + GLOBAL_CONFIG.last_push_date)
+    }
  }
 }

@@ -683,25 +687,33 @@ const clickFnOfTagHide = function () {
  }
 }

-const clickFnOfTabs = function () {
-  const $tab = $('#article-container .tabs')
-  $tab.find('.tab > button').on('click', function (e) {
-    const $this = $(this)
-    const $tabItem = $this.parent()
+const tabsFn = {
+  clickFnOfTabs: function () {
+    const $tab = $('#article-container .tabs')
+    $tab.find('.tab > button:not(.tab-to-top)').on('click', function (e) {
+      const $this = $(this)
+      const $tabItem = $this.parent()

-    if (!$tabItem.hasClass('active')) {
-      const $tabContent = $this.parents('.nav-tabs').next()
-      $tabItem.siblings('.active').removeClass('active')
-      $tabItem.addClass('active')
-      const tabId = $this.attr('data-href')
-      $tabContent.find('> .tab-item-content').removeClass('active')
-      $tabContent.find(`> ${tabId}`).addClass('active')
-      const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
-      if ($isTabJustifiedGallery.length > 0) {
-        initJustifiedGallery($isTabJustifiedGallery)
+      if (!$tabItem.hasClass('active')) {
+        const $tabContent = $this.parents('.nav-tabs').next()
+        $tabItem.siblings('.active').removeClass('active')
+        $tabItem.addClass('active')
+        const tabId = $this.attr('data-href')
+        $tabContent.find('> .tab-item-content').removeClass('active')
+        $tabContent.find(`> ${tabId}`).addClass('active')
+        const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
+        if ($isTabJustifiedGallery.length > 0) {
+          initJustifiedGallery($isTabJustifiedGallery)
+        }
      }
-    }
-  })
+    })
+  },
+  backToTop: () => {
+    const backToTopBtn = $('#article-container .tabs .tab-to-top')
+    backToTopBtn.on('click', function () {
+      scrollToDest($(this).parents('.tabs'))
+    })
+  }
 }

 const toggleCardCategory = function () {
@@ -790,15 +802,17 @@ const refreshFn = function () {

  sidebarFn()
  GLOBAL_CONFIG_SITE.isHome && scrollDownInIndex()
-  addHighlightTool()
+  GLOBAL_CONFIG.highlight && addHighlightTool()
  GLOBAL_CONFIG.isPhotoFigcaption && addPhotoFigcaption()
  runJustifiedGallery()
  addLightBox()
  scrollFn()
  GLOBAL_CONFIG.runtime && addRuntime()
+  GLOBAL_CONFIG.last_push_date && addLastPushDate()
  addTableWrap()
  clickFnOfTagHide()
-  clickFnOfTabs()
+  tabsFn.clickFnOfTabs()
+  tabsFn.backToTop()
  toggleCardCategory()
  switchComments()
 }
--- a/source/js/third-party/canvas-nest.js
+++ b/source/js/third-party/canvas-nest.js
@@ -15,11 +15,8 @@
  }

  function l() {
-    var i = j("script"),
-      w = i.length,
-      v = i[w - 1];
+    var v = cn;
    return {
-      l: w,
      z: o(v, "zIndex", -1),
      o: o(v, "opacity", 0.5),
      c: o(v, "color", "0,0,0"),
@@ -49,7 +46,6 @@
  }
  var u = document.createElement("canvas"),
    s = l(),
-    c = "c_n" + s.l,
    e = u.getContext("2d"),
    r, n, m = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (i) {
      window.setTimeout(i, 1000 / 45)
@@ -60,7 +56,6 @@
      y: null,
      max: 20000
    };
-  u.id = c;
  u.style.cssText = "position:fixed;top:0;left:0;z-index:" + s.z + ";opacity:" + s.o;
  j("body")[0].appendChild(u);
  k(), window.onresize = k;
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-undef */
 (function () {
  const translate = GLOBAL_CONFIG.translate
  const snackbarData = GLOBAL_CONFIG.Snackbar
@@ -8,9 +9,9 @@
  let currentEncoding = defaultEncoding
  const targetEncodingCookie = 'translate-chn-cht'
  let targetEncoding =
-  Cookies.get(targetEncodingCookie) === undefined
+  saveToLocal.get(targetEncodingCookie) === undefined
    ? defaultEncoding
-    : Number(Cookies.get(targetEncodingCookie))
+    : Number(saveToLocal.get('translate-chn-cht'))
  let translateButtonObject
  const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined

@@ -47,14 +48,14 @@
      currentEncoding = 1
      targetEncoding = 2
      translateButtonObject.innerHTML = msgToTraditionalChinese
-      Cookies.set(targetEncodingCookie, targetEncoding, 2)
+      saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
      translateBody()
      if (isSnackbar) snackbarShow(snackbarData.cht_to_chs)
    } else if (targetEncoding === 2) {
      currentEncoding = 2
      targetEncoding = 1
      translateButtonObject.innerHTML = msgToSimplifiedChinese
-      Cookies.set(targetEncodingCookie, targetEncoding, 2)
+      saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
      translateBody()
      if (isSnackbar) snackbarShow(snackbarData.chs_to_cht)
    }
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -14,7 +14,7 @@ function debounce (func, wait, immediate) {
    timeout = setTimeout(later, wait)
    if (callNow) func.apply(context, args)
  }
-};
+}

 function throttle (func, wait, options) {
  let timeout, context, args
@@ -59,12 +59,18 @@ function sidebarPaddingR () {
  }
 }

-function scrollToDest (name, offset = 0) {
-  const scrollOffset = $(name).offset()
+function scrollToDest (name) {
+  const scrollOffset = $(name).offset().top
+  let offset
+  if ($(window).scrollTop() > scrollOffset) {
+    offset = 65
+  } else {
+    offset = 0
+  }
  $('body,html').animate({
-    scrollTop: scrollOffset.top - offset
+    scrollTop: scrollOffset - offset
  })
-};
+}

 function snackbarShow (text, showAction, duration) {
  const sa = (typeof showAction !== 'undefined') ? showAction : false
@@ -80,23 +86,6 @@ function snackbarShow (text, showAction, duration) {
  })
 }

-const Cookies = {
-  get: function (name) {
-    const value = `; ${document.cookie}`
-    const parts = value.split(`; ${name}=`)
-    if (parts.length === 2) return parts.pop().split(';').shift()
-  },
-  set: function (name, value, days) {
-    let expires = ''
-    if (days) {
-      const date = new Date()
-      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000))
-      expires = '; expires=' + date.toUTCString()
-    }
-    document.cookie = name + '=' + (value || '') + expires + '; path=/'
-  }
-}
-
 const initJustifiedGallery = function (selector) {
  selector.each(function (i, o) {
    if ($(this).is(':visible')) {