feat: artalk 支持點擊打開大圖

feat: 設置了隨系統而切換淺色和深色模式後，評論和 mermaind 也會跟隨切換顏色 feat: artalk 最新評論，從 artalk 配置讀取頭像 CDN 和默認頭像 fix: 修復代碼塊在未展開時，點擊複製按鈕，無法複製的 bug improvement: 代碼和性能優化 improvement: artalk 獲取評論數，由 LoadCountWidget 改為 loadCountWidget
2026-04-16 17:40:55 +08:00 · 2023-05-09 00:36:00 +08:00
parent 52441b6bf5
commit 28d1744b9b
30 changed files with 214 additions and 165 deletions
--- a/layout/includes/head/config.pug
+++ b/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}
  }
--- a/layout/includes/third-party/abcjs/index.pug
+++ b/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
--- a/layout/includes/third-party/card-post-count/artalk.pug
+++ b/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'
--- a/layout/includes/third-party/card-post-count/twikoo.pug
+++ b/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)
--- a/layout/includes/third-party/comments/artalk.pug
+++ b/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)
--- a/layout/includes/third-party/comments/disqus.pug
+++ b/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}) {
--- a/layout/includes/third-party/comments/disqusjs.pug
+++ b/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 {
--- a/layout/includes/third-party/comments/facebook_comments.pug
+++ b/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()
--- a/layout/includes/third-party/comments/giscus.pug
+++ b/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()
--- a/layout/includes/third-party/comments/gitalk.pug
+++ b/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
    }
  }

--- a/layout/includes/third-party/comments/remark42.pug
+++ b/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)
--- a/layout/includes/third-party/comments/twikoo.pug
+++ b/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);
      });
--- a/layout/includes/third-party/comments/utterances.pug
+++ b/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()
--- a/layout/includes/third-party/math/mermaid.pug
+++ b/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)
    }
  })()
--- a/layout/includes/third-party/newest-comments/artalk.pug
+++ b/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 = () => {
--- a/layout/includes/third-party/newest-comments/disqus-comment.pug
+++ b/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')}"
        })
    }

--- a/layout/includes/third-party/newest-comments/github-issues.pug
+++ b/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')}"
        })
    }

--- a/layout/includes/third-party/newest-comments/remark42.pug
+++ b/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')}"
        })
    }

--- a/layout/includes/third-party/newest-comments/twikoo-comment.pug
+++ b/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')}"
        })
      }

--- a/layout/includes/third-party/newest-comments/valine.pug
+++ b/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')}"
        }) 
    }

--- a/layout/includes/third-party/newest-comments/waline.pug
+++ b/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')}"
        }) 
      }

--- a/layout/includes/third-party/subtitle.pug
+++ b/layout/includes/third-party/subtitle.pug
@@ -38,7 +38,7 @@ case source
              sub.unshift(data.hitokoto, from)
              typedJSFn.init(sub)
            } else {
-              document.getElementById('subtitle').innerHTML = data.hitokoto
+              document.getElementById('subtitle').textContent = data.hitokoto
            }
          })
      }
@@ -55,7 +55,7 @@ case source
            sub.unshift(con, from)
            typedJSFn.init(sub)
          } else {
-            document.getElementById('subtitle').innerHTML = con
+            document.getElementById('subtitle').textContent = con
          }
        })
      }
@@ -72,7 +72,7 @@ case source
              sub.unshift(content)
              typedJSFn.init(sub)
            } else {
-              document.getElementById('subtitle').innerHTML = result.data.content
+              document.getElementById('subtitle').textContent = result.data.content
            }
          })
        })
@@ -86,7 +86,7 @@ case source
        if (!{effect}) {
          typedJSFn.init(!{JSON.stringify(subContent)})
        } else {
-          document.getElementById("subtitle").innerHTML = '!{subContent[0]}'
+          document.getElementById("subtitle").textContent = '!{subContent[0]}'
        }
      }
      typedJSFn.run(subtitleType)