Merge branch 'dev'

feat: 支持随机友链顺序

README.md

@@ -1,7 +1,5 @@
 <div align="right">
-  Language:
-  🇺🇸
-  <a title="Chinese" href="/README_CN.md">🇨🇳</a>
+<a title="Chinese" href="/README_CN.md">中文</a>
 </div>
 
 # hexo-theme-butterfly
@@ -14,7 +12,7 @@
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
-Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://crazywong.com/)
+Demo: 👍 [Butterfly](https://butterfly.js.org/)  ||   🤞 [CrazyWong](https://blog.crazywong.com/)
 
 Docs: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
 
@@ -62,17 +60,17 @@ npm i hexo-theme-butterfly
 
 - [x] Card UI Design
 - [X] Support sub-menu
-- [x] Two Column designs
+- [x] Two-column layout
 - [x] Responsive Web Design
 - [x] Dark Mode
 - [x] Pjax
 - [x] Read Mode
 - [x] Conversion between Traditional and Simplified Chinese
 - [X] TOC catalog is available for both computers and mobile phones
-- [X] Color themes (darker/pale night/light/ocean/mac/mac light), support custom colors
+- [X] Built-in Syntax Highlighting Themes (darker/pale night/light/ocean/mac/mac light), also support customization
 - [X] Code Blocks (Display code language/close or expand Code Blocks/Copy Button/word wrap)
 - [X] Disable copy/Add a Copyright Notice to the Copied Text
-- [X] Search (Algolia SearchZ/Local Search)
+- [X] Search (Algolia Search/Local Search)
 - [x] Mathjax and Katex
 - [x] Built-in 404 page
 - [x] WordCount

README_CN.md

@@ -1,7 +1,5 @@
 <div align="right">
-  語言:
-  中文
-  <a title="English" href="/README.md">英文</a>
+  <a title="English" href="/README.md">English</a>
 </div>
 
 # hexo-theme-butterfly
@@ -14,7 +12,7 @@
 
 ![](https://cdn.jsdelivr.net/gh/jerryc127/CDN@m2/img/theme-butterfly-readme.png)
 
-預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://crazywong.com/)
+預覽: 👍 [Butterfly](https://butterfly.js.org/)  ||  🤞 [CrazyWong](https://blog.crazywong.com/)
 
 文檔: 📖 [Butterfly Docs](https://butterfly.js.org/posts/21cfbf15/)
 
@@ -72,7 +70,7 @@ theme: butterfly
 - [X] 內置多種代碼配色（darker/pale night/light/ocean/mac/mac light），可自定義代碼配色
 - [X] 代碼塊顯示代碼語言/關閉或展開代碼塊/代碼複製/代碼自動換行
 - [X] 可關閉文字複製/可開啟內容複製增加版權信息）
-- [X] 兩種搜索（Algolia搜索和本地搜索）
+- [X] 兩種搜索（ Algolia 搜索和本地搜索）
 - [x] Mathjax 和 Katex
 - [x] 內置404頁面
 - [x] 顯示字數統計

_config.yml

@@ -645,6 +645,11 @@ background:
 # Footer Background
 footer_bg: false
 
+# Add mask to header or footer (为 header 或 footer 添加黑色半透遮罩)
+mask:
+  header: true
+  footer: true
+
 # the position of bottom right button/default unit: px (右下角按鈕距離底部的距離/默認單位為px)
 rightside-bottom:
 

layout/includes/head/config.pug

@@ -127,5 +127,6 @@ script.
     percent: {
       toc: !{theme.toc.scroll_percent},
       rightside: !{theme.rightside_scroll_percent},
-    }
+    },
+    autoDarkmode: !{theme.darkmode.enable && theme.darkmode.autoChangeMode === 1}
   }

layout/includes/header/index.pug

@@ -44,7 +44,7 @@ header#page-header(class=`${isHomeClass+isFixedClass}` style=bg_img)
             span#subtitle
         if(theme.social)
           #site_social_icons
-            !=fragment_cache('social', function(){return partial('includes/header/social')})
+            !=partial('includes/header/social', {}, {cache: true})
       #scroll-down
         i.fas.fa-angle-down.scroll-down-effects
     else

layout/includes/loading/fullpage-loading.pug

@@ -9,21 +9,25 @@
     .loading-word= _p('loading')
 
 script.
+  (()=>{
+    const $loadingBox = document.getElementById('loading-box')
+    const $body = document.body
     const preloader = {
       endLoading: () => {
-      document.body.style.overflow = '';
-      document.getElementById('loading-box').classList.add("loaded")
+        $body.style.overflow = ''
+        $loadingBox.classList.add('loaded')
       },
       initLoading: () => {
-      document.body.style.overflow = 'hidden';
-      document.getElementById('loading-box').classList.remove("loaded")
+        $body.style.overflow = 'hidden'
+        $loadingBox.classList.remove('loaded')
       }
     }
 
     preloader.initLoading()
-  window.addEventListener('load',()=> { preloader.endLoading() })
+    window.addEventListener('load',() => { preloader.endLoading() })
 
     if (!{theme.pjax && theme.pjax.enable}) {
       document.addEventListener('pjax:send', () => { preloader.initLoading() })
       document.addEventListener('pjax:complete', () => { preloader.endLoading() })
     }
+  })()

layout/includes/mixins/post-ui.pug

@@ -70,7 +70,7 @@ mixin postUI(posts)
                 block
               span.article-meta-label= ' ' + _p('card_post_count')
           
-          if theme.comments.card_post_count
+          if theme.comments.card_post_count && theme.comments.use
             case theme.comments.use[0]
               when 'Disqus'
                 +countBlockInIndex
@@ -89,7 +89,7 @@ mixin postUI(posts)
               when 'Waline'
                 +countBlockInIndex
                   a(href=url_for(link) + '#post-comment')
-                    span.waline-comment-count(id=url_for(link))
+                    span.waline-comment-count(data-path=url_for(link))
                       i.fa-solid.fa-spinner.fa-spin
               when 'Twikoo'
                 +countBlockInIndex

layout/includes/page/flink.pug

@@ -1,7 +1,10 @@
 #article-container
   .flink
-    - let pageContent = page.content
-    if page.flink_url
+    - let { content, random, flink_url } = page
+    - let pageContent = content
+
+    if flink_url || random
+      - const linkData = flink_url ? false : site.data.link || false
       script.
         (()=>{
           const replaceSymbol = (str) => {
@@ -9,9 +12,7 @@
           }
 
           let result = ""
-          fetch("!{url_for(page.flink_url)}")
-            .then(response => response.json())
-            .then(str => {
+          const add = (str) => {
             for(let i = 0; i < str.length; i++){
               const replaceClassName = replaceSymbol(str[i].class_name)
               const className = str[i].class_name ? `<h2 id="${replaceClassName}"><a href="#${replaceClassName}" class="headerlink" title="${str[i].class_name}"></a>${str[i].class_name}</h2>` : ""
@@ -19,6 +20,9 @@
 
               let listResult = ""
               const lists = str[i].link_list
+              if (!{random === true}) {
+                lists.sort(() => Math.random() - 0.5)
+              }
               for(let j = 0; j < lists.length; j++){
                 listResult += `
                   <div class="flink-list-item">
@@ -37,7 +41,16 @@
 
             document.querySelector(".flink").insertAdjacentHTML("afterbegin", result)
             window.lazyLoadInstance && window.lazyLoadInstance.update()
-            })
+          }
+
+          const linkData = !{JSON.stringify(linkData)}
+          if (!{Boolean(flink_url)}) {
+            fetch("!{url_for(flink_url)}")
+              .then(response => response.json())
+              .then(add)
+          } else if (linkData) {
+            add(linkData)
+          }
         })()
 
     else
@@ -67,4 +80,3 @@
 
         - pageContent = result + pageContent
     != pageContent
-

layout/includes/rightside.pug

@@ -23,7 +23,7 @@ mixin rightsideItem(array)
             i.fas.fa-list-ul
       when 'chat'
         if chat_btn
-          button#chat_btn(type="button" title=_p("rightside.chat"))
+          button#chat-btn(type="button" title=_p("rightside.chat"))
             i.fas.fa-sms
       when 'comment'
         if commentsJsLoad

layout/includes/sidebar.pug

@@ -14,5 +14,5 @@
         .headline= _p('aside.categories') 
         .length-num= site.categories.length
 
-    hr
+    hr.custom-hr
     !=partial('includes/header/menu_item', {}, {cache: true})

layout/includes/third-party/abcjs/index.pug

@@ -1,4 +1,4 @@
-if theme.abcjs.enable
+if theme.abcjs && theme.abcjs.enable
   if theme.abcjs.per_page
     if is_post() || is_page()
       include ./abcjs.pug

layout/includes/third-party/card-post-count/artalk.pug

@@ -2,19 +2,34 @@
 
 script.
   (() => {
-    const getArtalkCount = () => {
-      const runWidget = () => {
-        Artalk.LoadCountWidget({
-          server: '!{server}',
-          site: '!{site}',
-          countEl: '.artalk-count'
+    const getArtalkCount = async() => {
+      try {
+        const eleGroup = document.querySelectorAll('#recent-posts .artalk-count')
+        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-page-key'))
+
+        const headerList = {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/x-www-form-urlencoded',
+            'Origin': window.location.origin
+          },
+          body: new URLSearchParams({
+            'site_name': '!{site}',
+            'type':'page_comment',
+            'page_keys': keyArray
           })
         }
 
-      if (typeof Artalk === 'function') runWidget()
-      else getScript('!{theme.asset.artalk_js}').then(runWidget)
-    }
+        const res = await fetch('!{server}/api/stat', headerList)
+        const result = await res.json()
 
+        keyArray.forEach((key, index) => {
+          eleGroup[index].textContent = result.data[key] || 0
+        })
+      } catch (err) {
+        console.error(err)
+      }
+    }
 
     window.pjax ? getArtalkCount() : window.addEventListener('load', getArtalkCount)
   })()

layout/includes/third-party/card-post-count/twikoo.pug

@@ -18,7 +18,7 @@ script.
           includeReply: false
         }).then(function (res) {
           document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => {
-            item.innerText = res[index].count
+            item.textContent = res[index].count
           })
         }).catch(function (err) {
           console.log(err)

layout/includes/third-party/card-post-count/waline.pug

@@ -1,17 +1,19 @@
 script.
   (() => {
-    function loadWaline () {
-      function initWaline () {
-        let initData = {
-          el: null,
-          serverURL: '!{theme.waline.serverURL}',
-          comment: true
-        }
-        const waline = Waline.init(initData)
-      }
+    async function loadWaline () {
+      try {
+        const eleGroup = document.querySelectorAll('#recent-posts .waline-comment-count')
+        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-path'))
 
-      if (typeof Waline === 'object') initWaline() 
-      else getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+        const res = await fetch(`!{theme.waline.serverURL}/api/comment?type=count&url=${keyArray}`, { method: 'GET' })
+        const result = await res.json()
+        
+        result.data.forEach((count, index) => {
+          eleGroup[index].textContent = count
+        })
+      } catch (err) {
+        console.error(err)
+      }
     }
 
     window.pjax ? loadWaline() : window.addEventListener('load', loadWaline)

layout/includes/third-party/chat/chatra.pug

@@ -1,33 +1,50 @@
 //- https://chatra.io/help/api/
 script.
-  (function(d, w, c) {
-      w.ChatraID = '#{theme.chatra.id}';
-      var s = d.createElement('script');
-      w[c] = w[c] || function() {
-          (w[c].q = w[c].q || []).push(arguments);
-      };
-      s.async = true;
-      s.src = 'https://call.chatra.io/chatra.js';
-      if (d.head) d.head.appendChild(s);
-  })(document, window, 'Chatra');
+  (() => {
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
 
-  if (!{theme.chat_btn}) {
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
-        Chatra('openChat')
-      });
-    }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
+    if (isChatBtn) {
+      const close = () => {
+        Chatra('minimizeWidget')
         Chatra('hide')
       }
-      function chatBtnShow () {
+
+      const open = () => {
+        Chatra('openChat', true)
+        Chatra('show')
+      }
+
+      window.ChatraSetup = {
+        startHidden: true
+      }
+    
+      window.chatBtnFn = () => {
+        const isShow = document.getElementById('chatra').classList.contains('chatra--expanded')
+        isShow ? close() : open()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          Chatra('hide')
+        },
+        show: () => {
           Chatra('show')
         }
       }
     }
 
+    (function(d, w, c) {
+      w.ChatraID = '#{theme.chatra.id}'
+      var s = d.createElement('script')
+      w[c] = w[c] || function() {
+          (w[c].q = w[c].q || []).push(arguments)
+      }
+      s.async = true
+      s.src = 'https://call.chatra.io/chatra.js'
+      if (d.head) d.head.appendChild(s)
+    })(document, window, 'Chatra')
+
+  })()
+
 

layout/includes/third-party/chat/crisp.pug

@@ -1,4 +1,5 @@
 script.
+  (() => {
     window.$crisp = [];
     window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
     (function () {
@@ -10,27 +11,35 @@ script.
     })();
     $crisp.push(["safe", true])
 
-  if (!{theme.chat_btn}) {
-    $crisp.push(["do", "chat:hide"])
-    $crisp.push(["on", "chat:closed", function() {
-      $crisp.push(["do", "chat:hide"])
-    }])
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
+
+    if (isChatBtn) {
+      const open = () => {
         $crisp.push(["do", "chat:show"])
         $crisp.push(["do", "chat:open"])
-
-      });
       }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
+
+      const close = () => {
         $crisp.push(["do", "chat:hide"])
       }
-      function chatBtnShow () {
+
+      close()
+      $crisp.push(["on", "chat:closed", function() {
+        close()
+      }])
+
+      window.chatBtnFn = () => {
+        $crisp.is("chat:visible") ? close() : open()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          $crisp.push(["do", "chat:hide"])
+        },
+        show: () => {
           $crisp.push(["do", "chat:show"])
         }
       }
     }
+  })()

layout/includes/third-party/chat/daovoice.pug

@@ -1,40 +1,40 @@
 //- https://guide.daocloud.io/daovoice/javascript-api-5869833.html
 script.
+  (() => {
     (function(i,s,o,g,r,a,m){i["DaoVoiceObject"]=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;a.charset="utf-8";m.parentNode.insertBefore(a,m)})(window,document,"script",('https:' == document.location.protocol ? 'https:' : 'http:') + "//widget.daovoice.io/widget/!{theme.daovoice.app_id}.js","daovoice")
 
-script.
-  var isChatBtn = !{theme.chat_btn}
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
+
     daovoice('init', {
       app_id: '!{theme.daovoice.app_id}',},{
       launcher: { 
-       disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示
+        disableLauncherIcon: isChatBtn
       },
     });
     daovoice('update');
 
     if (isChatBtn) {
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
-        daovoice('show')
-      });
+      window.chatBtnFn = () => {
+        const isShow = document.getElementById('daodream-messenger').classList.contains('daodream-messenger-active')
+        isShow ? daovoice('hide') : daovoice('show')
       }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
           daovoice('update', {},{
             launcher: {
-          disableLauncherIcon: true // 悬浮 ICON 是否显示
-          },
-        });
+              disableLauncherIcon: true
             }
-      function chatBtnShow () {
-        daovoice('update', {},{
+          })
+        },
+        show: () => {
+          daovoice('update', {}, {
             launcher: {
-          disableLauncherIcon: false // 悬浮 ICON 是否显示
-          },
-        });
+              disableLauncherIcon: false
+            }
+          })
         }
       }
     }
+  })()

layout/includes/third-party/chat/messenger.pug

@@ -4,6 +4,7 @@
 #fb-customer-chat.fb-customerchat(page_id=pageID attribution='biz_inbox')
 
 script.
+  (() => {
     document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
 
     window.fbAsyncInit = function() {
@@ -21,22 +22,23 @@ script.
       fjs.parentNode.insertBefore(js, fjs);
     }(document, 'script', 'facebook-jssdk'));
 
-  if (!{theme.chat_btn}) {
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
-        FB.CustomerChat.show();
-      });
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
+
+    if (isChatBtn) {
+      window.chatBtnFn = () => {
+        const isShow = document.querySelector('.fb_customer_chat_bounce_in_v2')
+        isShow ? FB.CustomerChat.hide() : FB.CustomerChat.show()
       }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
           FB.CustomerChat.hide()
-      }
-      function chatBtnShow () {
+        },
+        show: () => {
           FB.CustomerChat.show(false)
         }
       }
     }
+  })()
 

layout/includes/third-party/chat/tidio.pug

@@ -1,41 +1,45 @@
 script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
+script.
+  (() => {
+    const isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
 
-if theme.chat_btn
-  script.
-    function onTidioChatApiReady() {
-      window.tidioChatApi.hide();
-      window.tidioChatApi.on("close", function() {
-        window.tidioChatApi.hide();
-      });
+    if (isChatBtn) {
+      let isShow = false
+      const close = () => {
+        window.tidioChatApi.hide()
+        isShow = false
+      }
+      
+      const open = () => {
+        window.tidioChatApi.open()
+        window.tidioChatApi.show()
+        isShow = true
+      }
+
+      const onTidioChatApiReady = () => {
+        window.tidioChatApi.hide()
+        window.tidioChatApi.on("close", close)
       }
       if (window.tidioChatApi) {
-      window.tidioChatApi.on("ready", onTidioChatApiReady);
+        window.tidioChatApi.on("ready", onTidioChatApiReady)
       } else {
-      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
+        document.addEventListener("tidioChat-ready", onTidioChatApiReady)
       }
 
-    var chatBtnFn = () => {
-      document.getElementById("chat_btn").addEventListener("click", function(){
-        window.tidioChatApi.show();
-        window.tidioChatApi.open();
-      });
+      window.chatBtnFn = () => {
+        if (!window.tidioChatApi) return
+        isShow ? close() : open()
       }
-    chatBtnFn()
-
-else if theme.chat_hide_show
-  script.
-    function chatBtnHide () {
-      if (window.tidioChatApi) {
-        //- window.tidioChatApi.hide();
-        document.getElementById('tidio-chat').style.display= 'none'
-      }
-    }
-
-    function chatBtnShow () {
-      if (window.tidioChatApi) {
-        //- window.tidioChatApi.show();
-        document.getElementById('tidio-chat').style.display= 'block'
-      } 
-    }
-
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          window.tidioChatApi && window.tidioChatApi.hide()
+        },
+        show: () => {
+          window.tidioChatApi && window.tidioChatApi.show()
+        }
+      }
+    }
+  })()
 

layout/includes/third-party/comments/artalk.pug

@@ -11,22 +11,34 @@ script.
         darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
         countEl: '.artalk-count'
       },!{JSON.stringify(option)}))
-    }
 
-    if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200)
-    else {
-      getCSS('!{theme.asset.artalk_css}')
-      typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk)
-                                  : setTimeout(()=>{initArtalk()},200)
-    }
-  }
-
-  document.getElementById('darkmode').addEventListener('click',()=> {
-    if (typeof window.artalkItem !== 'object') return
-    let isDark = document.documentElement.getAttribute('data-theme') === 'dark'
-    window.artalkItem.setDarkMode(!isDark)
+      if (GLOBAL_CONFIG.lightbox === 'null') return
+      window.artalkItem.use(ctx => {
+        ctx.on('list-loaded', () => {
+          ctx.getCommentList().forEach(comment => {
+            const $content = comment.getRender().$content
+            btf.loadLightbox($content.querySelectorAll('img:not([atk-emoticon])'))
           })
+        })
+      })
+    }
 
+    if (typeof window.artalkItem === 'object') initArtalk()
+    else {
+      getCSS('!{theme.asset.artalk_css}').then(()=>{
+        getScript('!{theme.asset.artalk_js}').then(initArtalk)
+      })
+    }
+  }
+
+  function artalkChangeMode (theme) {
+    const artalkWrap = document.getElementById('artalk-wrap')
+    if (!(artalkWrap && artalkWrap.children.length)) return
+    const isDark = theme === 'dark'
+    window.artalkItem.setDarkMode(isDark)
+  }
+
+  btf.addModeChange('artalk', artalkChangeMode)
   
   if ('!{theme.comments.use[0]}' === 'Artalk' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)

layout/includes/third-party/comments/disqus.pug

@@ -2,19 +2,21 @@
 
 script.
   function loadDisqus () {
-    var disqus_config = function () {
+    const disqus_config = function () {
       this.page.url = '!{ page.permalink }'
       this.page.identifier = '!{ url_for(page.path) }'
       this.page.title = '!{ disqusPageTitle }'
-    };
+    }
 
-    window.disqusReset = () => {
+    const disqusReset = () => {
       DISQUS.reset({
         reload: true,
         config: disqus_config
       })
     }
 
+    btf.addModeChange('disqus', disqusReset)
+
     if (window.DISQUS) disqusReset()
     else {
       (function() { 
@@ -24,10 +26,6 @@ script.
         (d.head || d.body).appendChild(s);
       })();
     }
-
-    document.getElementById('darkmode').addEventListener('click', () => {
-      setTimeout(() => window.disqusReset(), 200)
-    })
   }
 
   if ('!{theme.comments.use[0]}' === 'Disqus' || !!{theme.comments.lazyload}) {

layout/includes/third-party/comments/disqusjs.pug

@@ -23,7 +23,7 @@ script.
     }
 
 
-    document.getElementById('darkmode').addEventListener('click', themeChange)
+    btf.addModeChange('disqusjs', themeChange)
 
     if (window.disqusJsLoad) initDisqusjs()
     else {

layout/includes/third-party/comments/facebook_comments.pug

@@ -25,6 +25,16 @@ script.
     }
   }
 
+  function fbModeChange (theme) {
+    const $fbComment = document.getElementsByClassName('fb-comments')[0]
+    if ($fbComment && typeof FB === 'object') {
+      $fbComment.setAttribute('data-colorscheme',theme)
+      FB.XFBML.parse(document.getElementById('post-comment'))
+    }
+  }
+
+  btf.addModeChange('facebook_comments', fbModeChange)
+
   if ('!{theme.comments.use[0]}' === 'Facebook Comments' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.querySelector('#post-comment .fb-comments'), loadFBComment)
     else loadFBComment()

layout/includes/third-party/comments/giscus.pug

@@ -3,8 +3,8 @@
 - const giscusOriginUrl = new URL(giscusUrl).origin
 
 script.
-  function getGiscusTheme () {
-    return document.documentElement.getAttribute('data-theme') === 'dark' ? '!{themes.dark}' : '!{themes.light}'
+  function getGiscusTheme (theme) {
+    return theme === 'dark' ? '!{themes.dark}' : '!{themes.light}'
   }
 
   function loadGiscus () {
@@ -14,7 +14,7 @@ script.
       'data-repo-id': '!{repo_id}',
       'data-category-id': '!{category_id}',
       'data-mapping': 'pathname',
-      'data-theme': getGiscusTheme(),
+      'data-theme': getGiscusTheme(document.documentElement.getAttribute('data-theme')),
       'data-reactions-enabled': '1',
       crossorigin: 'anonymous',
       async: true
@@ -27,7 +27,7 @@ script.
     document.getElementById('giscus-wrap').insertAdjacentElement('afterbegin',ele)
   }
 
-  function changeGiscusTheme () {
+  function changeGiscusTheme (theme) {
     function sendMessage(message) {
       const iframe = document.querySelector('iframe.giscus-frame')
       if (!iframe) return
@@ -36,11 +36,13 @@ script.
 
     sendMessage({
       setConfig: {
-        theme: getGiscusTheme()
+        theme: getGiscusTheme(theme)
       }
     });
   }
 
+  btf.addModeChange('giscus', changeGiscusTheme)
+
   if ('!{theme.comments.use[0]}' === 'Giscus' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('giscus-wrap'), loadGiscus)
     else loadGiscus()

layout/includes/third-party/comments/gitalk.pug

@@ -24,7 +24,7 @@ script.
   function commentCount(n){
     let isCommentCount = document.querySelector('#post-meta .gitalk-comment-count')
     if (isCommentCount) {
-      isCommentCount.innerHTML= n
+      isCommentCount.textContent= n
     }
   }
 

layout/includes/third-party/comments/index.pug

@@ -1,5 +1,5 @@
 - let defaultComment = theme.comments.use[0]
-hr
+hr.custom-hr
 #post-comment
   .comment-head
     .comment-headline

layout/includes/third-party/comments/remark42.pug

@@ -51,11 +51,12 @@ script.
     }
   }
 
-  document.getElementById('darkmode').addEventListener('click',()=>{
+  function remarkChangeMode (theme) {
     if (!window.REMARK42) return
-    let theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
     window.REMARK42.changeTheme(theme)
-  })
+  }
+
+  btf.addModeChange('remark42', remarkChangeMode)
 
   if ('!{theme.comments.use[0]}' === 'Remark42' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('remark42'), loadRemark42)

layout/includes/third-party/comments/twikoo.pug

@@ -23,7 +23,7 @@ script.
         urls: [window.location.pathname],
         includeReply: false
       }).then(function (res) {
-        countELement.innerText = res[0].count
+        countELement.textContent = res[0].count
       }).catch(function (err) {
         console.error(err);
       });

layout/includes/third-party/comments/utterances.pug

@@ -12,10 +12,10 @@ script.
     document.getElementById('utterances-wrap').insertAdjacentElement('afterbegin',ele)
   }
 
-  function utterancesTheme () {
+  function utterancesTheme (theme) {
     const iframe = document.querySelector('.utterances-frame')
     if (iframe) {
-      const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
+      const theme = theme === 'dark' ? '#{theme.utterances.dark_theme}' : '#{theme.utterances.light_theme}'
       const message = {
         type: 'set-theme',
         theme: theme
@@ -24,6 +24,8 @@ script.
     }
   }
 
+  btf.addModeChange('utterances', utterancesTheme)
+
   if ('!{theme.comments.use[0]}' === 'Utterances' || !!{theme.comments.lazyload}) {
     if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('utterances-wrap'), loadUtterances)
     else loadUtterances()

layout/includes/third-party/comments/waline.pug

@@ -14,13 +14,9 @@ script.
       }, !{JSON.stringify(option)}))
     }
 
-    const walineCSSLoad = document.getElementById('waline-css')
-
-    if (typeof Waline === 'object') {
-      walineCSSLoad ? initWaline() : getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(initWaline)
-    }
+    if (typeof Waline === 'object') initWaline()
     else {
-      getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(() => {
+      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
         getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
       })
     }

layout/includes/third-party/math/mathjax.pug

@@ -3,7 +3,7 @@ script.
   if (!window.MathJax) {
     window.MathJax = {
       tex: {
-        inlineMath: [ ['$','$'], ["\\(","\\)"]],
+        inlineMath: [['$', '$'], ['\\(', '\\)']],
         tags: 'ams'
       },
       chtml: {
@@ -21,16 +21,7 @@ script.
               math.end = {node: text, delim: '', n: 0}
               doc.math.push(math)
             }
-          }, ''],
-          insertScript: [200, () => {
-            document.querySelectorAll('mjx-container').forEach(node => {
-              if (node.hasAttribute('display')) {
-                btf.wrap(node, 'div', { class: 'mathjax-overflow' })
-              } else {
-                btf.wrap(node, 'span', { class: 'mathjax-overflow' })
-              }
-            });
-          }, '', false]
+          }, '']
         }
       }
     }

layout/includes/third-party/math/mermaid.pug

@@ -1,19 +1,30 @@
 script.
   (() => {
-    const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
-    if ($mermaidWrap.length) {
-      window.runMermaid = () => {
+    const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
+    if ($mermaid.length === 0) return
+    const runMermaid = () => {
       window.loadMermaid = true
       const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
 
-        Array.from($mermaidWrap).forEach((item, index) => {
+      Array.from($mermaid).forEach((item, index) => {
         const mermaidSrc = item.firstElementChild
         const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
         const mermaidID = 'mermaid-' + index
         const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
-          mermaid.mermaidAPI.render(mermaidID, mermaidDefinition, (svgCode) => {
-            mermaidSrc.insertAdjacentHTML('afterend', svgCode)
+
+        const renderFn = mermaid.render(mermaidID, mermaidDefinition)
+
+        const renderV10 = () => {
+          renderFn.then(({svg}) => {
+            mermaidSrc.insertAdjacentHTML('afterend', svg)
           })
+        }
+
+        const renderV9 = svg => {
+          mermaidSrc.insertAdjacentHTML('afterend', svg)
+        }
+
+        typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
       })
     }
 
@@ -21,6 +32,7 @@ script.
       window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
     }
 
+    btf.addModeChange('mermaid', runMermaid)
+
     window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
-    }
   })()

layout/includes/third-party/newest-comments/artalk.pug

@@ -1,6 +1,6 @@
 - const { server, site, option } = theme.artalk
-- const avatarCdn = option !== null && option.gravatar ? option.gravatar.mirror : 'https://sdn.geekzu.org/avatar/'
-- const avatarDefault = option !== null && option.gravatar ? option.gravatar.default : 'mp'
+- const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror
+- const avatarDefault = option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)
 
 script.
   window.addEventListener('load', () => {
@@ -45,20 +45,40 @@ script.
       window.pjax && window.pjax.refresh($dom)
     }
 
-    const headerList = {
-      method: 'POST',
-      headers: {
-        'Origin': window.location.origin
+    const getSetting = async () => {
+      try {
+        const res = await fetch('!{server}/api/conf', { method: 'GET' })
+        return await res.json()
+      } catch (e) {
+        console.log(e)
       }
     }
 
-    const getComment = () => {
-      fetch('!{server}/api/stat?type=latest_comments&limit=!{theme.newest_comments.limit}&site_name=!{site}', headerList)
-        .then(response => response.json())
-        .then(d => {
-          const artalk = d.data.map(function (e) {
+    const headerList = {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+        'Origin': window.location.origin
+      },
+      body: new URLSearchParams({
+        'site_name': '!{site}',
+        'limit': '!{theme.newest_comments.limit}',
+        'type':'latest_comments'
+      })
+    }
+
+    const getComment = async () => {
+      try {
+        const res = await fetch('!{server}/api/stat', headerList)
+        const result = await res.json()
+        const avatarStr = await getSetting()
+        const { mirror, params, default:defaults } = avatarStr.data.frontend_conf.gravatar
+        const avatarCdn = !{avatarCdn} || mirror
+        let avatarDefault = !{avatarDefault} || params || defaults
+        avatarDefault = avatarDefault.startsWith('d=') ? avatarDefault : `d=${avatarDefault}`
+        const artalk = result.data.map(function (e) {
           return {
-              'avatar': '!{avatarCdn}' + e.email_encrypted + '?d=!{avatarDefault}',
+            'avatar': `${avatarCdn}${e.email_encrypted}?${avatarDefault}`,
             'content': changeContent(e.content_marked),
             'nick': e.nick,
             'url': e.page_url,
@@ -67,10 +87,11 @@ script.
         })
         saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
         generateHtml(artalk)
-        }).catch(e => {
+      } catch (e) {
+        console.log(e)
         const $dom = document.querySelector('#card-newest-comments .aside-list')
         $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
-        })
+      }
     }
 
     const newestCommentInit = () => {

layout/includes/third-party/newest-comments/disqus-comment.pug

@@ -32,7 +32,7 @@ script.
           generateHtml(disqusArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

layout/includes/third-party/newest-comments/github-issues.pug

@@ -58,7 +58,7 @@ script.
           findTrueUrl(githubArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

layout/includes/third-party/newest-comments/remark42.pug

@@ -60,7 +60,7 @@ script.
           generateHtml(remark42)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

layout/includes/third-party/newest-comments/twikoo-comment.pug

@@ -36,7 +36,7 @@ script.
           generateHtml(twikooArray)
         }).catch(function (err) {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
       }
 

layout/includes/third-party/newest-comments/valine.pug

@@ -79,7 +79,7 @@ script.
           generateHtml(valineArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         }) 
     }
 

layout/includes/third-party/newest-comments/waline.pug

@@ -1,6 +1,6 @@
 script.
   window.addEventListener('load', () => {
-    const changeContent = (content) => {
+    const changeContent = content => {
       if (content === '') return content
 
       content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[!{_p("aside.card_newest_comments.image")}]') // replace image link
@@ -41,31 +41,26 @@ script.
       window.pjax && window.pjax.refresh($dom)
     }
 
-    const getComment = () => {
-      const loadWaline = () => {
-        Waline.RecentComments({
-          serverURL: '!{theme.waline.serverURL}',
-          count: !{theme.newest_comments.limit}
-        }).then(({comments}) => {
-          const walineArray = comments.map(e => {
+    const getComment = async () => {
+      try {
+        const res = await fetch('!{theme.waline.serverURL}/api/comment?type=recent&count=!{theme.newest_comments.limit}', { method: 'GET' })
+        const result = await res.json()
+        const walineArray = result.data.map(e => {
           return {
             'content': changeContent(e.comment),
             'avatar': e.avatar,
             'nick': e.nick,
             'url': e.url + '#' + e.objectId,
-              'date': e.insertedAt,
+            'date': e.time || e.insertedAt
           }
         })
         saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
         generateHtml(walineArray)
-        }).catch(e => {
+      } catch (err) {
+        console.error(err)
         const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
-        }) 
+        $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
       }
-
-      if (typeof Waline === 'object') loadWaline()
-      else getScript('!{url_for(theme.asset.waline_js)}').then(loadWaline)
     }
 
     const newestCommentInit = () => {

layout/includes/third-party/pjax.pug

@@ -62,7 +62,6 @@ script.
 
     GLOBAL_CONFIG.islazyload && window.lazyLoadInstance.update()
 
-    typeof chatBtnFn === 'function' && chatBtnFn()
     typeof panguInit === 'function' && panguInit()
 
     // google analytics

layout/includes/third-party/subtitle.pug

@@ -38,7 +38,7 @@ case source
               sub.unshift(data.hitokoto, from)
               typedJSFn.init(sub)
             } else {
-              document.getElementById('subtitle').innerHTML = data.hitokoto
+              document.getElementById('subtitle').textContent = data.hitokoto
             }
           })
       }
@@ -55,7 +55,7 @@ case source
             sub.unshift(con, from)
             typedJSFn.init(sub)
           } else {
-            document.getElementById('subtitle').innerHTML = con
+            document.getElementById('subtitle').textContent = con
           }
         })
       }
@@ -72,7 +72,7 @@ case source
               sub.unshift(content)
               typedJSFn.init(sub)
             } else {
-              document.getElementById('subtitle').innerHTML = result.data.content
+              document.getElementById('subtitle').textContent = result.data.content
             }
           })
         })
@@ -86,7 +86,7 @@ case source
         if (!{effect}) {
           typedJSFn.init(!{JSON.stringify(subContent)})
         } else {
-          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
+          document.getElementById("subtitle").textContent = !{JSON.stringify(subContent[0])}
         }
       }
       typedJSFn.run(subtitleType)

layout/includes/widget/card_author.pug

@@ -24,4 +24,4 @@ if theme.aside.card_author.enable
   
     if(theme.social)
         .card-info-social-icons.is-center
-          !=fragment_cache('social', function(){return partial('includes/header/social')}) 
+          !=partial('includes/header/social', {}, {cache: true})

layout/includes/widget/card_newest_comment.pug

@@ -1,4 +1,4 @@
-if theme.newest_comments.enable && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
+if theme.newest_comments.enable && theme.comments.use && !['Livere','Facebook Comments','Giscus'].includes(theme.comments.use[0])
   .card-widget#card-newest-comments
     .item-headline
       i.fas.fa-comment-dots

package.json

@@ -1,6 +1,6 @@
 {
   "name": "hexo-theme-butterfly",
-  "version": "4.8.1",
+  "version": "4.9.0",
   "description": "A Simple and Card UI Design theme for Hexo",
   "main": "package.json",
   "scripts": {
@@ -23,7 +23,7 @@
     "email": "my@crazywong.com"
   },
   "dependencies": {
-    "hexo-renderer-stylus": "^2.1.0",
+    "hexo-renderer-stylus": "^3.0.0",
     "hexo-renderer-pug": "^3.0.0"
   },
   "homepage": "https://butterfly.js.org/",

plugins.yml

@@ -1,11 +1,11 @@
 algolia_search:
   name: algoliasearch
   file: dist/algoliasearch-lite.umd.js
-  version: 4.17.0
+  version: 4.17.1
 instantsearch:
   name: instantsearch.js
   file: dist/instantsearch.production.min.js
-  version: 4.54.0
+  version: 4.56.1
 pjax:
   name: pjax
   file: pjax.min.js
@@ -37,17 +37,17 @@ disqusjs_css:
 twikoo:
   name: twikoo
   file: dist/twikoo.all.min.js
-  version: 1.6.14
+  version: 1.6.16
 waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.14.9
+  version: 2.15.5
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.14.9
+  version: 2.15.5
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -64,16 +64,16 @@ katex:
   name: katex
   file: dist/katex.min.css
   other_name: KaTeX
-  version: 0.16.4
+  version: 0.16.7
 katex_copytex:
   name: katex
   file: dist/contrib/copy-tex.min.js
   other_name: KaTeX
-  version: 0.16.4
+  version: 0.16.7
 mermaid:
   name: mermaid
   file: dist/mermaid.min.js
-  version: 9.4.3
+  version: 10.2.2
 canvas_ribbon:
   name: butterfly-extsrc
   file: dist/canvas-ribbon.min.js
@@ -113,7 +113,7 @@ instantpage:
 typed:
   name: typed.js
   file: dist/typed.umd.js
-  version: 2.0.15
+  version: 2.0.16
 pangu:
   name: pangu
   file: dist/browser/pangu.min.js
@@ -121,12 +121,12 @@ pangu:
 fancybox_css:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.css
-  version: 5.0.15
+  version: 5.0.19
   other_name: fancyapps-ui
 fancybox:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.umd.js
-  version: 5.0.15
+  version: 5.0.19
   other_name: fancyapps-ui
 medium_zoom:
   name: medium-zoom
@@ -183,11 +183,11 @@ prismjs_autoloader:
 artalk_js:
   name: artalk
   file: dist/Artalk.js
-  version: 2.5.4
+  version: 2.5.5
 artalk_css:
   name: artalk
   file: dist/Artalk.css
-  version: 2.5.4
+  version: 2.5.5
 pace_js:
   name: pace-js
   other_name: pace
@@ -202,13 +202,13 @@ docsearch_js:
   name: '@docsearch/js'
   other_name: docsearch-js
   file: dist/umd/index.js
-  version: 3.3.3
+  version: 3.4.0
 docsearch_css:
   name: '@docsearch/css'
   other_name: docsearch-css
   file: dist/style.css
-  version: 3.3.3
+  version: 3.4.0
 abcjs_basic_js:
   name: abcjs
   file: dist/abcjs-basic-min.js
-  version: 6.2.0
+  version: 6.2.2

scripts/events/init.js

@@ -1,21 +1,19 @@
 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
+  const { version, log, locals } = hexo
+  const hexoVer = version.replace(/(^.*\..*)\..*/, '$1')
 
   if (hexoVer < 5.3) {
-    logger.error('Please update Hexo to V5.3.0 or higher!')
-    logger.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
+    log.error('Please update Hexo to V5.3.0 or higher!')
+    log.error('請把 Hexo 升級到 V5.3.0 或更高的版本！')
     process.exit(-1)
   }
 
-  if (hexo.locals.get) {
-    const data = hexo.locals.get('data')
+  if (locals.get) {
+    const data = locals.get('data')
     if (data && data.butterfly) {
-      logger.error(
-        " 'butterfly.yml' is deprecated. Please use '_config.butterfly.yml' "
-      )
-      logger.error(" 'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml' ")
+      log.error("'butterfly.yml' is deprecated. Please use '_config.butterfly.yml'")
+      log.error("'butterfly.yml' 已經棄用，請使用 '_config.butterfly.yml'")
       process.exit(-1)
     }
   }

source/css/_global/function.styl

@@ -72,6 +72,30 @@
       cursor: pointer
       transition: all .3s ease-out
 
+.custom-hr
+  position: relative
+  margin: 40px auto
+  border: 2px dashed var(--hr-border)
+
+  if hexo-config('hr_icon.enable')
+    width: calc(100% - 4px)
+
+    &:hover
+      &:before
+        left: calc(95% - 20px)
+
+    &:before
+      position: absolute
+      top: $hr-icon-top
+      left: 5%
+      z-index: 1
+      color: var(--hr-before-color)
+      content: $hr-icon
+      font-size: 20px
+      line-height: 1
+      transition: all 1s ease-in-out
+      @extend .fontawesomeIcon
+
 maxWidth600()
   @media screen and (max-width: 600px)
     {block}

source/css/_global/index.styl

@@ -34,6 +34,8 @@
   --headline-presudo: #a0a0a0
   --scrollbar-color: $scrollbar-color
   --default-bg-color: $theme-color
+  --zoom-bg: #fff
+  --mark-bg: alpha($dark-black, .3)
 
 body
   position: relative
@@ -96,30 +98,6 @@ h6
 *
   box-sizing: border-box
 
-hr
-  position: relative
-  margin: 40px auto
-  border: 2px dashed var(--hr-border)
-
-  if hexo-config('hr_icon.enable')
-    width: calc(100% - 4px)
-
-    &:hover
-      &:before
-        left: calc(95% - 20px)
-
-    &:before
-      position: absolute
-      top: $hr-icon-top
-      left: 5%
-      z-index: 1
-      color: var(--hr-before-color)
-      content: $hr-icon
-      font-size: 20px
-      line-height: 1
-      transition: all 1s ease-in-out
-      @extend .fontawesomeIcon
-
 .table-wrap
   overflow-x: scroll
   margin: 0 0 20px
@@ -174,9 +152,6 @@ if $site-name-font
 .is-center
   text-align: center
 
-.copy-true
-  user-select: all
-
 .pull-left
   float: left
 

source/css/_highlight/highlight.styl

@@ -75,6 +75,14 @@ $code-block
         &:hover
           border-bottom-color: var(--hl-color)
 
+    &.copy-true
+      user-select: all
+
+      & > table,
+      & > pre
+        display: block !important
+        opacity: 0
+
   .highlight-tools
     position: relative
     display: flex

source/css/_layout/footer.styl

@@ -5,12 +5,12 @@
   background-position: bottom
   background-size: cover
 
-  if hexo-config('footer_bg') != false
+  if hexo-config('footer_bg') != false && hexo-config('mask.footer')
     &:before
       position: absolute
       width: 100%
       height: 100%
-      background-color: alpha($dark-black, .5)
+      background-color: var(--mark-bg)
       content: ''
 
 #footer-wrap

source/css/_layout/head.styl

@@ -7,11 +7,12 @@
   background-repeat: no-repeat
   transition: all .5s
 
+  if hexo-config('mask.header')
     &:not(.not-top-img):before
       position: absolute
       width: 100%
       height: 100%
-    background-color: alpha($dark-black, .3)
+      background-color: var(--mark-bg)
       content: ''
 
   // index
@@ -97,9 +98,6 @@
     +maxWidth768()
       height: 360px
 
-    &:before
-      background-color: alpha($dark-black, .5)
-
   #post-info
     position: absolute
     bottom: 100px

source/css/_layout/post.styl

@@ -66,6 +66,9 @@ beautify()
   ul > li
     list-style-type: circle
   
+  hr
+    @extend .custom-hr
+
 #article-container
   word-wrap: break-word
   overflow-wrap: break-word
@@ -156,14 +159,6 @@ beautify()
     else if hexo-config('beautify.field') == 'post'
       &.post-content
         beautify()
-  else
-    hr
-      margin: 20px 0
-      border: 1px inset
-      width 100%
-
-      &:before
-        content: none
 
 #post
   .tag_share

source/css/_layout/third-party.styl

@@ -82,15 +82,22 @@ if hexo-config('waline.bg')
       display: none
 
 // Mathjax
-.mathjax-overflow
+mjx-container
   overflow-x: auto
   overflow-y: hidden
-
-span.mathjax-overflow
-  display: inline-block
-  padding: 0 2px
+  padding-bottom: 4px
   max-width: 100%
-  vertical-align: bottom
+
+  &[display]
+    display: block !important
+    min-width: auto !important
+
+  &:not([display])
+    display: inline-grid !important
+
+mjx-assistive-mml
+  right: 0
+  bottom: 0
 
 .aplayer
   color: $font-black

source/css/_mode/darkmode.styl

@@ -38,10 +38,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
     --hlexpand-bg: linear-gradient(180deg, rgba(lighten(#121212, 2), .6), rgba(lighten(#121212, 2), .9))
     --scrollbar-color: lighten(#121212, 5)
     --timeline-bg: lighten(#121212, 5)
+    --zoom-bg: #121212
+    --mark-bg: alpha($dark-black, .6)
 
-    #web_bg:before,
-    #footer:before,
-    #page-header:before
+    #web_bg:before
       position: absolute
       width: 100%
       height: 100%

source/css/_mode/readmode.styl

@@ -54,8 +54,7 @@ if hexo-config('readmode')
       display: none
 
     #page-header.post-bg
-      background-color: transparent
-      background-image: none !important
+      background: none !important
 
       &:before
         opacity: 0

source/css/_page/common.styl

@@ -18,7 +18,7 @@
     padding: 20px 5px
 
   +minWidth2000()
-    max-width: 1700px
+    max-width: 70%
 
   & > div:first-child:not(.recent-posts)
     @extend .cardHover

source/css/_page/homepage.styl

@@ -8,7 +8,7 @@
     flex-direction: row
     align-items: center
     overflow: hidden
-    height: 18em
+    height: 16.8em
 
     +maxWidth768()
       flex-direction: column
@@ -24,7 +24,7 @@
 
     .post_cover
       overflow: hidden
-      width: 44%
+      width: 42%
       height: 100%
 
       +maxWidth768()
@@ -42,7 +42,7 @@
 
     & >.recent-post-info
       padding: 0 40px
-      width: 57%
+      width: 58%
 
       +maxWidth768()
         padding: 20px 20px 30px
@@ -57,7 +57,7 @@
       & > .article-title
         @extend .limit-more-line
         color: var(--text-highlight-color)
-        font-size: 1.72em
+        font-size: 1.55em
         line-height: 1.4
         transition: all .2s ease-in-out
         -webkit-line-clamp: 2
@@ -71,7 +71,7 @@
       & > .article-meta-wrap
         margin: 6px 0
         color: $theme-meta-color
-        font-size: 90%
+        font-size: .9em
 
         & > .post-meta-date
           cursor: default

source/css/_search/index.styl

@@ -39,6 +39,10 @@
       &:hover
         color: $search-color
   
+  hr
+    margin: 20px auto
+    @extend .custom-hr
+
 #search-mask
   position: fixed
   top: 0
@@ -48,3 +52,9 @@
   z-index: 1000
   display: none
   background: rgba($dark-black, .6)
+
+if hexo-config('algolia_search.enable')
+  @require 'algolia'
+
+if hexo-config('local_search.enable')
+  @require 'local-search'

source/css/index.styl

@@ -12,10 +12,4 @@ if hexo-config('css_prefix')
 @import '_mode/*'
 
 // search
-if hexo-config('algolia_search.enable')
-  @import '_search/index'
-  @import '_search/algolia'
-
-if hexo-config('local_search') && hexo-config('local_search.enable')
-  @import '_search/index'
-  @import '_search/local-search'
+@import '_search/index'

source/js/main.js

@@ -70,28 +70,17 @@ document.addEventListener('DOMContentLoaded', function () {
     const highLight = GLOBAL_CONFIG.highlight
     if (!highLight) return
 
-    const isHighlightCopy = highLight.highlightCopy
-    const isHighlightLang = highLight.highlightLang
+    const { highlightCopy, highlightLang, highlightHeightLimit, plugin } = highLight
     const isHighlightShrink = GLOBAL_CONFIG_SITE.isHighlightShrink
-    const highlightHeightLimit = highLight.highlightHeightLimit
-    const isShowTool = isHighlightCopy || isHighlightLang || isHighlightShrink !== undefined
-    const $figureHighlight = highLight.plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
+    const isShowTool = highlightCopy || highlightLang || isHighlightShrink !== undefined
+    const $figureHighlight = plugin === 'highlighjs' ? document.querySelectorAll('figure.highlight') : document.querySelectorAll('pre[class*="language-"]')
 
     if (!((isShowTool || highlightHeightLimit) && $figureHighlight.length)) return
 
-    const isPrismjs = highLight.plugin === 'prismjs'
-
-    let highlightShrinkEle = ''
-    let highlightCopyEle = ''
+    const isPrismjs = plugin === 'prismjs'
     const highlightShrinkClass = isHighlightShrink === true ? 'closed' : ''
-
-    if (isHighlightShrink !== undefined) {
-      highlightShrinkEle = `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>`
-    }
-
-    if (isHighlightCopy) {
-      highlightCopyEle = '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>'
-    }
+    const highlightShrinkEle = isHighlightShrink !== undefined ? `<i class="fas fa-angle-down expand ${highlightShrinkClass}"></i>` : ''
+    const highlightCopyEle = highlightCopy ? '<div class="copy-notice"></div><i class="fas fa-paste copy-button"></i>' : ''
 
     const copy = (text, ctx) => {
       if (document.queryCommandSupported && document.queryCommandSupported('copy')) {
@@ -100,7 +89,7 @@ document.addEventListener('DOMContentLoaded', function () {
           btf.snackbarShow(GLOBAL_CONFIG.copy.success)
         } else {
           const prevEle = ctx.previousElementSibling
-          prevEle.innerText = GLOBAL_CONFIG.copy.success
+          prevEle.textContent = GLOBAL_CONFIG.copy.success
           prevEle.style.opacity = 1
           setTimeout(() => { prevEle.style.opacity = 0 }, 700)
         }
@@ -108,7 +97,7 @@ document.addEventListener('DOMContentLoaded', function () {
         if (GLOBAL_CONFIG.Snackbar !== undefined) {
           btf.snackbarShow(GLOBAL_CONFIG.copy.noSupport)
         } else {
-          ctx.previousElementSibling.innerText = GLOBAL_CONFIG.copy.noSupport
+          ctx.previousElementSibling.textContent = GLOBAL_CONFIG.copy.noSupport
         }
       }
     }
@@ -119,8 +108,8 @@ document.addEventListener('DOMContentLoaded', function () {
       $buttonParent.classList.add('copy-true')
       const selection = window.getSelection()
       const range = document.createRange()
-      if (isPrismjs) range.selectNodeContents($buttonParent.querySelectorAll('pre code')[0])
-      else range.selectNodeContents($buttonParent.querySelectorAll('table .code pre')[0])
+      const preCodeSelector = isPrismjs ? 'pre code' : 'table .code pre'
+      range.selectNodeContents($buttonParent.querySelectorAll(`${preCodeSelector}`)[0])
       selection.removeAllRanges()
       selection.addRange(range)
       const text = selection.toString()
@@ -175,33 +164,29 @@ document.addEventListener('DOMContentLoaded', function () {
       }
     }
 
-    if (isHighlightLang) {
     if (isPrismjs) {
-        $figureHighlight.forEach(function (item) {
-          const langName = item.getAttribute('data-language') ? item.getAttribute('data-language') : 'Code'
+      $figureHighlight.forEach(item => {
+        if (highlightLang) {
+          const langName = item.getAttribute('data-language') || 'Code'
           const highlightLangEle = `<div class="code-lang">${langName}</div>`
           btf.wrap(item, 'figure', { class: 'highlight' })
           createEle(highlightLangEle, item)
+        } else {
+          btf.wrap(item, 'figure', { class: 'highlight' })
+          createEle('', item)
+        }
       })
     } else {
       $figureHighlight.forEach(function (item) {
+        if (highlightLang) {
           let langName = item.getAttribute('class').split(' ')[1]
           if (langName === 'plain' || langName === undefined) langName = 'Code'
           const highlightLangEle = `<div class="code-lang">${langName}</div>`
           createEle(highlightLangEle, item, 'hl')
-        })
-      }
         } else {
-      if (isPrismjs) {
-        $figureHighlight.forEach(function (item) {
-          btf.wrap(item, 'figure', { class: 'highlight' })
-          createEle('', item)
-        })
-      } else {
-        $figureHighlight.forEach(function (item) {
           createEle('', item, 'hl')
-        })
         }
+      })
     }
   }
 
@@ -313,6 +298,11 @@ document.addEventListener('DOMContentLoaded', function () {
   const scrollFn = function () {
     const $rightside = document.getElementById('rightside')
     const innerHeight = window.innerHeight + 56
+    let initTop = 0
+    let isChatShow = true
+    const $header = document.getElementById('page-header')
+    const isChatBtn = typeof chatBtn !== 'undefined'
+    const isShowPercent = GLOBAL_CONFIG.percent.rightside
 
     // 當滾動條小于 56 的時候
     if (document.body.scrollHeight <= innerHeight) {
@@ -321,33 +311,26 @@ document.addEventListener('DOMContentLoaded', function () {
     }
 
     // find the scroll direction
-    function scrollDirection (currentTop) {
+    const scrollDirection = currentTop => {
       const result = currentTop > initTop // true is down & false is up
       initTop = currentTop
       return result
     }
 
-    let initTop = 0
-    let isChatShow = true
-    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
       const isDown = scrollDirection(currentTop)
       if (currentTop > 56) {
         if (isDown) {
           if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-          if (isChatBtnShow && isChatShow === true) {
-            chatBtnHide()
+          if (isChatBtn && isChatShow === true) {
+            window.chatBtn.hide()
             isChatShow = false
           }
         } else {
           if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-          if (isChatBtnHide && isChatShow === false) {
-            chatBtnShow()
+          if (isChatBtn && isChatShow === false) {
+            window.chatBtn.show()
             isChatShow = true
           }
         }
@@ -492,6 +475,22 @@ document.addEventListener('DOMContentLoaded', function () {
     window.addEventListener('scroll', tocScrollFn)
   }
 
+  const modeChangeFn = mode => {
+    if (!window.themeChange) {
+      return
+    }
+
+    const turnMode = item => window.themeChange[item](mode)
+
+    Object.keys(window.themeChange).forEach(item => {
+      if (['disqus', 'disqusjs'].includes(item)) {
+        setTimeout(() => turnMode(item), 300)
+      } else {
+        turnMode(item)
+      }
+    })
+  }
+
   /**
    * Rightside
    */
@@ -504,7 +503,7 @@ document.addEventListener('DOMContentLoaded', function () {
       newEle.className = 'fas fa-sign-out-alt exit-readmode'
       $body.appendChild(newEle)
 
-      function clickFn () {
+      const clickFn = () => {
         $body.classList.remove('read-mode')
         newEle.remove()
         newEle.removeEventListener('click', clickFn)
@@ -513,8 +512,8 @@ document.addEventListener('DOMContentLoaded', function () {
       newEle.addEventListener('click', clickFn)
     },
     switchDarkMode: () => { // Switch Between Light And Dark Mode
-      const nowMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'light'
-      if (nowMode === 'light') {
+      const willChangeMode = document.documentElement.getAttribute('data-theme') === 'dark' ? 'light' : 'dark'
+      if (willChangeMode === 'dark') {
         activateDarkMode()
         saveToLocal.set('theme', 'dark', 2)
         GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.day_to_night)
@@ -523,11 +522,7 @@ document.addEventListener('DOMContentLoaded', function () {
         saveToLocal.set('theme', 'light', 2)
         GLOBAL_CONFIG.Snackbar !== undefined && btf.snackbarShow(GLOBAL_CONFIG.Snackbar.night_to_day)
       }
-      // handle some cases
-      typeof utterancesTheme === 'function' && utterancesTheme()
-      typeof changeGiscusTheme === 'function' && changeGiscusTheme()
-      typeof FB === 'object' && window.loadFBComment && window.loadFBComment()
-      typeof runMermaid === 'function' && window.runMermaid()
+      modeChangeFn(willChangeMode)
     },
     showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開
       const rightsideHideClassList = document.getElementById('rightside-config-hide').classList
@@ -545,15 +540,16 @@ document.addEventListener('DOMContentLoaded', function () {
     },
     hideAsideBtn: () => { // Hide aside
       const $htmlDom = document.documentElement.classList
-      $htmlDom.contains('hide-aside')
-        ? saveToLocal.set('aside-status', 'show', 2)
-        : saveToLocal.set('aside-status', 'hide', 2)
+      const saveStatus = $htmlDom.contains('hide-aside') ? 'show' : 'hide'
+      saveToLocal.set('aside-status', saveStatus, 2)
       $htmlDom.toggle('hide-aside')
     },
-
     runMobileToc: () => {
       if (window.getComputedStyle(document.getElementById('card-toc')).getPropertyValue('opacity') === '0') window.mobileToc.open()
       else window.mobileToc.close()
+    },
+    toggleChatDisplay: () => {
+      window.chatBtnFn()
     }
   }
 
@@ -578,6 +574,9 @@ document.addEventListener('DOMContentLoaded', function () {
       case 'hide-aside-btn':
         rightSideFn.hideAsideBtn()
         break
+      case 'chat-btn':
+        rightSideFn.toggleChatDisplay()
+        break
       default:
         break
     }
@@ -602,15 +601,10 @@ document.addEventListener('DOMContentLoaded', function () {
     const copyright = GLOBAL_CONFIG.copyright
     document.body.oncopy = (e) => {
       e.preventDefault()
-      let textFont; const copyFont = window.getSelection(0).toString()
+      const copyFont = window.getSelection(0).toString()
+      let textFont = copyFont
       if (copyFont.length > copyright.limitCount) {
-        textFont = copyFont + '\n' + '\n' + '\n' +
-        copyright.languages.author + '\n' +
-        copyright.languages.link + window.location.href + '\n' +
-        copyright.languages.source + '\n' +
-        copyright.languages.info
-      } else {
-        textFont = copyFont
+        textFont = `${copyFont}\n\n\n${copyright.languages.author}\n${copyright.languages.link}${window.location.href}\n${copyright.languages.source}\n${copyright.languages.info}`
       }
       if (e.clipboardData) {
         return e.clipboardData.setData('text', textFont)
@@ -627,7 +621,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const $runtimeCount = document.getElementById('runtimeshow')
     if ($runtimeCount) {
       const publishDate = $runtimeCount.getAttribute('data-publishDate')
-      $runtimeCount.innerText = btf.diffDate(publishDate) + ' ' + GLOBAL_CONFIG.runtime
+      $runtimeCount.textContent = `${btf.diffDate(publishDate)} ${GLOBAL_CONFIG.runtime}`
     }
   }
 
@@ -638,7 +632,7 @@ document.addEventListener('DOMContentLoaded', function () {
     const $lastPushDateItem = document.getElementById('last-push-date')
     if ($lastPushDateItem) {
       const lastPushDate = $lastPushDateItem.getAttribute('data-lastPushDate')
-      $lastPushDateItem.innerText = btf.diffDate(lastPushDate, true)
+      $lastPushDateItem.textContent = btf.diffDate(lastPushDate, true)
     }
   }
 
@@ -771,10 +765,9 @@ document.addEventListener('DOMContentLoaded', function () {
 
   const relativeDate = function (selector) {
     selector.forEach(item => {
-      const $this = item
-      const timeVal = $this.getAttribute('datetime')
-      $this.innerText = btf.diffDate(timeVal, true)
-      $this.style.display = 'inline'
+      const timeVal = item.getAttribute('datetime')
+      item.textContent = btf.diffDate(timeVal, true)
+      item.style.display = 'inline'
     })
   }
 
@@ -789,6 +782,13 @@ document.addEventListener('DOMContentLoaded', function () {
     clickFnOfSubMenu()
     GLOBAL_CONFIG.islazyload && lazyloadImg()
     GLOBAL_CONFIG.copyright !== undefined && addCopyright()
+
+    if (GLOBAL_CONFIG.autoDarkmode) {
+      window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
+        if (saveToLocal.get('theme') !== undefined) return
+        e.matches ? modeChangeFn('dark') : modeChangeFn('light')
+      })
+    }
   }
 
   window.refreshFn = function () {

source/js/search/local-search.js

@@ -282,7 +282,7 @@ window.addEventListener('load', () => {
       window.pjax && window.pjax.refresh(container)
     }
 
-    $loadingStatus.innerHTML = ''
+    $loadingStatus.textContent = ''
   }
 
   let loadFlag = false

source/js/tw_cn.js

@@ -1,10 +1,6 @@
 document.addEventListener('DOMContentLoaded', function () {
-  const translate = GLOBAL_CONFIG.translate
+  const { defaultEncoding, translateDelay, msgToTraditionalChinese, msgToSimplifiedChinese } = GLOBAL_CONFIG.translate
   const snackbarData = GLOBAL_CONFIG.Snackbar
-  const defaultEncoding = translate.defaultEncoding // 網站默認語言，1: 繁體中文, 2: 簡體中文
-  const translateDelay = translate.translateDelay // 延遲時間,若不在前, 要設定延遲翻譯時間, 如100表示100ms,默認為0
-  const msgToTraditionalChinese = translate.msgToTraditionalChinese // 此處可以更改為你想要顯示的文字
-  const msgToSimplifiedChinese = translate.msgToSimplifiedChinese // 同上，但兩處均不建議更改
   let currentEncoding = defaultEncoding
   const targetEncodingCookie = 'translate-chn-cht'
   let targetEncoding =
@@ -12,7 +8,7 @@ document.addEventListener('DOMContentLoaded', function () {
       ? defaultEncoding
       : Number(saveToLocal.get('translate-chn-cht'))
   let translateButtonObject
-  const isSnackbar = GLOBAL_CONFIG.Snackbar !== undefined
+  const isSnackbar = snackbarData !== undefined
 
   function setLang () {
     document.documentElement.lang = targetEncoding === 1 ? 'zh-TW' : 'zh-CN'
@@ -58,12 +54,12 @@ document.addEventListener('DOMContentLoaded', function () {
     if (targetEncoding === 1) {
       currentEncoding = 1
       targetEncoding = 2
-      translateButtonObject.innerHTML = msgToTraditionalChinese
+      translateButtonObject.textContent = msgToTraditionalChinese
       isSnackbar && btf.snackbarShow(snackbarData.cht_to_chs)
     } else if (targetEncoding === 2) {
       currentEncoding = 2
       targetEncoding = 1
-      translateButtonObject.innerHTML = msgToSimplifiedChinese
+      translateButtonObject.textContent = msgToSimplifiedChinese
       isSnackbar && btf.snackbarShow(snackbarData.chs_to_cht)
     }
     saveToLocal.set(targetEncodingCookie, targetEncoding, 2)
@@ -104,7 +100,7 @@ document.addEventListener('DOMContentLoaded', function () {
     translateButtonObject = document.getElementById('translateLink')
     if (translateButtonObject) {
       if (currentEncoding !== targetEncoding) {
-        translateButtonObject.innerHTML =
+        translateButtonObject.textContent =
           targetEncoding === 1
             ? msgToSimplifiedChinese
             : msgToTraditionalChinese

source/js/utils.js

@@ -186,10 +186,9 @@ const btf = {
   },
 
   unwrap: el => {
-    const elParentNode = el.parentNode
-    if (elParentNode !== document.body) {
-      elParentNode.parentNode.insertBefore(el, elParentNode)
-      elParentNode.parentNode.removeChild(elParentNode)
+    const parent = el.parentNode
+    if (parent && parent !== document.body) {
+      parent.replaceChild(el, parent)
     }
   },
 
@@ -211,13 +210,7 @@ const btf = {
     const service = GLOBAL_CONFIG.lightbox
 
     if (service === 'mediumZoom') {
-      const zoom = mediumZoom(ele)
-      zoom.on('open', e => {
-        const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
-        zoom.update({
-          background: photoBg
-        })
-      })
+      mediumZoom(ele, { background: 'var(--zoom-bg)' })
     }
 
     if (service === 'fancybox') {
@@ -302,5 +295,13 @@ const btf = {
     const scrollPercentRounded = Math.round(scrollPercent * 100)
     const percentage = (scrollPercentRounded > 100) ? 100 : (scrollPercentRounded <= 0) ? 0 : scrollPercentRounded
     return percentage
+  },
+
+  addModeChange: (name, fn) => {
+    if (window.themeChange && window.themeChange[name]) return
+    window.themeChange = {
+      ...window.themeChange,
+      [name]: fn
+    }
   }
 }