修复评论问题

2023-09-17 22:34:00 +08:00 · 2023-09-17 22:34:00 +08:00 · b3eca7e8f1
parent 89881bfcb4
commit b3eca7e8f1
7 changed files with 103 additions and 104 deletions
--- a/settings.yaml
+++ b/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
--- a/templates/assets/js/comment/artalk.js
+++ b/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
+    }
+})()
--- a/templates/assets/js/comment/waline.js
+++ b/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
+    }
+})()
--- a/templates/assets/zhheo/zhheoblog.css
+++ b/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);
 }
--- a/templates/modules/comment/newest-comments/Artalk.html
+++ b/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>
-
-            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>
+        <script th:src="${assets_link + '/js/comment/artalk.js'}"></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)
@ -188,7 +129,7 @@
                                'avatar': 'https://cravatar.cn/avatar/' + e.email_encrypted + '?d=mp&s=240',
                                'content': changeContent(e.content_marked),
                                'nick': e.nick,
-                                'url': e.page_url + '#atk-comment-' +  e.id,
+                                'url': e.page_url + '#atk-comment-' + e.id,
                                'date': e.date,
                            }
                        })
--- a/templates/modules/comment/newest-comments/Waline.html
+++ b/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>
-            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>
+        <script th:src="${assets_link + '/js/comment/waline.js'}"></script>
    </div>
    <script>
        window.addEventListener('load', () => {
--- a/templates/post.html
+++ b/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')}"
-                               href="#post-comment"><span id="comment-count"
-                                                          th:text="${post.stats.comment}"></span></a>
-
-                            <a th:if="${#strings.contains('Twikoo',theme.config.comments.use)}" href="#post-comment">
-                                <span id="twikoo-count"></span></a>
+                            <a  href="#post-comment">
+                                <span th:if="${#strings.equals(theme.config.comments.use, 'commentWidget')}"
+                                      id="comment-count" th:text="${post.stats.comment}"></span>
+                                <span th:if="${#strings.equals(theme.config.comments.use, 'Twikoo')}"
+                                      id="twikoo-count"></span>
+                                <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="编辑文章"