feat: 移除 pangu.js

feat: js 加载完成才显示聊天按钮

README.md

@@ -101,7 +101,7 @@ npm i hexo-theme-butterfly
 - [x] Chart.js
 - [x] Justified Gallery
 - [x] Lazyload images
-- [x] Instantpage/Pangu/Snackbar notification toast/PWA......
+- [x] Instantpage/Snackbar notification toast/PWA......
 
 ## ✨ Contributors
 

README_CN.md

@@ -101,7 +101,7 @@ theme: butterfly
 - [x] Chart.js 圖表顯示
 - [x] 照片牆
 - [x] 圖片懶加載
-- [x] Instantpage/Pangu/Snackbar彈窗/PWA......
+- [x] Instantpage/Snackbar彈窗/PWA......
 
 ## ✨ 貢獻者
 

_config.yml

@@ -983,13 +983,6 @@ snackbar:
 # https://instant.page/
 instantpage: false
 
-# Pangu - Insert a space between Chinese character and English character
-# https://github.com/vinta/pangu.js
-pangu:
-  enable: false
-  # Specify the field to use pangu (site or post)
-  field: site
-
 # Lazyload
 # https://github.com/verlok/vanilla-lazyload
 lazyload:
@@ -1092,7 +1085,6 @@ CDN:
     # medium_zoom:
     # mermaid:
     # meting_js:
-    # pangu:
     # prismjs_autoloader:
     # prismjs_js:
     # prismjs_lineNumber_js:

layout/includes/additional-js.pug

@@ -17,9 +17,6 @@ div
   if theme.snackbar.enable
     script(src=url_for(theme.asset.snackbar))
 
-  if theme.pangu.enable
-    != partial("includes/third-party/pangu.pug", {}, { cache: true })
-
   .js-pjax
     if needLoadCountJs
       != partial("includes/third-party/card-post-count/index", {}, { cache: true })

layout/includes/rightside.pug

@@ -23,7 +23,7 @@ mixin rightsideItem(array)
             i.fas.fa-list-ul
       when 'chat'
         if chat.rightside_button && chat.use
-          button#chat-btn(type="button" title=_p("rightside.chat"))
+          button#chat-btn(type="button" title=_p("rightside.chat") style="display:none")
             i.fas.fa-message
       when 'comment'
         if commentsJsLoad

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

@@ -1,42 +1,38 @@
 //- https://chatra.io/help/api/
 script.
   (() => {
-    const isChatBtn = !{theme.chat.rightside_button}
-    const isChatHideShow = !{theme.chat.button_hide_show}
-
-    if (isChatBtn) {
-      const close = () => {
-        Chatra('minimizeWidget')
-        Chatra('hide')
-      }
-
-      const open = () => {
-        Chatra('openChat', true)
-        Chatra('show')
-      }
-
-      window.ChatraSetup = { startHidden: true }
-    
-      window.chatBtnFn = () => {
-        document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
-      }
-    } else if (isChatHideShow) {
-      window.chatBtn = {
-        hide: () => Chatra('hide'),
-        show: () => Chatra('show')
-      }
+    window.ChatraID = '#{theme.chatra.id}'
+    window.Chatra = window.Chatra || function() {
+      (window.Chatra.q = window.Chatra.q || []).push(arguments)
     }
 
-    (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)
+    btf.getScript('https://call.chatra.io/chatra.js').then(() => {
+      const isChatBtn = !{theme.chat.rightside_button}
+      const isChatHideShow = !{theme.chat.button_hide_show}
+
+      if (isChatBtn) {
+        const close = () => {
+          Chatra('minimizeWidget')
+          Chatra('hide')
+        }
+
+        const open = () => {
+          Chatra('openChat', true)
+          Chatra('show')
+        }
+
+        window.ChatraSetup = { startHidden: true }
+      
+        window.chatBtnFn = () => document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
+
+        document.getElementById('chat-btn').style.display = 'block'
+      } else if (isChatHideShow) {
+        window.chatBtn = {
+          hide: () => Chatra('hide'),
+          show: () => Chatra('show')
+        }
       }
-      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,37 +1,32 @@
 script.
   (() => {
-    window.$crisp = [];
-    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}";
-    (function () {
-      d = document;
-      s = d.createElement("script");
-      s.src = "https://client.crisp.chat/l.js";
-      s.async = 1;
-      d.getElementsByTagName("head")[0].appendChild(s);
-    })();
-    $crisp.push(["safe", true])
+    window.$crisp = ['safe', true]
+    window.CRISP_WEBSITE_ID = "!{theme.crisp.website_id}"
 
-    const isChatBtn = !{theme.chat.rightside_button}
-    const isChatHideShow = !{theme.chat.button_hide_show}
+    btf.getScript('https://client.crisp.chat/l.js').then(() => {
+      const isChatBtn = !{theme.chat.rightside_button}
+      const isChatHideShow = !{theme.chat.button_hide_show}
 
-    if (isChatBtn) {
-      const open = () => {
-        $crisp.push(["do", "chat:show"])
-        $crisp.push(["do", "chat:open"])
+      if (isChatBtn) {
+        const open = () => {
+          $crisp.push(["do", "chat:show"])
+          $crisp.push(["do", "chat:open"])
+        }
+
+        const close = () => $crisp.push(["do", "chat:hide"])
+
+        close()
+
+        $crisp.push(["on", "chat:closed", close])
+
+        window.chatBtnFn = () => $crisp.is("chat:visible") ? close() : open()
+
+        document.getElementById('chat-btn').style.display = 'block'
+      } else if (isChatHideShow) {
+        window.chatBtn = {
+          hide: () => $crisp.push(["do", "chat:hide"]),
+          show: () => $crisp.push(["do", "chat:show"])
+        }
       }
-
-      const close = () => $crisp.push(["do", "chat:hide"])
-
-      close()
-
-      $crisp.push(["on", "chat:closed", 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/tidio.pug

@@ -1,41 +1,45 @@
-script(src=`//code.tidio.co/${theme.tidio.public_key}.js` async)
 script.
   (() => {
-    const isChatBtn = !{theme.chat.rightside_button}
-    const isChatHideShow = !{theme.chat.button_hide_show}
+    btf.getScript('//code.tidio.co/!{theme.tidio.public_key}.js').then(() => {
+      const isChatBtn = !{theme.chat.rightside_button}
+      const isChatHideShow = !{theme.chat.button_hide_show}
 
-    if (isChatBtn) {
-      let isShow = false
-      const close = () => {
-        window.tidioChatApi.hide()
-        isShow = false
-      }
-      
-      const open = () => {
-        window.tidioChatApi.open()
-        window.tidioChatApi.show()
-        isShow = true
-      }
+      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)
-      } else {
-        document.addEventListener("tidioChat-ready", onTidioChatApiReady)
-      }
+        const onTidioChatApiReady = () => {
+          window.tidioChatApi.hide()
+          window.tidioChatApi.on("close", close)
+        }
+        if (window.tidioChatApi) {
+          window.tidioChatApi.on("ready", onTidioChatApiReady)
+        } else {
+          document.addEventListener("tidioChat-ready", onTidioChatApiReady)
+        }
 
-      window.chatBtnFn = () => {
-        if (!window.tidioChatApi) return
-        isShow ? close() : open()
+        window.chatBtnFn = () => {
+          if (!window.tidioChatApi) return
+          isShow ? close() : open()
+        }
+
+        document.getElementById('chat-btn').style.display = 'block'
+
+      } else if (isChatHideShow) {
+        window.chatBtn = {
+          hide: () => window.tidioChatApi && window.tidioChatApi.hide(),
+          show: () => window.tidioChatApi && window.tidioChatApi.show()
+        }
       }
-    } else if (isChatHideShow) {
-      window.chatBtn = {
-        hide: () => window.tidioChatApi && window.tidioChatApi.hide(),
-        show: () => window.tidioChatApi && window.tidioChatApi.show()
-      }
-    }
+    })
   })()
 

layout/includes/third-party/pangu.pug

@@ -1,23 +0,0 @@
-script.
-  (() => {
-    const panguFn = () => {
-      if (typeof pangu === 'object') pangu.autoSpacingPage()
-      else {
-        btf.getScript('!{url_for(theme.asset.pangu)}')
-          .then(() => {
-            pangu.autoSpacingPage()
-          })
-      }
-    }
-
-    const panguInit = () => {
-      if (!{theme.pangu.field === 'post'}){
-        GLOBAL_CONFIG_SITE.isPost && panguFn()
-      } else {
-        panguFn()
-      }
-    }
-
-    btf.addGlobalFn('pjaxComplete', panguInit, 'pangu')
-    document.addEventListener('DOMContentLoaded', panguInit)
-  })()

package.json

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

plugins.yml

@@ -152,10 +152,6 @@ pace_js:
   other_name: pace
   file: pace.min.js
   version: 1.2.4
-pangu:
-  name: pangu
-  file: dist/browser/pangu.min.js
-  version: 4.0.7
 pjax:
   name: pjax
   file: pjax.min.js

scripts/events/merge_config.js

@@ -545,10 +545,6 @@ hexo.extend.filter.register('before_generate', () => {
       bg_dark: '#1f1f1f'
     },
     instantpage: false,
-    pangu: {
-      enable: false,
-      field: 'site'
-    },
     lazyload: {
       enable: false,
       field: 'site',