feat: artalk 支持點擊打開大圖

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

layout/includes/head/config.pug

@@ -88,7 +88,7 @@
   }
 
 script.
-  const GLOBAL_CONFIG = { 
+  const GLOBAL_CONFIG = {
     root: '!{config.root}',
     algolia: !{algolia},
     localSearch: !{localSearch},
@@ -127,5 +127,6 @@ script.
     percent: {
       toc: !{theme.toc.scroll_percent},
       rightside: !{theme.rightside_scroll_percent},
-    }
+    },
+    autoDarkmode: !{theme.darkmode.enable && theme.darkmode.autoChangeMode === 1}
   }

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

@@ -1,4 +1,4 @@
-if theme.abcjs.enable
+if theme.abcjs && theme.abcjs.enable
   if theme.abcjs.per_page
     if is_post() || is_page()
       include ./abcjs.pug

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

@@ -4,7 +4,7 @@ script.
   (() => {
     const getArtalkCount = () => {
       const runWidget = () => {
-        Artalk.LoadCountWidget({
+        Artalk.loadCountWidget({
           server: '!{server}',
           site: '!{site}',
           countEl: '.artalk-count'

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

@@ -18,7 +18,7 @@ script.
           includeReply: false
         }).then(function (res) {
           document.querySelectorAll('#recent-posts .twikoo-count').forEach((item,index) => {
-            item.innerText = res[index].count
+            item.textContent = res[index].count
           })
         }).catch(function (err) {
           console.log(err)

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()

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

@@ -21,6 +21,10 @@ script.
         window.loadMermaid ? runMermaid() : getScript('!{url_for(theme.asset.mermaid)}').then(runMermaid)
       }
 
+      btf.addModeChange('mermaid', () => {
+        window.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 : 'https://sdn.geekzu.org/avatar/'
-- const avatarDefault = option !== null && option.gravatar ? option.gravatar.default : 'mp'
+- const avatarCdn = option !== null && option.gravatar && option.gravatar.mirror
+- const avatarDefault = option !== null && option.gravatar && option.gravatar.default
 
 script.
   window.addEventListener('load', () => {
@@ -45,6 +45,15 @@ script.
       window.pjax && window.pjax.refresh($dom)
     }
 
+    const getSetting = async () => {
+      try {
+        const res = await fetch('!{server}/api/conf', { method: 'GET' })
+        return await res.json()
+      } catch (e) {
+        console.log(e)
+      }
+    }
+
     const headerList = {
       method: 'POST',
       headers: {
@@ -58,25 +67,29 @@ script.
       })
     }
 
-    const getComment = () => {
-      fetch('!{server}/api/stat', headerList)
-        .then(response => response.json())
-        .then(d => {
-          const artalk = d.data.map(function (e) {
-            return {
-              'avatar': '!{avatarCdn}' + e.email_encrypted + '?d=!{avatarDefault}',
-              'content': changeContent(e.content_marked),
-              'nick': e.nick,
-              'url': e.page_url,
-              'date': e.date,
-            }
-          })
-          saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
-          generateHtml(artalk)
-        }).catch(e => {
-          const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+    const getComment = async () => {
+      try {
+        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 avatarDefault = !{avatarDefault} || avatarStr.data.frontend_conf.gravatar.default
+        const artalk = result.data.map(function (e) {
+          return {
+            'avatar': `${avatarCdn}${e.email_encrypted}?d=${avatarDefault}`,
+            'content': changeContent(e.content_marked),
+            'nick': e.nick,
+            'url': e.page_url,
+            'date': e.date,
+          }
         })
+        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), !{theme.newest_comments.storage}/(60*24))
+        generateHtml(artalk)
+      } catch (e) {
+        console.log(e)
+        const $dom = document.querySelector('#card-newest-comments .aside-list')
+        $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+      }
     }
 
     const newestCommentInit = () => {

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

@@ -32,7 +32,7 @@ script.
           generateHtml(disqusArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

layout/includes/third-party/newest-comments/github-issues.pug

@@ -58,7 +58,7 @@ script.
           findTrueUrl(githubArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

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

@@ -60,7 +60,7 @@ script.
           generateHtml(remark42)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
     }
 

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

@@ -36,7 +36,7 @@ script.
           generateHtml(twikooArray)
         }).catch(function (err) {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         })
       }
 

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

@@ -79,7 +79,7 @@ script.
           generateHtml(valineArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         }) 
     }
 

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

@@ -60,7 +60,7 @@ script.
           generateHtml(walineArray)
         }).catch(e => {
           const $dom = document.querySelector('#card-newest-comments .aside-list')
-          $dom.innerHTML= "!{_p('aside.card_newest_comments.error')}"
+          $dom.textContent= "!{_p('aside.card_newest_comments.error')}"
         }) 
       }