improvements: 代碼名全大寫

improvements: 補全card-categories和card-archives的 '查看更多‘鏈接 close #337 fix: 修復comments沒設置時，報Unexpected token ')'的bugs close #344 improvements: 優化js和html fix: 修復toc 滾動百分比不準的Bugs
2026-04-12 14:07:06 +08:00 · 2020-08-31 01:31:59 +08:00
parent 593eb4734e
commit 51c4726c54
33 changed files with 877 additions and 886 deletions
--- a/README.md
+++ b/README.md
@@ -2,9 +2,8 @@

 ![version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly)
 ![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
-![hexo version](https://img.shields.io/badge/hexo-4.0+-0e83c)
+![hexo version](https://img.shields.io/badge/hexo-4.2+-0e83c)
 ![npm download](https://img.shields.io/npm/dw/hexo-theme-butterfly?color=green)
-![nodejs version](https://img.shields.io/badge/node.js-8.0+-yellow)
 ![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531)

 Demo: 👍 [Butterfly](https://demo.jerryc.me/)  ||   🤞 [JerryC](https://jerryc.me/)
--- a/README_CN.md
+++ b/README_CN.md
@@ -2,9 +2,8 @@

 ![version](https://img.shields.io/github/package-json/v/jerryc127/hexo-theme-butterfly)
 ![https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff](https://img.shields.io/npm/v/hexo-theme-butterfly?color=%09%23bf00ff)
-![hexo version](https://img.shields.io/badge/hexo-4.0+-0e83c)
+![hexo version](https://img.shields.io/badge/hexo-4.2+-0e83c)
 ![npm download](https://img.shields.io/npm/dw/hexo-theme-butterfly?color=green)
-![nodejs version](https://img.shields.io/badge/node.js-8.0+-yellow)
 ![license](https://img.shields.io/github/license/jerryc127/hexo-theme-butterfly?color=FF5531)


--- a/_config.yml
+++ b/_config.yml
@@ -91,14 +91,14 @@ favicon: /img/favicon.png

 # Avatar (頭像)
 avatar:
-  img: /img/avatar.png
+  img:
  effect: false

 # the banner image of home page
 index_img:

 # if the banner of page not setting, it will show the top_img
-default_top_img: https://i.loli.net/2020/05/01/IuWi8QbHvzjlOPw.jpg
+default_top_img:

 # the banner image of archive page
 archive_img:
@@ -557,9 +557,10 @@ font:

 # Font settings for the site title and site subtitle
 # 左上角網站名字 主頁居中網站名字
-blog_title_font:
-  font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
-  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
+
+# blog_title_font:
+  # font_link: https://fonts.googleapis.com/css?family=Titillium+Web&display=swap
+  # font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif

 # The setting of divider icon (水平分隔線圖標設置)
 hr_icon:
@@ -654,7 +655,7 @@ newest_comments:
    appId: # leancloud application app id
    appKey: # leancloud application app key
    serverURL: # This configuration is suitable for domestic custom domain name users, overseas version will be automatically detected (no need to manually fill in)
-    default_avatar: mp # mp/identicon/monsterid/wavatar/retro/robohash/blank
+    default_avatar: # mp/identicon/monsterid/wavatar/retro/robohash/blank
  github_issues:
    enable: false
    repo:
@@ -762,7 +763,7 @@ baidu_push: false

 # https://instant.page/
 # prefetch (預加載)
-instantpage: true
+instantpage: false

 # https://github.com/vinta/pangu.js
 # Insert a space between Chinese character and English character (中英文之間添加空格)
@@ -773,7 +774,7 @@ pangu:
 # Lazyload (圖片懶加載)
 # https://github.com/verlok/lazyload
 lazyload:
-  enable: true
+  enable: false
  post: /img/loading.gif

 # PWA
--- a/layout/includes/additional-js.pug
+++ b/layout/includes/additional-js.pug
@@ -15,7 +15,7 @@ div
    script(src=url_for(theme.CDN.instantpage) type="module" defer)

  if theme.lazyload.enable
-    script(src=url_for(theme.CDN.lazyload) async)
+    script(src=url_for(theme.CDN.lazyload))

  if (theme.snackbar && theme.snackbar.enable)
    script(src=url_for(theme.CDN.snackbar))
--- a/layout/includes/head.pug
+++ b/layout/includes/head.pug
@@ -77,7 +77,7 @@ if theme.algolia_search.enable
 !=partial('includes/head/analytics', {}, {cache:theme.fragment_cache})

 //- font
-if theme.blog_title_font.font_link
+if theme.blog_title_font &&　theme.blog_title_font.font_link
  link(rel='stylesheet' href=url_for(theme.blog_title_font.font_link))

 //- global config
--- a/layout/includes/head/darkmode.pug
+++ b/layout/includes/head/darkmode.pug
@@ -25,7 +25,6 @@ if theme.darkmode.enable
        if (isLightMode) activateLightMode()
        else if (isDarkMode) activateDarkMode()
        else if (isNotSpecified || hasNoSupport) {
-          console.log('You specified no preference for a color scheme or your browser does not support it. I Schedule dark mode during night time.')
          var now = new Date()
          var hour = now.getHours()
          var isNight = hour <= 6 || hour >= 18
--- a/layout/includes/head/preconnect.pug
+++ b/layout/includes/head/preconnect.pug
@@ -12,7 +12,7 @@ if theme.tencent_analytics
 if theme.cnzz_analytics
  link(rel="preconnect" href="//s4.cnzz.com")

-if theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
+if theme.blog_title_font && theme.blog_title_font.font_link && theme.blog_title_font.font_link.indexOf('//fonts.googleapis.com') != -1
  link(rel="preconnect" href="//fonts.googleapis.com" crossorigin)

 if theme.busuanzi.site_uv || theme.busuanzi.site_pv || theme.busuanzi.page_pv
--- a/layout/includes/header/nav.pug
+++ b/layout/includes/header/nav.pug
@@ -2,7 +2,7 @@ nav#nav
  span#blog_name
    a#site-name(href=url_for('/')) #[=config.title]
    
-  span.menus
+  span#menus
    if (theme.algolia_search.enable || theme.local_search.enable)
      #search_button
        a.site-page.social-icon.search
@@ -10,7 +10,7 @@ nav#nav
          span=' '+_p('search')
    !=fragment_cache('menus', function(){return partial('includes/header/menu_item')})

-    span.toggle-menu.close
+    span#toggle-menu.close
      a.site-page
        i.fas.fa-bars.fa-fw

--- a/layout/includes/third-party/comments/disqus.pug
+++ b/layout/includes/third-party/comments/disqus.pug
@@ -25,7 +25,7 @@ script.
  }

  if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) loadComment(document.getElementById('disqus_thread'), loadDisqus)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqus)
    else loadDisqus()
  } else {
    function loadOtherComment () {
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/layout/includes/third-party/comments/disqusjs.pug
@@ -34,7 +34,7 @@ script.
  }

  if ('!{theme.comments.use[0]}' === 'Disqusjs' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) loadComment(document.getElementById('disqus_thread'), loadDisqusjs)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqusjs)
    else loadDisqusjs()
  }
  else {
--- a/layout/includes/third-party/comments/facebook_comments.pug
+++ b/layout/includes/third-party/comments/facebook_comments.pug
@@ -16,7 +16,7 @@ script.
  }

  if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
    else loadFBComment()
  } else {
    function loadOtherComment () {
--- a/layout/includes/third-party/comments/gitalk.pug
+++ b/layout/includes/third-party/comments/gitalk.pug
@@ -40,7 +40,7 @@ script.
  }

  if ('!{theme.comments.use[0]}' === 'Gitalk' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) loadComment(document.getElementById('gitalk-container'), loadGitalk)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('gitalk-container'), loadGitalk)
    else loadGitalk()
  } else {
    function loadOtherComment () {
--- a/layout/includes/third-party/comments/livere.pug
+++ b/layout/includes/third-party/comments/livere.pug
@@ -16,7 +16,7 @@ script.
  }

  if ('!{theme.comments.use[0]}' === 'Livere' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) loadComment(document.getElementById('lv-container'), loadLivere)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('lv-container'), loadLivere)
    else loadLivere()
  }
  else {
--- a/layout/includes/third-party/comments/utterances.pug
+++ b/layout/includes/third-party/comments/utterances.pug
@@ -25,7 +25,7 @@ script.
  }

  if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) loadComment(document.getElementById('utterances-wrap'), loadUtterances)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
    else loadUtterances()
  } else {
    function loadOtherComment () {
--- a/layout/includes/third-party/comments/valine.pug
+++ b/layout/includes/third-party/comments/valine.pug
@@ -29,7 +29,7 @@ script.
  }

  if ('!{theme.comments.use[0]}' === 'Valine' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) loadComment(document.querySelector('#vcomment'),loadValine)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#vcomment'),loadValine)
    else setTimeout(() => loadValine(), 0)
  } else {
    function loadOtherComment () {
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/layout/includes/third-party/newest-comments/disqus-comment.pug
@@ -43,7 +43,7 @@ script.
        
        result += `<div class='content'>
        <a class='comment' href='${array[i].url}'>${array[i].content}</a>
-        <div class='name'><span>${array[i].nick}</span><time> / ${diffDate(array[i].date, true)}</time></div>
+        <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
        </div></div>`
      }

--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/layout/includes/third-party/newest-comments/github-issues.pug
@@ -42,7 +42,7 @@ script.

        result += `<div class='content'>
        <a class='comment' href='${array[i].url}'>${array[i].content}</a>
-        <div class='name'><span>${array[i].nick}</span><time> / ${diffDate(array[i].date, true)}</time></div>
+        <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
        </div></div>`
      }

--- a/layout/includes/third-party/newest-comments/leancloud.pug
+++ b/layout/includes/third-party/newest-comments/leancloud.pug
@@ -16,8 +16,8 @@ script.

    const getIcon = (icon, mail) => {
      if (icon) return icon 
-      let defaultIcon = '!{theme.newest_comments.leancloud.default_avatar}' || '404'
-      let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase())}?d=${defaultIcon}`
+      let defaultIcon = '!{ theme.newest_comments.leancloud.default_avatar ? `?d=${theme.newest_comments.leancloud.default_avatar}` : ''}'
+      let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase()) + defaultIcon}`
      return iconUrl
    }

@@ -33,7 +33,7 @@ script.

        result += `<div class='content'>
        <a class='comment' href='${array[i].url}'>${array[i].content}</a>
-        <div class='name'><span>${array[i].nick}</span><time> / ${diffDate(array[i].date, true)}</time></div>
+        <div class='name'><span>${array[i].nick}</span><time> / ${btf.diffDate(array[i].date, true)}</time></div>
        </div></div>`
      }

--- a/layout/includes/third-party/pjax.pug
+++ b/layout/includes/third-party/pjax.pug
@@ -15,7 +15,7 @@ script.
    '.js-pjax'
  ]

-  if (!{theme.Open_Graph_meta && theme.comments.use && theme.comments.use.includes('Livere')}) {
+  if (!{Boolean(theme.Open_Graph_meta && theme.comments.use && theme.comments.use.includes('Livere'))}) {
    pjaxSelectors.unshift('meta[property="og:image"]', 'meta[property="og:title"]', 'meta[property="og:url"]')
  }

@@ -28,13 +28,13 @@ script.
  })

  document.addEventListener('pjax:complete', function () {
-    refreshFn()
+    window.refreshFn()

    $('script[data-pjax]').each(function () {
      $(this).parent().append($(this).remove())
    })

-    GLOBAL_CONFIG.islazyload && lazyLoadInstance.update()
+    GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()

    typeof chatBtnFn === 'function' && chatBtnFn()
    typeof panguInit === 'function' && panguInit()
--- a/scripts/helpers/aside_archives.js
+++ b/scripts/helpers/aside_archives.js
@@ -91,7 +91,7 @@ hexo.extend.helper.register('aside_archives', function (options = {}) {

  if (len > Judge) {
    result += '<li class="card-archive-list-item more is-center">'
-    result += `<a class="card-archive-list-link-more" href="${this.url_for(archiveDir)}">
+    result += `<a class="card-archive-list-link-more" href="${this.url_for(archiveDir)}/">
              <span>${moreButton}</span><i class="fas fa-angle-right"  ></i></a></li>`
  }
  result += '</ul>'
--- a/scripts/helpers/aside_categories.js
+++ b/scripts/helpers/aside_categories.js
@@ -83,13 +83,13 @@ hexo.extend.helper.register('aside_categories', function (categories, options) {
    let moreHtml = ''
    if (categories.length <= limit) return ''
    moreHtml += '<li class="card-category-list-item more is-center">'
-    moreHtml += `<a class="card-category-list-link-more" href="${categoryDir}">
+    moreHtml += `<a class="card-category-list-link-more" href="${categoryDir}/">
                <span>${buttonLabel}</span><i class="fas fa-angle-right"></i></a></li>`

    return moreHtml
  }

-  return `<ul class="card-category-list">
+  return `<ul class="card-category-list" id="aside-cat-list">
            ${list[0]}
            ${moreButton()}
            </ul>`
--- a/scripts/helpers/related_post.js
+++ b/scripts/helpers/related_post.js
@@ -48,11 +48,11 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
  if (relatedPosts.length > 0) {
    result += '<div class="relatedPosts">'
    result +=
-      '<div class="relatedPosts_headline"><i class="fas fa-thumbs-up fa-fw"></i><span>' +
+      '<div class="headline"><i class="fas fa-thumbs-up fa-fw"></i><span>' +
      ' ' +
      headlineLang +
      '</span></div>'
-    result += '<div class="relatedPosts_list">'
+    result += '<div class="relatedPosts-list">'

    for (let i = 0; i < Math.min(relatedPosts.length, limitNum); i++) {
      const cover =
@@ -60,33 +60,33 @@ hexo.extend.helper.register('related_posts', function (currentPost, allPosts) {
          ? relatedPosts[i].randomcover
          : relatedPosts[i].cover
      result +=
-        '<div class="relatedPosts_item"><a href="' +
+        '<div><a href="' +
        hexoConfig.root +
        relatedPosts[i].path +
        '" title="' +
        relatedPosts[i].title +
        '">'
      result +=
-        '<img class="relatedPosts_cover" ' +
+        '<img class="cover" ' +
        lazySrc +
        '="' +
        this.url_for(cover) +
        '">'
      if (dateType === 'created') {
        result +=
-          '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="far fa-calendar-alt fa-fw"></i>' +
+          '<div class="content is-center"><div class="date"><i class="far fa-calendar-alt fa-fw"></i>' +
          ' ' +
          this.date(relatedPosts[i].created, hexoConfig.date_format) +
          '</div>'
      } else {
        result +=
-          '<div class="relatedPosts_main is-center"><div class="relatedPosts_date"><i class="fas fa-history fa-fw"></i>' +
+          '<div class="content is-center"><div class="date"><i class="fas fa-history fa-fw"></i>' +
          ' ' +
          this.date(relatedPosts[i].updated, hexoConfig.date_format) +
          '</div>'
      }
      result +=
-        '<div class="relatedPosts_title">' + relatedPosts[i].title + '</div>'
+        '<div class="title">' + relatedPosts[i].title + '</div>'
      result += '</div></a></div>'
    }

--- a/source/css/_highlight/highlight.styl
+++ b/source/css/_highlight/highlight.styl
@@ -123,7 +123,7 @@ blockquote
    .code-lang
      position: absolute
      left: .7rem
-      text-transform: capitalize
+      text-transform: uppercase
      font-weight: bold
      font-size: 1.15em

--- a/source/css/_highlight/highlight/diff.styl
+++ b/source/css/_highlight/highlight/diff.styl
@@ -1,4 +1,3 @@
-// For diff highlight
 figure.highlight
  table
    &::-webkit-scrollbar-thumb
--- a/source/css/_highlight/theme.styl
+++ b/source/css/_highlight/theme.styl
@@ -116,3 +116,4 @@ if $highlight_theme == false
    color: $highlight-foreground,
    bg-color: darken($highlight-background, 5)
  }
+  $highlight-scrollbar = darken($highlight-background, 8)
--- a/source/css/_layout/aside.styl
+++ b/source/css/_layout/aside.styl
@@ -87,6 +87,10 @@
    span
      margin-left: .5rem

+    & + div,
+    & + ul
+      padding: .3rem 0 0
+
  .sticky_layout
    +minWidth900()
      position: sticky
@@ -102,8 +106,6 @@
        color: $text-hover !important

  .aside-list
-    margin: 10px 0 -15px
-
    & > span
      display: block
      margin-bottom: .5rem
@@ -121,7 +123,7 @@
        border-bottom: 1px dashed #f5f5f5

      &:last-child
-        margin-bottom: .3rem
+        padding-bottom: 0

      .thumbnail
        overflow: hidden
@@ -173,7 +175,6 @@
  .card-archives ul.card-archive-list,
  .card-categories ul.card-category-list
    margin: 0
-    padding: .2rem 0 0
    list-style: none

  .card-archives ul.card-archive-list > .card-archive-list-item,
@@ -241,12 +242,10 @@

  .card-webinfo
    .webinfo
-      padding: .2rem .5rem
-
      .webinfo-item
        display: flex
        align-items: center
-        padding: 4px 0 0
+        padding: .1rem .5rem 0

        div
          &:first-child
--- a/source/css/_layout/head.styl
+++ b/source/css/_layout/head.styl
@@ -188,13 +188,13 @@ _:future,
    padding: 0 16px

  &:not(.fixed)
-    .menus
+    #menus
      padding-right: 0 !important

  #blog_name
    flex: 1

-  .toggle-menu
+  #toggle-menu
    display: none
    padding: .1rem 0 0 .3rem
    vertical-align: top
@@ -218,7 +218,7 @@ _:future,

    a,
    #site-name,
-    .toggle-menu
+    #toggle-menu
      color: var(--font-color)
      text-shadow: none

@@ -302,7 +302,7 @@ _:future,
            text-shadow: none

  &.hide-menu
-    .toggle-menu
+    #toggle-menu
      display: inline-block !important

      .site-page
--- a/source/css/_layout/relatedposts.styl
+++ b/source/css/_layout/relatedposts.styl
@@ -1,12 +1,13 @@
 .relatedPosts
  margin-top: 1rem

-  .relatedPosts_headline
+  & > .headline
    margin-bottom: 5px
    font-weight: 700
    font-size: 1.43em

-  .relatedPosts_item
+  & > .relatedPosts-list
+    & > div
      position: relative
      display: inline-block
      overflow: hidden
@@ -17,7 +18,7 @@
      vertical-align: bottom

      &:hover
-      .relatedPosts_cover
+        .cover
          opacity: .8
          transform: scale(1.1)

@@ -29,25 +30,25 @@
      +maxWidth600()
        width: calc(100% - 4px)

-  .relatedPosts_cover
+    .cover
      width: 100%
      height: 100%
      opacity: .4
      transition: all .6s
      object-fit: cover

-  .relatedPosts_main
+    .content
      position: absolute
      top: 50%
      padding: 0 1rem
      width: 100%
      transform: translate(0, -50%)

-    .relatedPosts_date
+      .date
        color: var(--light-grey)
        font-size: 90%

-    .relatedPosts_title
+      .title
        @extend .limit-more-line
        color: var(--white)
        -webkit-line-clamp: 2
--- a/source/js/main.js
+++ b/source/js/main.js
@@ -6,8 +6,9 @@
  * 傳入 2 正常狀態下
  */

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

  const adjustMenu = function (n) {
@@ -50,7 +51,7 @@ const closeSidebar = () => {
    $('#sidebar').removeClass('tocOpenPc').animate({
      left: '-300px'
    }, 400)
-  $('.menus').animate({
+    $('#menus').animate({
      paddingRight: 0
    }, 400)
    $('#body-wrap').animate({
@@ -70,7 +71,7 @@ const openSidebar = () => {
    $('#sidebar').addClass('tocOpenPc').animate({
      left: 0
    }, 400)
-  $('.menus').animate({
+    $('#menus').animate({
      paddingRight: 300
    }, 400)
    $('#body-wrap').animate({
@@ -96,7 +97,7 @@ const toggleSidebar = function () {
 */

  const sidebarFn = () => {
-  const $toggleMenu = $('.toggle-menu')
+    const $toggleMenu = $('#toggle-menu')
    const $mobileSidebarMenus = $('#mobile-sidebar-menus')
    const $mobileTocButton = $('#mobile-toc-button')
    const $menuMask = $('#menu_mask')
@@ -104,7 +105,7 @@ const sidebarFn = () => {
    const $sidebar = $('#sidebar')

    function openMobileSidebar (name) {
-    sidebarPaddingR()
+      btf.sidebarPaddingR()
      $body.css('overflow', 'hidden')
      $menuMask.fadeIn()

@@ -158,7 +159,7 @@ const sidebarFn = () => {
    })

    const mql = window.matchMedia('(max-width: 1024px)')
-  mql.addEventListener('change', function (ev) {
+    mql.addListener((ev) => {
      if (ev.matches) {
        if ($sidebar.hasClass('tocOpenPc')) closeSidebar()
      } else {
@@ -170,8 +171,8 @@ const sidebarFn = () => {
    // toc元素點擊
    $sidebar.find('.toc-link').on('click', function (e) {
      e.preventDefault()
-    scrollToDest(decodeURI($(this).attr('href')))
-    if (window.innerWidth <= 1024) {
+      btf.scrollToDest(decodeURI($(this).attr('href')))
+      if (window.innerWidth < 1024) {
        closeMobileSidebar('toc')
      }
    })
@@ -182,7 +183,7 @@ const sidebarFn = () => {
 */
  const scrollDownInIndex = () => {
    $('#scroll_down').on('click', function () {
-    scrollToDest('#content-inner')
+      btf.scrollToDest('#content-inner')
    })
  }

@@ -256,7 +257,7 @@ const addHighlightTool = function () {
          if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
            document.execCommand('copy')
            if (GLOBAL_CONFIG.Snackbar !== undefined) {
-            snackbarShow(GLOBAL_CONFIG.copy.success)
+              btf.snackbarShow(GLOBAL_CONFIG.copy.success)
            } else {
              $(ctx).prev('.copy-notice')
                .text(GLOBAL_CONFIG.copy.success)
@@ -272,7 +273,7 @@ const addHighlightTool = function () {
            }
          } else {
            if (GLOBAL_CONFIG.Snackbar !== undefined) {
-            snackbarShow(GLOBAL_CONFIG.copy.noSupport)
+              btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
            } else {
              $(ctx).prev('.copy-notice').text(GLOBAL_CONFIG.copy.noSupport)
            }
@@ -329,11 +330,11 @@ const runJustifiedGallery = function () {
        })
      }

-    if (detectJgJsLoad) initJustifiedGallery($justifiedGallery)
+      if (detectJgJsLoad) btf.initJustifiedGallery($justifiedGallery)
      else {
        $('head').append(`<link rel="stylesheet" type="text/css" href="${GLOBAL_CONFIG.justifiedGallery.css}">`)
        $.getScript(`${GLOBAL_CONFIG.justifiedGallery.js}`, function () {
-        initJustifiedGallery($justifiedGallery)
+          btf.initJustifiedGallery($justifiedGallery)
        })
        detectJgJsLoad = true
      }
@@ -383,7 +384,7 @@ const scrollFn = function () {
    const $nav = $('#nav')
    const isChatBtnHide = typeof chatBtnHide === 'function'
    const isChatBtnShow = typeof chatBtnShow === 'function'
-  $(window).scroll(throttle(function (event) {
+    $(window).scroll(btf.throttle(function (event) {
      const currentTop = $(this).scrollTop()
      const isDown = scrollDirection(currentTop)
      if (currentTop > 56) {
@@ -427,7 +428,7 @@ const tocFn = function () {
    $('.toc-child').hide()

    // main of scroll
-  $(window).scroll(throttle(function (event) {
+    $(window).scroll(btf.throttle(function (event) {
      const currentTop = $(this).scrollTop()
      scrollPercent(currentTop)
      findHeadPosition(currentTop)
@@ -443,16 +444,18 @@ const tocFn = function () {
    }

    const scrollPercent = function (currentTop) {
-    const docHeight = $('#article-container').height()
+      const $dom = $('#article-container')
+      const docHeight = $dom.height()
      const winHeight = $(window).height()
+      const headerHeight = $dom.offset().top
      const contentMath = (docHeight > winHeight) ? (docHeight - winHeight) : ($(document).height() - winHeight)
-    const scrollPercent = (currentTop) / (contentMath)
+      const scrollPercent = (currentTop - headerHeight) / (contentMath)
      const scrollPercentRounded = Math.round(scrollPercent * 100)
      const percentage = (scrollPercentRounded > 100) ? 100
        : (scrollPercentRounded <= 0) ? 0
          : scrollPercentRounded
-    $('.progress-num').text(percentage)
-    $('.sidebar-toc__progress-bar').animate({
+      $('#sidebar .progress-num').text(percentage)
+      $('#sidebar .sidebar-toc__progress-bar').animate({
        width: percentage + '%'
      }, 100)
    }
@@ -548,11 +551,11 @@ if ($('#darkmode').length) {
      if (nowMode === 'light') {
        activateDarkMode()
        saveToLocal.set('theme', 'dark', 2)
-      GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
+        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
      } else {
        activateLightMode()
        saveToLocal.set('theme', 'light', 2)
-      GLOBAL_CONFIG.Snackbar !== undefined && snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
+        GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
      }
    }

@@ -568,7 +571,7 @@ if ($('#darkmode').length) {
  $rightsideEle.on('click', '#rightside_config', () => $('#rightside-config-hide').toggleClass('show'))

  // Back to top
-$rightsideEle.on('click', '#go-up', () => scrollToDest('body'))
+  $rightsideEle.on('click', '#go-up', () => btf.scrollToDest('body'))

  /**
 * menu
@@ -621,7 +624,7 @@ const addRuntime = () => {
    const $runtimeCount = $('#runtimeshow')
    if ($runtimeCount.length) {
      const publishDate = $runtimeCount.attr('data-publishDate')
-    $runtimeCount.text(diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime)
+      $runtimeCount.text(btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime)
    }
  }

@@ -632,8 +635,7 @@ const addLastPushDate = () => {
    const $lastPushDateItem = $('#last-push-date')
    if ($lastPushDateItem.length) {
      const lastPushDate = $lastPushDateItem.attr('data-lastPushDate')
-    const diffDay = diffDate(lastPushDate, true)
-    console.log(diffDay)
+      const diffDay = btf.diffDate(lastPushDate, true)
      $lastPushDateItem.text(diffDay)
    }
  }
@@ -677,7 +679,7 @@ const clickFnOfTagHide = function () {
        $hideContent.toggle()
        if ($this.hasClass('open')) {
          if ($hideContent.find('.justified-gallery').length > 0) {
-          initJustifiedGallery($hideContent.find('.justified-gallery'))
+            btf.initJustifiedGallery($hideContent.find('.justified-gallery'))
          }
        }
      })
@@ -700,7 +702,7 @@ const tabsFn = {
          $tabContent.find(`> ${tabId}`).addClass('active')
          const $isTabJustifiedGallery = $tabContent.find(tabId).find('.justified-gallery')
          if ($isTabJustifiedGallery.length > 0) {
-          initJustifiedGallery($isTabJustifiedGallery)
+            btf.initJustifiedGallery($isTabJustifiedGallery)
          }
        }
      })
@@ -708,13 +710,13 @@ const tabsFn = {
    backToTop: () => {
      const backToTopBtn = $('#article-container .tabs .tab-to-top')
      backToTopBtn.on('click', function () {
-      scrollToDest($(this).parents('.tabs'))
+        btf.scrollToDest($(this).parents('.tabs'))
      })
    }
  }

  const toggleCardCategory = function () {
-  const $cardCategory = $('.card-category-list-item.parent i')
+    const $cardCategory = $('#aside-cat-list .card-category-list-item.parent i')
    $cardCategory.on('click', function (e) {
      e.preventDefault()
      const $this = $(this)
@@ -745,7 +747,7 @@ const switchComments = function () {

  const addPostOutdateNotice = function () {
    const data = GLOBAL_CONFIG.noticeOutdate
-  var diffDay = diffDate(GLOBAL_CONFIG_SITE.postUpdate)
+    var diffDay = btf.diffDate(GLOBAL_CONFIG_SITE.postUpdate)
    if (diffDay >= data.limitDay) {
      const code = `<div class="post-outdate-notice">${data.messagePrev + ' ' + diffDay + ' ' + data.messageNext}</div>`
      if (data.position === 'top') {
@@ -756,23 +758,12 @@ const addPostOutdateNotice = function () {
    }
  }

-/**
- * lazyload
- */
-
-if (GLOBAL_CONFIG.islazyload) {
-  window.lazyLoadOptions = {
+  const lazyloadImg = () => {
+    window.lazyLoadInstance = new LazyLoad({
      elements_selector: 'img',
      threshold: 0,
      data_src: 'lazy-src'
-  }
-  window.addEventListener(
-    'LazyLoad::Initialized',
-    function (event) {
-      window.lazyLoadInstance = event.detail.instance
-    },
-    false
-  )
+    })
  }

  const unRefreshFn = function () {
@@ -783,11 +774,12 @@ const unRefreshFn = function () {
    })

    clickFnOfSubMenu()
+    GLOBAL_CONFIG.islazyload && lazyloadImg()
    GLOBAL_CONFIG.copyright !== undefined && addCopyright()
    GLOBAL_CONFIG.baiduPush && pushToBaidu()
  }

-const refreshFn = function () {
+  window.refreshFn = function () {
    initAdjust()

    if (GLOBAL_CONFIG_SITE.isPost) {
@@ -814,7 +806,6 @@ const refreshFn = function () {
    switchComments()
  }

-$(function () {
  refreshFn()
  unRefreshFn()
 })
--- a/source/js/third-party/fireworks.js
+++ b/source/js/third-party/fireworks.js
@@ -9,7 +9,7 @@ if (canvasEl) {
  var tap = 'mousedown'
  var colors = ['#FF1461', '#18FF92', '#5A87FF', '#FBF38C']

-  var setCanvasSize = debounce(function () {
+  var setCanvasSize = btf.debounce(function () {
    canvasEl.width = window.innerWidth
    canvasEl.height = window.innerHeight
    canvasEl.style.width = window.innerWidth + 'px'
--- a/source/js/tw_cn.js
+++ b/source/js/tw_cn.js
@@ -50,14 +50,14 @@
      translateButtonObject.innerHTML = msgToTraditionalChinese
      saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
      translateBody()
-      if (isSnackbar) snackbarShow(snackbarData.cht_to_chs)
+      if (isSnackbar) btf.snackbarShow(snackbarData.cht_to_chs)
    } else if (targetEncoding === 2) {
      currentEncoding = 2
      targetEncoding = 1
      translateButtonObject.innerHTML = msgToSimplifiedChinese
      saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
      translateBody()
-      if (isSnackbar) snackbarShow(snackbarData.chs_to_cht)
+      if (isSnackbar) btf.snackbarShow(snackbarData.chs_to_cht)
    }
  }
  function JTPYStr () {
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -1,6 +1,7 @@
 /* eslint-disable no-unused-vars */

-function debounce (func, wait, immediate) {
+var btf = {
+  debounce: function (func, wait, immediate) {
    let timeout
    return function () {
      const context = this
@@ -14,9 +15,9 @@ function debounce (func, wait, immediate) {
      timeout = setTimeout(later, wait)
      if (callNow) func.apply(context, args)
    }
-}
+  },

-function throttle (func, wait, options) {
+  throttle: function (func, wait, options) {
    let timeout, context, args
    let previous = 0
    if (!options) options = {}
@@ -48,18 +49,18 @@ function throttle (func, wait, options) {
    }

    return throttled
-}
+  },

-function sidebarPaddingR () {
+  sidebarPaddingR: () => {
    const innerWidth = window.innerWidth
    const clientWidth = document.body.clientWidth
    const paddingRight = innerWidth - clientWidth
    if (innerWidth !== clientWidth) {
      $('body').css('padding-right', paddingRight)
    }
-}
+  },

-function scrollToDest (name) {
+  scrollToDest: name => {
    const scrollOffset = $(name).offset().top
    let offset
    if ($(window).scrollTop() > scrollOffset) {
@@ -70,9 +71,9 @@ function scrollToDest (name) {
    $('body,html').animate({
      scrollTop: scrollOffset - offset
    })
-}
+  },

-function snackbarShow (text, showAction, duration) {
+  snackbarShow: (text, showAction, duration) => {
    const sa = (typeof showAction !== 'undefined') ? showAction : false
    const dur = (typeof duration !== 'undefined') ? duration : 2000
    const position = GLOBAL_CONFIG.Snackbar.position
@@ -84,9 +85,9 @@ function snackbarShow (text, showAction, duration) {
      duration: dur,
      pos: position
    })
-}
+  },

-const initJustifiedGallery = function (selector) {
+  initJustifiedGallery: function (selector) {
    selector.each(function (i, o) {
      if ($(this).is(':visible')) {
        $(this).justifiedGallery({
@@ -95,9 +96,9 @@ const initJustifiedGallery = function (selector) {
        })
      }
    })
-}
+  },

-const diffDate = (d, more = false) => {
+  diffDate: (d, more = false) => {
    const dateNow = new Date()
    const datePost = new Date(d)
    const dateDiff = dateNow.getTime() - datePost.getTime()
@@ -117,9 +118,9 @@ const diffDate = (d, more = false) => {
      result = dayDiff
    }
    return result
-}
+  },

-const loadComment = (dom, callback) => {
+  loadComment: (dom, callback) => {
    if ('IntersectionObserver' in window) {
      const observerItem = new IntersectionObserver((entries) => {
        if (entries[0].isIntersecting) {
@@ -132,3 +133,4 @@ const loadComment = (dom, callback) => {
      callback()
    }
  }
+}