feat: artalk 支持點擊打開大圖

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

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