improvements: 代碼名全大寫

improvements: 補全card-categories和card-archives的 '查看更多‘鏈接 close #337
fix: 修復comments沒設置時，報Unexpected token ')'的bugs close #344
improvements: 優化js和html
fix: 修復toc 滾動百分比不準的Bugs

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/)

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)
 
 

_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
+# blog_title_font:
-  font-family: Titillium Web, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif
+  # 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

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))

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

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

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

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
 

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 () {

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 {

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 () {

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 () {

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 {

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 () {

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 () {

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>`
       }
 

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>`
       }
 

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 defaultIcon = '!{ theme.newest_comments.leancloud.default_avatar ? `?d=${theme.newest_comments.leancloud.default_avatar}` : ''}'
-      let iconUrl = `https://gravatar.loli.net/avatar/${md5(mail.toLowerCase())}?d=${defaultIcon}`
+      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>`
       }
 

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()

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>'

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>`

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>'
     }
 

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
 

source/css/_highlight/highlight/diff.styl

@@ -1,4 +1,3 @@
-// For diff highlight
 figure.highlight
   table
     &::-webkit-scrollbar-thumb

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)

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

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

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

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')))
+      btf.scrollToDest(decodeURI($(this).attr('href')))
-    if (window.innerWidth <= 1024) {
+      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 .progress-num').text(percentage)
-    $('.sidebar-toc__progress-bar').animate({
+      $('#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)
+      const diffDay = btf.diffDate(lastPushDate, true)
-    console.log(diffDay)
       $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 () {
     }
   }
 
-/**
+  const lazyloadImg = () => {
- * lazyload
+    window.lazyLoadInstance = new LazyLoad({
- */
-
-if (GLOBAL_CONFIG.islazyload) {
-  window.lazyLoadOptions = {
       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()
 })

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'

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 () {

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()
     }
   }
+}