breaking changes: 移除 subtitle 一句網調用（api 已失效)

feat: 右下角按鈕增加預覽進度顯示
feat: toc可設置是否顯示預覽進度
fix: 修復 TypeError: require(...) is not a function 的報錯 #1102
improvement: 日期設置相對日期時，文章的日期格式和最新評論的日期格式統一為 年月日

_config.yml

@@ -185,6 +185,7 @@ toc:
   number: true
   expand: false
   style_simple: false # for post
+  scroll_percent: true
 
 post_copyright:
   enable: true
@@ -632,8 +633,7 @@ subtitle:
   # source 調用第三方服務
   # source: false 關閉調用
   # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
-  # source: 2  調用一句網（簡體） http://yijuzhan.com/
-  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
+  # source: 2  調用今日詩詞（簡體） https://www.jinrishici.com/
   # subtitle 會先顯示 source , 再顯示 sub 的內容
   source: false
   # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字
@@ -753,6 +753,9 @@ darkmode:
   # autoChangeMode: false
   autoChangeMode: false
 
+# show scroll percent in scroll-to-top button
+rightside_scroll_percent: false
+
 # Don't modify the following settings unless you know how they work (非必要請不要修改 )
 # Choose: readmode,translate,darkmode,hideAside,toc,chat,comment
 # Don't repeat 不要重複

layout/includes/head/config.pug

@@ -120,5 +120,9 @@ script.
     },
     isPhotoFigcaption: !{theme.photofigcaption},
     islazyload: !{theme.lazyload.enable},
-    isAnchor: !{theme.anchor.auto_update || false}
+    isAnchor: !{theme.anchor.auto_update || false},
+    percent: {
+      toc: !{theme.toc.scroll_percent},
+      rightside: !{theme.rightside_scroll_percent},
+    }
   }

layout/includes/rightside.pug

@@ -57,4 +57,5 @@ mixin rightsideItem(array)
       +rightsideItem(showArray)
 
     button#go-up(type="button" title=_p("rightside.back_to_top"))
+      span.scroll-percent
       i.fas.fa-arrow-up

layout/includes/third-party/subtitle.pug

@@ -36,38 +36,6 @@ case source
       }
 
   when 2
-    script.
-      function subtitleType () {
-        getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
-          const con = str[0]
-          if (!{effect}) {
-            const from = '出自 ' + str[1]
-            const sub = !{JSON.stringify(subContent)}
-            sub.unshift(con, from)
-            window.typed = new Typed('#subtitle', {
-              strings: sub,
-              startDelay: !{startDelay},
-              typeSpeed: !{typeSpeed},
-              loop: !{loop},
-              backSpeed: !{backSpeed},
-            })
-          } else {
-            document.getElementById('subtitle').innerHTML = con
-          }
-        })
-      }
-
-      if (!{effect}) {
-        if (typeof Typed === 'function') {
-          subtitleType()
-        } else {
-          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
-        }
-      } else {
-        subtitleType()
-      }
-
-  when 3
     script.
       function subtitleType () {
         getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.5.1",
+  "version": "4.6.0-b1",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {

scripts/events/init.js

@@ -1,8 +1,7 @@
-const logger = require('hexo-log')()
-
 hexo.extend.filter.register('before_generate', () => {
   // Get first two digits of the Hexo version number
   const hexoVer = hexo.version.replace(/(^.*\..*)\..*/, '$1')
+  const logger = hexo.log
 
   if (hexoVer < 5.3) {
     logger.error('Please update Hexo to V5.3.0 or higher!')
@@ -13,7 +12,9 @@ hexo.extend.filter.register('before_generate', () => {
   if (hexo.locals.get) {
     const data = hexo.locals.get('data')
     if (data && data.butterfly) {
-      logger.error(" 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' ")
+      logger.error(
+        " 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' "
+      )
       logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ")
       process.exit(-1)
     }

scripts/events/welcome.js

@@ -1,17 +1,13 @@
-const logger = require('hexo-log')()
-
 hexo.on('ready', () => {
   const { version } = require('../../package.json')
-  logger.info(`
+  hexo.log.info(`
   ===================================================================
-                                                                     
       #####  #    # ##### ##### ###### #####  ###### #      #   #
       #    # #    #   #     #   #      #    # #      #       # #
       #####  #    #   #     #   #####  #    # #####  #        #
       #    # #    #   #     #   #      #####  #      #        #
       #    # #    #   #     #   #      #   #  #      #        #
       #####   ####    #     #   ###### #    # #      ######   #
-
                             ${version}
   ===================================================================`)
 })

source/css/_layout/rightside.styl

@@ -47,3 +47,22 @@
   +maxWidth900()
     #hide-aside-btn
       display: none
+
+  if hexo-config('rightside_scroll_percent')
+    #go-up
+      .scroll-percent
+        display: none
+
+      &.show-percent
+        .scroll-percent
+          display: block
+
+          & + i
+            display: none
+
+      &:hover
+        .scroll-percent
+          display: none
+
+          & + i
+            display: block

source/js/main.js

@@ -251,6 +251,21 @@ document.addEventListener('DOMContentLoaded', function () {
     getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
   }
 
+  /**
+   * rightside scroll percent
+   */
+  const rightsideScrollPercent = currentTop => {
+    const perNum = btf.getScrollPercent(currentTop,document.body)
+    const $goUp = document.getElementById('go-up')
+    if ( perNum < 95 ) {
+      $goUp.classList.add('show-percent')
+      $goUp.querySelector('.scroll-percent').textContent = perNum
+    }
+    else {
+      $goUp.classList.remove('show-percent')
+    }
+  }
+
   /**
    * 滾動處理
    */
@@ -276,6 +291,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const $header = document.getElementById('page-header')
     const isChatBtnHide = typeof chatBtnHide === 'function'
     const isChatBtnShow = typeof chatBtnShow === 'function'
+    const isShowPercent = GLOBAL_CONFIG.percent.rightside
 
     const scrollTask = btf.throttle(() => {
         const currentTop = window.scrollY || document.documentElement.scrollTop
@@ -305,9 +321,12 @@ document.addEventListener('DOMContentLoaded', function () {
           $rightside.style.cssText = "opacity: ''; transform: ''"
         }
 
+        isShowPercent && rightsideScrollPercent(currentTop)
+
         if (document.body.scrollHeight <= innerHeight) {
           $rightside.style.cssText = 'opacity: 0.8; transform: translateX(-58px)'
         }
+
       }, 200)
     
     window.scrollCollect = scrollTask
@@ -325,26 +344,15 @@ document.addEventListener('DOMContentLoaded', function () {
 
     if (!($article && (isToc || isAnchor))) return
 
-    let $tocLink, $cardToc, scrollPercent, autoScrollToc, isExpand
+    let $tocLink, $cardToc, autoScrollToc, $tocPercentage, isExpand
 
     if (isToc) {
       const $cardTocLayout = document.getElementById('card-toc')
       $cardToc = $cardTocLayout.getElementsByClassName('toc-content')[0]
       $tocLink = $cardToc.querySelectorAll('.toc-link')
-      const $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
+      $tocPercentage = $cardTocLayout.querySelector('.toc-percentage')
       isExpand = $cardToc.classList.contains('is-expand')
 
-      scrollPercent = currentTop => {
-        const docHeight = $article.clientHeight
-        const winHeight = document.documentElement.clientHeight
-        const headerHeight = $article.offsetTop
-        const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
-        const scrollPercent = (currentTop - headerHeight) / (contentMath)
-        const scrollPercentRounded = Math.round(scrollPercent * 100)
-        const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
-        $tocPercentage.textContent = percentage
-      }
-
       window.mobileToc = {
         open: () => {
           $cardTocLayout.style.cssText = 'animation: toc-open .3s; opacity: 1; right: 55px'
@@ -433,13 +441,14 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     // main of scroll
-    window.tocScrollFn = function () {
-      return btf.throttle(function () {
+    window.tocScrollFn = btf.throttle(()=>{
         const currentTop = window.scrollY || document.documentElement.scrollTop
-        isToc && scrollPercent(currentTop)
-        findHeadPosition(currentTop)
-      }, 100)()
+        if (isToc && GLOBAL_CONFIG.percent.toc) {
+          $tocPercentage.textContent = btf.getScrollPercent(currentTop,$article)
         }
+        findHeadPosition(currentTop)
+      }, 100)
+    
     window.addEventListener('scroll', tocScrollFn)
   }
 

source/js/utils.js

@@ -88,7 +88,7 @@ const btf = {
       const minuteCount = dateDiff / minute
 
       if (monthCount > 12) {
-        result = datePost.toLocaleDateString().replace(/\//g, '-')
+        result = datePost.toISOString().slice(0,10)
       } else if (monthCount >= 1) {
         result = parseInt(monthCount) + ' ' + GLOBAL_CONFIG.date_suffix.month
       } else if (dayCount >= 1) {
@@ -274,5 +274,16 @@ const btf = {
         title: title
       }, title, anchor)
     }
+  },
+
+  getScrollPercent: (currentTop,ele) => {
+    const docHeight = ele.clientHeight
+    const winHeight = document.documentElement.clientHeight
+    const headerHeight = ele.offsetTop
+    const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : (document.documentElement.scrollHeight - winHeight)
+    const scrollPercent = (currentTop - headerHeight) / (contentMath)
+    const scrollPercentRounded = Math.round(scrollPercent * 100)
+    const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
+    return percentage
   }
 }