update

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">English</a>
-  中文
-  <a title="English" href="/README.md">英文</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/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 preloader = {
+  (()=>{
-    endLoading: () => {
+    const $loadingBox = document.getElementById('loading-box')
-      document.body.style.overflow = '';
+    const $body = document.body
-      document.getElementById('loading-box').classList.add("loaded")
+    const preloader = {
-    },
+      endLoading: () => {
-    initLoading: () => {
+        $body.style.overflow = ''
-      document.body.style.overflow = 'hidden';
+        $loadingBox.classList.add('loaded')
-      document.getElementById('loading-box').classList.remove("loaded")
+      },
+      initLoading: () => {
+        $body.style.overflow = 'hidden'
+        $loadingBox.classList.remove('loaded')
+      }
     }
-  }
 
-  preloader.initLoading()
+    preloader.initLoading()
-  window.addEventListener('load',()=> { preloader.endLoading() })
+    window.addEventListener('load',() => { preloader.endLoading() })
 
-  if (!{theme.pjax && theme.pjax.enable}) {
+    if (!{theme.pjax && theme.pjax.enable}) {
-    document.addEventListener('pjax:send', () => { preloader.initLoading() })
+      document.addEventListener('pjax:send', () => { preloader.initLoading() })
-    document.addEventListener('pjax:complete', () => { preloader.endLoading() })
+      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/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/card-post-count/artalk.pug

@@ -2,19 +2,34 @@
 
 script.
   (() => {
-    const getArtalkCount = () => {
+    const getArtalkCount = async() => {
-      const runWidget = () => {
+      try {
-        Artalk.loadCountWidget({
+        const eleGroup = document.querySelectorAll('#recent-posts .artalk-count')
-          server: '!{server}',
+        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-page-key'))
-          site: '!{site}',
+
-          countEl: '.artalk-count'
+        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
+          })
+        }
+
+        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)
       }
-
-      if (typeof Artalk === 'function') runWidget()
-      else getScript('!{theme.asset.artalk_js}').then(runWidget)
     }
 
-
     window.pjax ? getArtalkCount() : window.addEventListener('load', getArtalkCount)
   })()

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

@@ -1,17 +1,19 @@
 script.
   (() => {
-    function loadWaline () {
+    async function loadWaline () {
-      function initWaline () {
+      try {
-        let initData = {
+        const eleGroup = document.querySelectorAll('#recent-posts .waline-comment-count')
-          el: null,
+        const keyArray = Array.from(eleGroup).map(i => i.getAttribute('data-path'))
-          serverURL: '!{theme.waline.serverURL}',
-          comment: true
-        }
-        const waline = Waline.init(initData)
-      }
 
-      if (typeof Waline === 'object') initWaline() 
+        const res = await fetch(`!{theme.waline.serverURL}/api/comment?type=count&url=${keyArray}`, { method: 'GET' })
-      else getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+        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}';
+    const isChatBtn = !{theme.chat_btn}
-      var s = d.createElement('script');
+    const isChatHideShow = !{theme.chat_hide_show}
-      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');
 
-  if (!{theme.chat_btn}) {
+    if (isChatBtn) {
-    var chatBtnFn = () => {
+      const close = () => {
-      var chatBtn = document.getElementById("chat_btn")
+        Chatra('minimizeWidget')
-      chatBtn.addEventListener("click", function(){
-        Chatra('openChat')
-      });
-    }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
         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,36 +1,45 @@
 script.
-  window.$crisp = [];
+  (() => {
-  window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
+    window.$crisp = [];
-  (function () {
+    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
-    d = document;
+    (function () {
-    s = d.createElement("script");
+      d = document;
-    s.src = "https://client.crisp.chat/l.js";
+      s = d.createElement("script");
-    s.async = 1;
+      s.src = "https://client.crisp.chat/l.js";
-    d.getElementsByTagName("head")[0].appendChild(s);
+      s.async = 1;
-  })();
+      d.getElementsByTagName("head")[0].appendChild(s);
-  $crisp.push(["safe", true])
+    })();
+    $crisp.push(["safe", true])
 
-  if (!{theme.chat_btn}) {
+    const isChatBtn = !{theme.chat_btn}
-    $crisp.push(["do", "chat:hide"])
+    const isChatHideShow = !{theme.chat_hide_show}
-    $crisp.push(["on", "chat:closed", function() {
+
-      $crisp.push(["do", "chat:hide"])
+    if (isChatBtn) {
-    }])
+      const open = () => {
-    var chatBtnFn = () => {
-      var chatBtn = document.getElementById("chat_btn")
-      chatBtn.addEventListener("click", function(){
         $crisp.push(["do", "chat:show"])
         $crisp.push(["do", "chat:open"])
+      }
 
-      });
+      const close = () => {
-    }
-    chatBtnFn()
-  } else {
-    if (!{theme.chat_hide_show}) {
-      function chatBtnHide () {
         $crisp.push(["do", "chat:hide"])
       }
-      function chatBtnShow () {
+
-        $crisp.push(["do", "chat:show"])
+      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")
+  (() => {
+    (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.
+    const isChatBtn = !{theme.chat_btn}
-  var isChatBtn = !{theme.chat_btn}
+    const isChatHideShow = !{theme.chat_hide_show}
-  daovoice('init', {
-    app_id: '!{theme.daovoice.app_id}',},{
-    launcher: { 
-       disableLauncherIcon: isChatBtn // 悬浮 ICON 是否显示
-    },
-  });
-  daovoice('update');
 
-  if (isChatBtn) {
+    daovoice('init', {
-    var chatBtnFn = () => {
+      app_id: '!{theme.daovoice.app_id}',},{
-      var chatBtn = document.getElementById("chat_btn")
+      launcher: { 
-      chatBtn.addEventListener("click", function(){
+        disableLauncherIcon: isChatBtn
-        daovoice('show')
+      },
-      });
+    });
-    }
+    daovoice('update');
-    chatBtnFn()
+
-  } else {
+    if (isChatBtn) {
-    if (!{theme.chat_hide_show}) {
+      window.chatBtnFn = () => {
-      function chatBtnHide () {
+        const isShow = document.getElementById('daodream-messenger').classList.contains('daodream-messenger-active')
-        daovoice('update', {},{
+        isShow ? daovoice('hide') : daovoice('show')
-          launcher: { 
-          disableLauncherIcon: true // 悬浮 ICON 是否显示
-          },
-        });
       }
-      function chatBtnShow () {
+    } else if (isChatHideShow) {
-        daovoice('update', {},{
+      window.chatBtn = {
-          launcher: { 
+        hide: () => {
-          disableLauncherIcon: false // 悬浮 ICON 是否显示
+          daovoice('update', {},{
-          },
+            launcher: {
-        });
+              disableLauncherIcon: true
+            }
+          })
+        },
+        show: () => {
+          daovoice('update', {}, {
+            launcher: {
+              disableLauncherIcon: false
+            }
+          })
+        }
       }
     }
-  }
+  })()

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

@@ -4,39 +4,41 @@
 #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>')
+  (() => {
+    document.getElementById('fb-root') ? '' : document.body.insertAdjacentHTML('afterend', '<div id="fb-root"></div>')
 
-  window.fbAsyncInit = function() {
+    window.fbAsyncInit = function() {
-    FB.init({
+      FB.init({
-      xfbml: true,
+        xfbml: true,
-      version: 'v16.0'
+        version: 'v16.0'
-    });
-  };
-
-  (function(d, s, id) {
-    var js, fjs = d.getElementsByTagName(s)[0];
-    if (d.getElementById(id)) return;
-    js = d.createElement(s); js.id = id;
-    js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js';
-    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();
       });
-    }
+    };
-    chatBtnFn()
+
-  } else {
+    (function(d, s, id) {
-    if (!{theme.chat_hide_show}) {
+      var js, fjs = d.getElementsByTagName(s)[0];
-      function chatBtnHide () {
+      if (d.getElementById(id)) return;
-        FB.CustomerChat.hide()
+      js = d.createElement(s); js.id = id;
-      }
+      js.src = 'https://connect.facebook.net/!{lang}/sdk/xfbml.customerchat.js';
-      function chatBtnShow () {
+      fjs.parentNode.insertBefore(js, fjs);
-        FB.CustomerChat.show(false)
+    }(document, 'script', 'facebook-jssdk'));
-      }
+
-    }
+    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()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          FB.CustomerChat.hide()
+        },
+        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
+    if (isChatBtn) {
-  script.
+      let isShow = false
-    function onTidioChatApiReady() {
+      const close = () => {
-      window.tidioChatApi.hide();
+        window.tidioChatApi.hide()
-      window.tidioChatApi.on("close", function() {
+        isShow = false
-        window.tidioChatApi.hide();
+      }
-      });
-    }
-    if (window.tidioChatApi) {
-      window.tidioChatApi.on("ready", onTidioChatApiReady);
-    } else {
-      document.addEventListener("tidioChat-ready", onTidioChatApiReady);
-    }
       
-    var chatBtnFn = () => {
+      const open = () => {
-      document.getElementById("chat_btn").addEventListener("click", function(){
+        window.tidioChatApi.open()
-        window.tidioChatApi.show();
+        window.tidioChatApi.show()
-        window.tidioChatApi.open();
+        isShow = true
-      });
+      }
-    }
-    chatBtnFn()
 
-else if theme.chat_hide_show
+      const onTidioChatApiReady = () => {
-  script.
+        window.tidioChatApi.hide()
-    function chatBtnHide () {
+        window.tidioChatApi.on("close", close)
+      }
       if (window.tidioChatApi) {
-        //- window.tidioChatApi.hide();
+        window.tidioChatApi.on("ready", onTidioChatApiReady)
-        document.getElementById('tidio-chat').style.display= 'none'
+      } else {
+        document.addEventListener("tidioChat-ready", onTidioChatApiReady)
+      }
+
+      window.chatBtnFn = () => {
+        if (!window.tidioChatApi) return
+        isShow ? close() : open()
+      }
+    } else if (isChatHideShow) {
+      window.chatBtn = {
+        hide: () => {
+          window.tidioChatApi && window.tidioChatApi.hide()
+        },
+        show: () => {
+          window.tidioChatApi && window.tidioChatApi.show()
+        }
       }
     }
-
+  })()
-    function chatBtnShow () {
-      if (window.tidioChatApi) {
-        //- window.tidioChatApi.show();
-        document.getElementById('tidio-chat').style.display= 'block'
-      } 
-    }
-
 

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

@@ -23,11 +23,10 @@ script.
       })
     }
 
-    if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200)
+    if (typeof window.artalkItem === 'object') initArtalk()
     else {
       getCSS('!{theme.asset.artalk_css}').then(()=>{
-        typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk)
+        getScript('!{theme.asset.artalk_js}').then(initArtalk)
-                            : setTimeout(()=>{initArtalk()},200)
       })
     }
   }

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/waline.pug

@@ -14,13 +14,9 @@ script.
       }, !{JSON.stringify(option)}))
     }
 
-    const walineCSSLoad = document.getElementById('waline-css')
+    if (typeof Waline === 'object') initWaline()
-
-    if (typeof Waline === 'object') {
-      walineCSSLoad ? initWaline() : getCSS('!{url_for(theme.asset.waline_css)}','waline-css').then(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,30 +1,38 @@
 script.
   (() => {
-    const $mermaidWrap = document.querySelectorAll('#article-container .mermaid-wrap')
+    const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
-    if ($mermaidWrap.length) {
+    if ($mermaid.length === 0) return
-      window.runMermaid = () => {
+    const runMermaid = () => {
-        window.loadMermaid = true
+      window.loadMermaid = true
-        const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? '!{theme.mermaid.theme.dark}' : '!{theme.mermaid.theme.light}'
+      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 mermaidSrc = item.firstElementChild
-          const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
+        const mermaidThemeConfig = '%%{init:{ \'theme\':\'' + theme + '\'}}%%\n'
-          const mermaidID = 'mermaid-' + index
+        const mermaidID = 'mermaid-' + index
-          const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
+        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 loadMermaid = () => {
+        const renderV9 = svg => {
-        window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
+          mermaidSrc.insertAdjacentHTML('afterend', svg)
-      }
+        }
 
-      btf.addModeChange('mermaid', () => {
+        typeof renderFn === 'string' ? renderV9(renderFn) : renderV10()
-        window.runMermaid()
       })
-
-      window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
     }
+
+    const loadMermaid = () => {
+      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
-- const avatarDefault = option !== null && option.gravatar && option.gravatar.default
+- const avatarDefault = option !== null && option.gravatar && (option.gravatar.params || option.gravatar.default)
 
 script.
   window.addEventListener('load', () => {
@@ -72,11 +72,13 @@ script.
         const res = await fetch('!{server}/api/stat', headerList)
         const result = await res.json()
         const avatarStr = await getSetting()
-        const avatarCdn = !{avatarCdn} || avatarStr.data.frontend_conf.gravatar.mirror
+        const { mirror, params, default:defaults } = avatarStr.data.frontend_conf.gravatar
-        const avatarDefault = !{avatarDefault} || avatarStr.data.frontend_conf.gravatar.default
+        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,

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 getComment = async () => {
-      const loadWaline = () => {
+      try {
-        Waline.RecentComments({
+        const res = await fetch('!{theme.waline.serverURL}/api/comment?type=recent&count=!{theme.newest_comments.limit}', { method: 'GET' })
-          serverURL: '!{theme.waline.serverURL}',
+        const result = await res.json()
-          count: !{theme.newest_comments.limit}
+        const walineArray = result.data.map(e => {
-        }).then(({comments}) => {
+          return {
-          const walineArray = comments.map(e => {
+            'content': changeContent(e.comment),
-            return {
+            'avatar': e.avatar,
-              'content': changeContent(e.comment),
+            'nick': e.nick,
-              'avatar': e.avatar,
+            'url': e.url + '#' + e.objectId,
-              'nick': e.nick,
+            'date': e.time || e.insertedAt
-              'url': e.url + '#' + e.objectId,
+          }
-              'date': e.insertedAt,
-            }
-          })
-          saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(walineArray)
-        }).catch(e => {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
+        saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), !{theme.newest_comments.storage}/(60*24))
+        generateHtml(walineArray)
+      } catch (err) {
+        console.error(err)
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
+        $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

@@ -86,7 +86,7 @@ case source
         if (!{effect}) {
           typedJSFn.init(!{JSON.stringify(subContent)})
         } else {
-          document.getElementById("subtitle").textContent = '!{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.5",
+  "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.55.0
+  version: 4.56.1
 pjax:
   name: pjax
   file: pjax.min.js
@@ -42,12 +42,12 @@ waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.15.4
+  version: 2.15.5
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.15.4
+  version: 2.15.5
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js
@@ -73,7 +73,7 @@ katex_copytex:
 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
@@ -121,12 +121,12 @@ pangu:
 fancybox_css:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.css
-  version: 5.0.17
+  version: 5.0.19
   other_name: fancyapps-ui
 fancybox:
   name: '@fancyapps/ui'
   file: dist/fancybox/fancybox.umd.js
-  version: 5.0.17
+  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,12 +202,12 @@ docsearch_js:
   name: '@docsearch/js'
   other_name: docsearch-js
   file: dist/umd/index.js
-  version: 3.3.4
+  version: 3.4.0
 docsearch_css:
   name: '@docsearch/css'
   other_name: docsearch-css
   file: dist/style.css
-  version: 3.3.4
+  version: 3.4.0
 abcjs_basic_js:
   name: abcjs
   file: dist/abcjs-basic-min.js

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

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,12 +7,13 @@
   background-repeat: no-repeat
   transition: all .5s
 
-  &:not(.not-top-img):before
+  if hexo-config('mask.header')
-    position: absolute
+    &:not(.not-top-img):before
-    width: 100%
+      position: absolute
-    height: 100%
+      width: 100%
-    background-color: alpha($dark-black, .3)
+      height: 100%
-    content: ''
+      background-color: var(--mark-bg)
+      content: ''
 
   // index
   &.full_page
@@ -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
-
+  padding-bottom: 4px
-span.mathjax-overflow
-  display: inline-block
-  padding: 0 2px
   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,
+    #web_bg:before
-    #footer:before,
-    #page-header: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: none !important
-      background-image: 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/index'
-  @import '_search/algolia'
-
-if hexo-config('local_search') && hexo-config('local_search.enable')
-  @import '_search/index'
-  @import '_search/local-search'

source/js/main.js

@@ -301,8 +301,7 @@ document.addEventListener('DOMContentLoaded', function () {
     let initTop = 0
     let isChatShow = true
     const $header = document.getElementById('page-header')
-    const isChatBtnHide = typeof chatBtnHide === 'function'
+    const isChatBtn = typeof chatBtn !== 'undefined'
-    const isChatBtnShow = typeof chatBtnShow === 'function'
     const isShowPercent = GLOBAL_CONFIG.percent.rightside
 
     // 當滾動條小于 56 的時候
@@ -324,14 +323,14 @@ document.addEventListener('DOMContentLoaded', function () {
       if (currentTop > 56) {
         if (isDown) {
           if ($header.classList.contains('nav-visible')) $header.classList.remove('nav-visible')
-          if (isChatBtnShow && isChatShow === true) {
+          if (isChatBtn && isChatShow === true) {
-            chatBtnHide()
+            window.chatBtn.hide()
             isChatShow = false
           }
         } else {
           if (!$header.classList.contains('nav-visible')) $header.classList.add('nav-visible')
-          if (isChatBtnHide && isChatShow === false) {
+          if (isChatBtn && isChatShow === false) {
-            chatBtnShow()
+            window.chatBtn.show()
             isChatShow = true
           }
         }
@@ -545,10 +544,12 @@ document.addEventListener('DOMContentLoaded', function () {
       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()
     }
   }
 
@@ -573,6 +574,9 @@ document.addEventListener('DOMContentLoaded', function () {
       case 'hide-aside-btn':
         rightSideFn.hideAsideBtn()
         break
+      case 'chat-btn':
+        rightSideFn.toggleChatDisplay()
+        break
       default:
         break
     }

source/js/utils.js

@@ -186,10 +186,9 @@ const btf = {
   },
 
   unwrap: el => {
-    const elParentNode = el.parentNode
+    const parent = el.parentNode
-    if (elParentNode !== document.body) {
+    if (parent && parent !== document.body) {
-      elParentNode.parentNode.insertBefore(el, elParentNode)
+      parent.replaceChild(el, parent)
-      elParentNode.parentNode.removeChild(elParentNode)
     }
   },
 
@@ -211,13 +210,7 @@ const btf = {
     const service = GLOBAL_CONFIG.lightbox
 
     if (service === 'mediumZoom') {
-      const zoom = mediumZoom(ele)
+      mediumZoom(ele, { background: 'var(--zoom-bg)' })
-      zoom.on('open', e => {
-        const photoBg = document.documentElement.getAttribute('data-theme') === 'dark' ? '#121212' : '#fff'
-        zoom.update({
-          background: photoBg
-        })
-      })
     }
 
     if (service === 'fancybox') {