feat: artalk 支持點擊打開大圖

feat: 設置了隨系統而切換淺色和深色模式後，評論和 mermaind 也會跟隨切換顏色
feat: artalk 最新評論，從 artalk 配置讀取頭像 CDN 和默認頭像
fix: 修復代碼塊在未展開時，點擊複製按鈕，無法複製的 bug
improvement: 代碼和性能優化
improvement: artalk 獲取評論數，由 LoadCountWidget 改為 loadCountWidget

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

@@ -11,22 +11,35 @@ script.
         darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
         countEl: '.artalk-count'
       },!{JSON.stringify(option)}))
+
+      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') setTimeout(()=>{initArtalk()},200)
     else {
-      getCSS('!{theme.asset.artalk_css}')
-      typeof Artalk !== 'function' ? getScript('!{theme.asset.artalk_js}').then(initArtalk)
-                                  : setTimeout(()=>{initArtalk()},200)
+      getCSS('!{theme.asset.artalk_css}').then(()=>{
+        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)
-  })
+  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

@@ -22,9 +22,19 @@ script.
       ele.setAttribute('crossorigin', 'anonymous')
       ele.setAttribute('id', 'facebook-jssdk')
       document.getElementById('fb-root').insertAdjacentElement('afterbegin',ele)
-    }   
+    }
   }
 
+  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/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()