fix: 修復 pjax 下， waline js 會重複加載的 bug

_config.yml

@@ -634,7 +634,8 @@ subtitle:
   # source 調用第三方服務
   # source: false 關閉調用
   # source: 1  調用一言網的一句話（簡體） https://hitokoto.cn/
-  # source: 2  調用今日詩詞（簡體） https://www.jinrishici.com/
+  # source: 2  調用一句網（簡體） https://yijuzhan.com/
+  # source: 3  調用今日詩詞（簡體） https://www.jinrishici.com/
   # subtitle 會先顯示 source , 再顯示 sub 的內容
   source: false
   # 如果關閉打字效果，subtitle 只會顯示 sub 的第一行文字

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

@@ -10,7 +10,7 @@ script.
         const waline = Waline.init(initData)
       }
 
-      if (typeof Waline === 'function') initWaline() 
+      if (typeof Waline === 'object') initWaline() 
       else getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
     }
 

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

@@ -1,13 +1,6 @@
 - const { server, site, option } = theme.artalk
 
 script.
-  function addArtalkSource () {
-    const ele = document.createElement('link')
-    ele.rel = 'stylesheet'
-    ele.href= '!{theme.asset.artalk_css}'
-    document.getElementsByTagName('head')[0].appendChild(ele)
-  }
-
   function loadArtalk () {
     function initArtalk () {
       window.artalkItem = new Artalk(Object.assign({
@@ -22,7 +15,7 @@ script.
 
     if (typeof window.artalkItem === 'object') setTimeout(()=>{initArtalk()},200)
     else {
-      addArtalkSource()
+      getCSS('!{theme.asset.artalk_css}')
       typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk)
                                   : setTimeout(()=>{initArtalk()},200)
     }

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

@@ -2,13 +2,6 @@
 
 script.
   function loadDisqusjs () {
-    function addDisqusjsCSS () {
-      const ele = document.createElement('link')
-      ele.rel = 'stylesheet'
-      ele.href= '!{url_for(theme.asset.disqusjs_css)}'
-      document.getElementsByTagName('head')[0].appendChild(ele)
-    }
-
     function initDisqusjs () {
       window.disqusjs = null
       disqusjs = new DisqusJS(Object.assign({
@@ -34,7 +27,7 @@ script.
 
     if (window.disqusJsLoad) initDisqusjs()
     else {
-      addDisqusjsCSS()
+      getCSS('!{url_for(theme.asset.disqusjs_css)}')
       getScript('!{url_for(theme.asset.disqusjs)}').then(initDisqusjs)
       window.disqusJsLoad = true
     }

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

@@ -1,11 +1,4 @@
 script.
-  function addGitalkSource () {
-    const ele = document.createElement('link')
-    ele.rel = 'stylesheet'
-    ele.href= '!{url_for(theme.asset.gitalk_css)}'
-    document.getElementsByTagName('head')[0].appendChild(ele)
-  }
-
   function loadGitalk () {
     function initGitalk () {
       var gitalk = new Gitalk(Object.assign({
@@ -23,7 +16,7 @@ script.
 
     if (typeof Gitalk === 'function') initGitalk()
     else {
-      addGitalkSource()
+      getCSS('!{url_for(theme.asset.gitalk_css)}')
       getScript('!{url_for(theme.asset.gitalk)}').then(initGitalk)
     }
   }

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

@@ -3,13 +3,6 @@
 
 script.
   function loadWaline () {
-    function insertCSS () {
-      const link = document.createElement("link")
-      link.rel = "stylesheet"
-      link.href = "!{url_for(theme.asset.waline_css)}"
-      document.head.appendChild(link)
-    }
-
     function initWaline () {
       const waline = Waline.init(Object.assign({
         el: '#waline-wrap',
@@ -21,10 +14,11 @@ script.
       }, !{JSON.stringify(option)}))
     }
 
-    if (typeof Waline === 'function') initWaline()
+    if (typeof Waline === 'object') initWaline()
     else {
-      insertCSS()
+      getCSS('!{url_for(theme.asset.waline_css)}').then(() => {
         getScript('!{url_for(theme.asset.waline_js)}').then(initWaline)
+      })
     }
   }
 

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

@@ -64,7 +64,7 @@ script.
         }) 
       }
 
-      if (typeof Waline === 'function') loadWaline() 
+      if (typeof Waline === 'object') loadWaline()
       else getScript('!{url_for(theme.asset.waline_js)}').then(loadWaline)
     }
 

layout/includes/third-party/subtitle.pug

@@ -36,6 +36,38 @@ case source
       }
 
   when 2
+    script.
+      function subtitleType () {
+        getScript('https://yijuzhan.com/api/word.php?m=js').then(() => {
+          const con = str[0]
+          if (!{effect}) {
+            const from = '出自 ' + str[1]
+            const sub = !{JSON.stringify(subContent)}
+            sub.unshift(con, from)
+            window.typed = new Typed('#subtitle', {
+              strings: sub,
+              startDelay: !{startDelay},
+              typeSpeed: !{typeSpeed},
+              loop: !{loop},
+              backSpeed: !{backSpeed},
+            })
+          } else {
+            document.getElementById('subtitle').innerHTML = con
+          }
+        })
+      }
+
+      if (!{effect}) {
+        if (typeof Typed === 'function') {
+          subtitleType()
+        } else {
+          getScript('!{url_for(theme.asset.typed)}').then(subtitleType)
+        }
+      } else {
+        subtitleType()
+      }
+
+  when 3
     script.
       function subtitleType () {
         getScript('https://sdk.jinrishici.com/v2/browser/jinrishici.js').then(() => {

package.json

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

plugins.yml

@@ -42,12 +42,12 @@ waline_js:
   name: '@waline/client'
   file: dist/waline.js
   other_name: waline
-  version: 2.14.6
+  version: 2.14.7
 waline_css:
   name: '@waline/client'
   file: dist/waline.css
   other_name: waline
-  version: 2.14.6
+  version: 2.14.7
 sharejs:
   name: butterfly-extsrc
   file: sharejs/dist/js/social-share.min.js

scripts/helpers/inject_head_js.js

@@ -60,6 +60,17 @@ hexo.extend.helper.register('inject_head_js', function () {
     })
   `
 
+  const getCSS = `
+    win.getCSS = url => new Promise((resolve, reject) => {
+      const link = document.createElement('link')
+      link.rel = 'stylesheet'
+      link.href = url
+      link.onload = () => resolve()
+      link.onerror = () => reject()
+      document.head.appendChild(link)
+    })
+  `
+
   let darkmodeJs = ''
   if (darkmode.enable) {
     darkmodeJs = `
@@ -144,5 +155,5 @@ hexo.extend.helper.register('inject_head_js', function () {
     detectApple()
     `
 
-  return `<script>(win=>{${localStore + getScript + darkmodeJs + asideStatus + detectApple}})(window)</script>`
+  return `<script>(win=>{${localStore + getScript + getCSS + darkmodeJs + asideStatus + detectApple}})(window)</script>`
 })

source/js/main.js

@@ -275,10 +275,7 @@ document.addEventListener('DOMContentLoaded', function () {
       return
     }
 
-    const newEle = document.createElement('link')
+    getCSS(`${GLOBAL_CONFIG.source.justifiedGallery.css}`)
-    newEle.rel = 'stylesheet'
-    newEle.href = GLOBAL_CONFIG.source.justifiedGallery.css
-    document.body.appendChild(newEle)
     getScript(`${GLOBAL_CONFIG.source.justifiedGallery.js}`).then(() => { btf.initJustifiedGallery(ele) })
   }