breaking changes: 適配 disqusjs 3.0

fix: 修復首頁文章 valine 評論數只顯示第一篇的 bug
fix: 修復子目錄下，第三方插件本地資源無法加載的 bug closed #908
fix: 評論系統開啟時 busuanzi 的 page_pv 不顯示的 bug closed #902
fix: 修復 pjax 下，使用 mermaid 跳轉會重新加載的 bug

layout/includes/header/post-info.pug

@@ -76,6 +76,10 @@
             if theme.twikoo.visitor
               +pvBlock('','','')
                 span#twikoo_visitors
+          default
+            if theme.busuanzi.page_pv
+              +pvBlock('','post-meta-pv-cv','')
+                span#busuanzi_value_page_pv
       else if theme.busuanzi.page_pv
         +pvBlock('','post-meta-pv-cv','')
           span#busuanzi_value_page_pv
@@ -93,10 +97,13 @@
         
         case whichCount
           when 'Disqus'
-          when 'Disqusjs'
             +countBlock
               span.disqus-comment-count
                 a(href=full_url_for(page.path) + '#disqus_thread')
+          when 'Disqusjs'
+            +countBlock
+              a(href=full_url_for(page.path) + '#disqusjs')
+                span.disqus-comment-count(data-disqus-url=full_url_for(page.path))
           when 'Valine'
             +countBlock
               a(href=url_for(page.path) + '#post-comment' itemprop="discussionUrl")

layout/includes/mixins/post-ui.pug

@@ -70,13 +70,16 @@ mixin postUI(posts)
           if theme.comments.card_post_count
             case theme.comments.use[0]
               when 'Disqus'
-              when 'Disqusjs'
                 +countBlockInIndex
                   a(href=full_url_for(link) + '#disqus_thread')
+              when 'Disqusjs'
+                +countBlockInIndex
+                  a(href=full_url_for(link) + '#disqusjs')
+                    span.disqus-comment-count(data-disqus-url=full_url_for(link))
               when 'Valine'
                 +countBlockInIndex
-                  a(href=url_for(link) + '#post-comment' itemprop="discussionUrl")
+                  a(href=url_for(link) + '#post-comment')
-                    span.valine-comment-count(data-xid=url_for(link) itemprop="commentCount")
+                    span.valine-comment-count(data-xid=url_for(link))
               when 'Waline'
                 +countBlockInIndex
                   a(href=url_for(link) + '#post-comment')

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

@@ -28,7 +28,7 @@ script.
         if (typeof twikoo === 'object') {
           runTwikoo()
         } else {
-          getScript('!{theme.asset.twikoo}').then(runTwikoo)
+          getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
         }
     }
 

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

@@ -6,6 +6,7 @@ script.
           el: '#vcomment',
           appId: '#{theme.valine.appId}',
           appKey: '#{theme.valine.appKey}',
+          serverURLs: '#{theme.valine.serverURLs}'
         }
         
         const valine = new Valine(initData)

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

@@ -4,7 +4,7 @@ script.
   function loadDisqus () {
     var disqus_config = function () {
       this.page.url = '!{ page.permalink }'
-      this.page.identifier = '!{ page.path }'
+      this.page.identifier = '!{ url_for(page.path) }'
       this.page.title = '!{ disqusPageTitle }'
     };
 
@@ -24,6 +24,10 @@ 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

@@ -10,18 +10,27 @@ script.
     }
 
     function initDisqusjs () {
-      window.DISQUS = null
+      window.disqusjs = null
-      new DisqusJS(Object.assign({
+      disqusjs = new DisqusJS(Object.assign({
         shortname: '!{theme.disqusjs.shortname}',
-        identifier: '!{ page.path }',
+        identifier: '!{ url_for(page.path) }',
         url: '!{ page.permalink }',
         title: '!{ disqusjsPageTitle }',
         apikey: '!{theme.disqusjs.apikey}',
       },!{JSON.stringify(theme.disqusjs.option)}))
+
+      disqusjs.render(document.getElementById('disqusjs'))
+    }
+
+    const themeChange = () => {
+      const ele = document.getElementById('disqus_thread')
+      if(!ele) return
+      disqusjs.destroy()
+      initDisqusjs()
     }
 
 
-    window.disqusReset = initDisqusjs
+    document.getElementById('darkmode').addEventListener('click', themeChange)
 
     if (window.disqusJsLoad) initDisqusjs()
     else {
@@ -32,7 +41,7 @@ script.
   }
 
   if ('!{theme.comments.use[0]}' === 'Disqusjs' || !!{theme.comments.lazyload}) {
-    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqus_thread'), loadDisqusjs)
+    if (!{theme.comments.lazyload}) btf.loadComment(document.getElementById('disqusjs'), loadDisqusjs)
     else loadDisqusjs()
   }
   else {

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

@@ -22,7 +22,7 @@ hr
           when 'Valine'
             #vcomment.vcomment
           when 'Disqusjs'
-            #disqus_thread
+            #disqusjs
           when 'Livere'
             #lv-container(data-id="city" data-uid=theme.livere.uid)
           when 'Gitalk'

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

@@ -39,7 +39,7 @@ script.
         setTimeout(runFn,0)
         return
       } 
-      getScript('!{theme.asset.twikoo}').then(runFn)
+      getScript('!{url_for(theme.asset.twikoo)}').then(runFn)
     }
 
     if ('!{use[0]}' === 'Twikoo' || !!{lazyload}) {

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

@@ -1,6 +1,6 @@
-link(rel="stylesheet" type="text/css" href=theme.asset.katex)
+link(rel="stylesheet" type="text/css" href=url_for(theme.asset.katex))
 script(src=url_for(theme.asset.katex_copytex))
-link(rel="stylesheet" type="text/css" href=theme.asset.katex_copytex_css)
+link(rel="stylesheet" type="text/css" href=url_for(theme.asset.katex_copytex_css))
 script.
   (() => {
     document.querySelectorAll('#article-container span.katex-display').forEach(item => {

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

@@ -37,7 +37,7 @@ script.
     }
     
     const script = document.createElement('script')
-    script.src = '!{theme.asset.mathjax}'
+    script.src = '!{url_for(theme.asset.mathjax)}'
     script.id = 'MathJax-script'
     script.async = true
     document.head.appendChild(script)

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

@@ -18,7 +18,7 @@ script.
       }
 
       const loadMermaid = () => {
-        window.loadMermaid ? runMermaid() : getScript('!{theme.asset.mermaid}').then(runMermaid)
+        window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
       }
 
       window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)

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

@@ -43,7 +43,7 @@ script.
       if (typeof twikoo === 'object') {
         runTwikoo()
       } else {
-        getScript('!{theme.asset.twikoo}').then(runTwikoo)
+        getScript('!{url_for(theme.asset.twikoo)}').then(runTwikoo)
       }
     }
 

layout/includes/third-party/pjax.pug

@@ -3,7 +3,7 @@ if theme.pjax.exclude
   each val in theme.pjax.exclude
     - pjaxExclude = pjaxExclude + `:not([href="${val}"])`
 
-- let pjaxSelectors = ['title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax']
+- let pjaxSelectors = ['head > title','#config-diff','#body-wrap','#rightside-config-hide','#rightside-config-show','.js-pjax']
 
 - let choose = theme.comments.use
 if choose
@@ -47,6 +47,7 @@ script.
     const $bodyClassList = document.body.classList
     $bodyClassList.contains('read-mode') && $bodyClassList.remove('read-mode')
 
+    typeof disqusjs === 'object' && disqusjs.destroy()
   })
 
   document.addEventListener('pjax:complete', function () {

package.json

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

scripts/events/config.js

@@ -43,8 +43,8 @@ hexo.extend.filter.register('before_generate', () => {
     gitalk_css: 'https://cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.css',
     blueimp_md5: 'https://cdn.jsdelivr.net/npm/blueimp-md5/js/md5.min.js',
     valine: 'https://cdn.jsdelivr.net/npm/valine/dist/Valine.min.js',
-    disqusjs: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqus.js',
+    disqusjs: 'https://cdn.jsdelivr.net/npm/disqusjs@3/dist/browser/disqusjs.es2015.umd.min.js',
-    disqusjs_css: 'https://cdn.jsdelivr.net/npm/disqusjs@1/dist/disqusjs.css',
+    disqusjs_css: 'https://cdn.jsdelivr.net/npm/disqusjs@3/dist/browser/styles/disqusjs.css',
     twikoo: 'https://cdn.jsdelivr.net/npm/twikoo@1/dist/twikoo.all.min.js',
     waline_js: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.js',
     waline_css: 'https://cdn.jsdelivr.net/npm/@waline/client/dist/waline.css',

source/css/_mode/darkmode.styl

@@ -118,8 +118,10 @@ if hexo-config('darkmode.enable') || hexo-config('display_mode') == 'dark'
         fill: alpha(#FFFFFF, .9) !important
 
     // Disqusjs 反代模式下的適配
-    #disqus_thread
+    #disqusjs
       #dsqjs
+        &:hover,
+        &:focus,
         .dsqjs-tab-active,
         .dsqjs-no-comment
           color: alpha(#FFFFFF, .7)

source/js/main.js

@@ -478,7 +478,6 @@ document.addEventListener('DOMContentLoaded', function () {
       typeof utterancesTheme === 'function' && utterancesTheme()
       typeof changeGiscusTheme === 'function' && changeGiscusTheme()
       typeof FB === 'object' && window.loadFBComment()
-      window.DISQUS && document.getElementById('disqus_thread').children.length && setTimeout(() => window.disqusReset(), 200)
       typeof runMermaid === 'function' && window.runMermaid()
     },
     showOrHideBtn: (e) => { // rightside 點擊設置 按鈕 展開