修复评论问题

settings.yaml

@@ -2292,6 +2292,7 @@ spec:
         - $formkit: group
           if: $get(twikooEnable).value
           name: twikoos
+          key: twikoos
           label: Twikoo评论配置 (文档：https://twikoo.js.org/)
           value:
             envId:
@@ -2334,6 +2335,7 @@ spec:
         - $formkit: group
           if: $get(artalkEnable).value
           name: artalks
+          key: artalks
           label: Artalk评论配置 (文档：https://artalk.js.org/)
           value:
             siteName: ""
@@ -2382,6 +2384,7 @@ spec:
         - $formkit: group
           if: $get(walineEnable).value
           name: walines
+          key: walines
           label: Waline评论配置 (文档：https://waline.js.org/)
           value:
             serverURL: ""
@@ -2409,9 +2412,9 @@ spec:
               help: 主题的walines版本是最新版本(如果你使用的不是最新版本请自己引入css文件)
         - $formkit: group
           name: commentBarrageConfig
-          if: ($get(use).value == 'Artalk' && $get(twikooEnable).value) || 
+          if: ($get(use).value == 'Artalk' && $get(artalkEnable).value) || 
               ($get(use).value == 'Twikoo' && $get(twikooEnable).value) || 
-              ($get(use).value == 'Waline' && $get(twikooEnable).value)
+              ($get(use).value == 'Waline' && $get(walineEnable).value)
           label: 留言弹幕配置
           value:
             commentBarrageEnable: true

templates/assets/js/comment/artalk.js

@@ -0,0 +1,54 @@
+(() => {
+    if (!document.getElementById('post-comment')) return
+    const initArtalk = () => {
+
+        window.artalkItem = new Artalk(Object.assign({
+            el: '#artalk-wrap',
+            server: GLOBAL_CONFIG.source.artalk.artalkUrl,
+            site: GLOBAL_CONFIG.source.artalk.siteName,
+            pageKey: location.pathname,
+            darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
+            countEl: '#ArtalkCount'
+        }, null))
+
+        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])'))
+                })
+            })
+        })
+    }
+
+    const loadArtalk = async () => {
+        if (typeof window.artalkItem === 'object') initArtalk()
+        else {
+            await getCSS(GLOBAL_CONFIG.source.artalk.css)
+            await getScript(GLOBAL_CONFIG.source.artalk.js)
+            initArtalk()
+        }
+    }
+
+    document.getElementById('darkmode') && document.getElementById('darkmode').addEventListener('click', () => {
+        setDarkMode()
+    })
+    document.getElementById('menu-darkmode') && document.getElementById('menu-darkmode').addEventListener('click', () => {
+        setDarkMode()
+    })
+    document.getElementById('darkmode_switchbutton') && document.getElementById('darkmode_switchbutton').addEventListener('click', () => {
+        setDarkMode()
+    })
+    function setDarkMode() {
+        if (typeof window.artalkItem !== 'object') return
+        let isDark = document.documentElement.getAttribute('data-theme') === 'dark'
+        window.artalkItem.setDarkMode(!isDark)
+    }
+    if ('Artalk' === 'Artalk' || !false) {
+        if (false) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
+        else loadArtalk()
+    } else {
+        window.loadOtherComment = loadArtalk
+    }
+})()

templates/assets/js/comment/waline.js

@@ -0,0 +1,29 @@
+(() => {
+    if (!document.getElementById('post-comment')) return
+    function initWaline() {
+        const waline = Waline.init(Object.assign({
+            el: '#waline-wrap',
+            serverURL: GLOBAL_CONFIG.source.waline.serverURL,
+            pageview: false,
+            dark: 'html[data-theme="dark"]',
+            path: window.location.pathname,
+            comment: false,
+        }, null))
+    }
+
+    const loadWaline = async () => {
+        if (typeof Waline === 'object') initWaline()
+        else {
+            await getCSS(GLOBAL_CONFIG.source.waline.css)
+            await getScript(GLOBAL_CONFIG.source.waline.js)
+            initWaline()
+        }
+    }
+
+    if ('Waline' === 'Waline' || !false) {
+        if (false) btf.loadComment(document.getElementById('waline-wrap'), loadWaline)
+        else setTimeout(loadWaline, 0)
+    } else {
+        window.loadOtherComment = loadWaline
+    }
+})()

templates/assets/zhheo/zhheoblog.css

@@ -10772,7 +10772,7 @@ span.post-meta-position {
     opacity: 1;
 }
 
-#twikoo-count {
+#twikoo-count,#ArtalkCount {
     font-weight: 800;
     color: var(--heo-white);
 }

templates/modules/comment/newest-comments/Artalk.html

@@ -5,66 +5,7 @@
   && #strings.equals(theme.config.comments.use, 'Artalk')
   && not #strings.isEmpty(theme.config.comments.artalks.server)}">
     <div class="js-pjax">
-        <script>
+        <script th:src="${assets_link + '/js/comment/artalk.js'}"></script>
-
-            if (document.querySelector('#post-comment')) {
-                (() => {
-                const initArtalk = () => {
-                    window.artalkItem = new Artalk(Object.assign({
-                        el: '#artalk-wrap',
-                        server: "[(${theme.config.comments.artalks.server})]",
-                        site: GLOBAL_CONFIG.source.artalk.siteName,
-                        pageKey: location.pathname,
-                        darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
-                        countEl: '#twikoo-count'
-                    }, null))
-
-                    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])'))
-                            })
-                        })
-                    })
-                }
-
-
-                const loadArtalk = async () => {
-                    if (typeof window.artalkItem === 'object') initArtalk()
-                    else {
-                        await getCSS(GLOBAL_CONFIG.source.artalk.css)
-                        await getScript(GLOBAL_CONFIG.source.artalk.js)
-                        initArtalk()
-                    }
-                }
-
-                document.getElementById('darkmode') && document.getElementById('darkmode').addEventListener('click', () => {
-                    setDarkMode()
-                })
-                document.getElementById('menu-darkmode') && document.getElementById('menu-darkmode').addEventListener('click', () => {
-                    setDarkMode()
-                })
-                document.getElementById('darkmode_switchbutton') && document.getElementById('darkmode_switchbutton').addEventListener('click', () => {
-                    setDarkMode()
-                })
-                function setDarkMode() {
-                    if (typeof window.artalkItem !== 'object') return
-                    let isDark = document.documentElement.getAttribute('data-theme') === 'dark'
-                    window.artalkItem.setDarkMode(!isDark)
-                }
-                if ('Artalk' === 'Artalk' || !false) {
-                    if (false) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
-                    else loadArtalk()
-                } else {
-                    function loadOtherComment() {
-                        loadArtalk()
-                    }
-                }
-                })()
-            }
-        </script>
         <input type="hidden" name="page-type" id="page-type" value="album">
     </div>
     <!-- 最近评论 -->
@@ -177,7 +118,7 @@
                     body: new URLSearchParams({
                         'site_name': GLOBAL_CONFIG.source.artalk.siteName,
                         'limit': '20',
-                        'type':'latest_comments'
+                        'type': 'latest_comments'
                     })
                 }
                 fetch("[(${theme.config.comments.artalks.server})]" + 'api/stat', statheaderList)

templates/modules/comment/newest-comments/Waline.html

@@ -5,38 +5,7 @@
   && #strings.equals(theme.config.comments.use, 'Waline')
   && not #strings.isEmpty(theme.config.comments.walines.serverURL)}">
     <div class="js-pjax">
-        <script>
+        <script th:src="${assets_link + '/js/comment/waline.js'}"></script>
-            if (document.querySelector('#post-comment')) {
-                (() => {
-                    function initWaline() {
-                        const waline = Waline.init(Object.assign({
-                            el: '#waline-wrap',
-                            serverURL: GLOBAL_CONFIG.source.waline.serverURL,
-                            pageview: false,
-                            dark: 'html[data-theme="dark"]',
-                            path: window.location.pathname,
-                            comment: false,
-                        }, null))
-                    }
-
-                    const loadWaline = async () => {
-                        if (typeof Waline === 'object') initWaline()
-                        else {
-                            await getCSS(GLOBAL_CONFIG.source.waline.css)
-                            await getScript(GLOBAL_CONFIG.source.waline.js)
-                            initWaline()
-                        }
-                    }
-
-                    if ('Waline' === 'Waline' || !false) {
-                        if (false) btf.loadComment(document.getElementById('waline-wrap'), loadWaline)
-                        else setTimeout(loadWaline, 0)
-                    } else {
-                        window.loadOtherComment = loadWaline
-                    }
-                })()
-            }
-        </script>
     </div>
     <script>
         window.addEventListener('load', () => {

templates/post.html

@@ -75,15 +75,18 @@
                             <span class="post-meta-label">热度:</span>
                             <span id="visit" th:text="${post.stats.visit}"></span>
                         </span>
-                        <span th:if="${post.spec.allowComment}" class="post-meta-commentcount" onclick="heo.scrollTo('#post-comment');" title="评论数">
+                        <span th:if="${post.spec.allowComment && #strings.contains('Twikoo,Artalk,commentWidget',theme.config.comments.use)}" class="post-meta-commentcount"
+                              onclick="heo.scrollTo('#post-comment');" title="评论数">
                             <i class="haofont hao-icon-comments post-meta-icon"></i>
                             <span class="post-meta-label">评论:</span>
-                            <a th:if="${#strings.equals(theme.config.comments.use, 'commentWidget')}"
+                            <a  href="#post-comment">
-                               href="#post-comment"><span id="comment-count"
+                                <span th:if="${#strings.equals(theme.config.comments.use, 'commentWidget')}"
-                                                          th:text="${post.stats.comment}"></span></a>
+                                      id="comment-count" th:text="${post.stats.comment}"></span>
-
+                                <span th:if="${#strings.equals(theme.config.comments.use, 'Twikoo')}"
-                            <a th:if="${#strings.contains('Twikoo',theme.config.comments.use)}" href="#post-comment">
+                                      id="twikoo-count"></span>
-                                <span id="twikoo-count"></span></a>
+                                <span th:if="${#strings.equals(theme.config.comments.use, 'Artalk')}"
+                                      id="ArtalkCount"></span>
+                            </a>
                         </span>
                         <span  class="post-meta-commentcount" sec:authorize="isAuthenticated()"
                                data-flag-title="编辑文章"