Merge pull request #499 from chengzhongxue/main

优化第三方评论

settings.yaml

@@ -2261,11 +2261,23 @@ spec:
     - group: comments
       label: 评论
       formSchema:
+        - $formkit: radio
+          name: commentsEnable
+          id: commentsEnable
+          key: commentsEnable
+          label: 开关
+          value: true
+          options:
+            - label: 打开
+              value: true
+            - label: 关闭
+              value: false
         - $formkit: select
           name: use
           label: 请选择评论系统
           id: use
           key: use
+          if: $get(commentsEnable).value
           value: commentWidget
           options:
             - label: 默认
@@ -2277,63 +2289,18 @@ spec:
             - label: Waline
               value: Waline
         - $formkit: radio
-          if: $get(use).value == 'Twikoo'
-          name: twikooEnable
-          id: twikooEnable
-          key: twikooEnable
-          label: Twikoo
-          value: true
-          help: Twikoo评论需要填写下方配置
+          if: ($get(use).value == 'Twikoo' || $get(use).value == 'Artalk' || $get(use).value == 'Waline' ) && $get(commentsEnable).value
+          name: lazyload
+          label: 评论懒加载
+          value: false
+          help: 当评论进入浏览器的视窗时，将加载评论系统。
           options:
             - label: 打开
               value: true
             - label: 关闭
               value: false
         - $formkit: group
-          if: $get(twikooEnable).value
-          name: twikoos
-          key: twikoos
-          label: Twikoo评论配置 (文档：https://twikoo.js.org/)
-          value:
-            envId:
-            accessToken:
-            js: ""
-          children:
-            - $formkit: url
-              name: envId
-              key: envId
-              label: Twikoo评论 - 环境id/后端URL
-              placeholder: 请输入环境id或URL
-              help: 详情请查看文档 (后缀带 / )
-              validation: required
-            - $formkit: text
-              name: accessToken
-              key: accessToken
-              label: Twikoo评论 - 管理员令牌
-              placeholder: 请输入token
-              help: 在浏览器F12的控制台中获取，用于显示弹幕，详情请查看文档
-              validation: required
-            - $formkit: text
-              name: js
-              key: js
-              label: Twikoo评论 - js
-              placeholder: 请输入js文件地址
-              help: 主题的twikoo版本是最新版本(如果你使用的不是最新版本请自己引入js文件)
-        - $formkit: radio
-          if: $get(use).value == 'Artalk'
-          name: artalkEnable
-          id: artalkEnable
-          key: artalkEnable
-          label: Artalk
-          value: true
-          help: Artalk评论需要填写下方配置
-          options:
-            - label: 打开
-              value: true
-            - label: 关闭
-              value: false
-        - $formkit: group
-          if: $get(artalkEnable).value
+          if: $get(commentsEnable).value &&  $get(use).value == 'Artalk'
           name: artalks
           key: artalks
           label: Artalk评论配置 (文档：https://artalk.js.org/)
@@ -2368,21 +2335,38 @@ spec:
               label: Artalk评论 - css
               placeholder: 请输入css文件地址
               help: 主题的Artalk版本是最新版本(如果你使用的不是最新版本请自己引入css文件)
-        - $formkit: radio
-          if: $get(use).value == 'Waline'
-          name: walineEnable
-          id: walineEnable
-          key: walineEnable
-          label: Waline
-          value: true
-          help: Waline评论需要填写下方配置
-          options:
-            - label: 打开
-              value: true
-            - label: 关闭
-              value: false
         - $formkit: group
-          if: $get(walineEnable).value
+          if: $get(commentsEnable).value &&  $get(use).value == 'Twikoo'
+          name: twikoos
+          key: twikoos
+          label: Twikoo评论配置 (文档：https://twikoo.js.org/)
+          value:
+            envId:
+            accessToken:
+            js: ""
+          children:
+            - $formkit: url
+              name: envId
+              key: envId
+              label: Twikoo评论 - 环境id/后端URL
+              placeholder: 请输入环境id或URL
+              help: 详情请查看文档 (后缀带 / )
+              validation: required
+            - $formkit: text
+              name: accessToken
+              key: accessToken
+              label: Twikoo评论 - 管理员令牌
+              placeholder: 请输入token
+              help: 在浏览器F12的控制台中获取，用于显示弹幕，详情请查看文档
+              validation: required
+            - $formkit: text
+              name: js
+              key: js
+              label: Twikoo评论 - js
+              placeholder: 请输入js文件地址
+              help: 主题的twikoo版本是最新版本(如果你使用的不是最新版本请自己引入js文件)
+        - $formkit: group
+          if: $get(commentsEnable).value && $get(use).value == 'Waline'
           name: walines
           key: walines
           label: Waline评论配置 (文档：https://waline.js.org/)
@@ -2410,11 +2394,31 @@ spec:
               label: Waline评论 - css
               placeholder: 请输入css文件地址
               help: 主题的walines版本是最新版本(如果你使用的不是最新版本请自己引入css文件)
+        - $formkit: group
+          if: ($get(use).value == 'Twikoo' || $get(use).value == 'Artalk' || $get(use).value == 'Waline' ) && $get(commentsEnable).value
+          name: visitorMail
+          label: 评论匿名邮箱
+          value:
+            visitorMailEnable: true
+            mail: visitor@xxx.com
+          children:
+            - $formkit: radio
+              name: visitorMailEnable
+              id: visitorMailEnable
+              key: visitorMailEnable
+              options:
+                - label: 打开
+                  value: true
+                - label: 关闭
+                  value: false
+            - $formkit: text
+              if: $get(visitorMailEnable).value
+              name: mail
+              label: 匿名邮箱
+              placeholder: 请输入匿名邮箱
         - $formkit: group
           name: commentBarrageConfig
-          if: ($get(use).value == 'Artalk' && $get(artalkEnable).value) || 
-              ($get(use).value == 'Twikoo' && $get(twikooEnable).value) || 
-              ($get(use).value == 'Waline' && $get(walineEnable).value)
+          if: ($get(use).value == 'Twikoo' || $get(use).value == 'Artalk' || $get(use).value == 'Waline' ) && $get(commentsEnable).value
           label: 留言弹幕配置
           value:
             commentBarrageEnable: true
@@ -2427,9 +2431,9 @@ spec:
               id: commentBarrageEnable
               key: commentBarrageEnable
               options:
-                - label: 打开
+                - label: 显示
                   value: true
-                - label: 关闭
+                - label: 隐藏
                   value: false
             - $formkit: number
               if: $get(commentBarrageEnable).value

templates/assets/js/comment/artalk.js

@@ -7,7 +7,7 @@
             server: GLOBAL_CONFIG.source.artalk.artalkUrl,
             site: GLOBAL_CONFIG.source.artalk.siteName,
             pageKey: location.pathname,
-            darkMode: document.documentElement.getAttribute('data-theme') === 'dark',
+            darkMode: false,
             countEl: '#ArtalkCount'
         }, null))
 
@@ -31,22 +31,13 @@
         }
     }
 
-    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)
+    if ('Artalk' === 'Artalk' || !GLOBAL_CONFIG.source.comments.lazyload) {
+        if (GLOBAL_CONFIG.source.comments.lazyload) btf.loadComment(document.getElementById('artalk-wrap'), loadArtalk)
         else loadArtalk()
     } else {
         window.loadOtherComment = loadArtalk

templates/assets/js/comment/twikoo.js

@@ -0,0 +1,63 @@
+(() => {
+    if (!document.getElementById('post-comment')) return
+    const init = () => {
+        twikoo.init(Object.assign({
+            el: '#twikoo-wrap',
+            envId: GLOBAL_CONFIG.source.twikoo.twikooUrl,
+            region: '',
+            onCommentLoaded: function () {
+                btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
+                typeof hljs === 'object' && hljs.highlightAll()
+                typeof Prism === 'object' && Prism.highlightAll()
+                $("input").focus(function () {
+                    heo_intype = true;
+                });
+                $("textarea").focus(function () {
+                    heo_intype = true;
+                });
+                $("input").focusout(function () {
+                    heo_intype = false;
+                });
+                $("textarea").focusout(function () {
+                    heo_intype = false;
+                });
+            }
+        }, null))
+    }
+
+    const getCount = () => {
+        twikoo.getCommentsCount({
+            envId: GLOBAL_CONFIG.source.twikoo.twikooUrl,
+            region: '',
+            urls: [window.location.pathname],
+            includeReply: true
+        }).then(function (res) {
+            document.getElementById('twikoo-count').innerText = res[0].count
+        }).catch(function (err) {
+        });
+    }
+
+    const runFn = () => {
+        init()
+        true && getCount()
+    }
+
+    const loadTwikoo = () => {
+        if (typeof twikoo === 'object') {
+            setTimeout(runFn, 0)
+            return
+        }
+        getScript(GLOBAL_CONFIG.source.twikoo.js).then(runFn)
+    }
+
+    if ('Twikoo' === 'Twikoo' || !GLOBAL_CONFIG.source.comments.lazyload) {
+        if (GLOBAL_CONFIG.source.comments.lazyload) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
+        else loadTwikoo()
+    } else {
+        window.loadOtherComment = () => {
+            loadTwikoo()
+        }
+    }
+
+
+})()

templates/assets/js/comment/waline.js

@@ -14,14 +14,13 @@
     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)
+    if ('Waline' === 'Waline' || !GLOBAL_CONFIG.source.comments.lazyload) {
+        if (GLOBAL_CONFIG.source.comments.lazyload) btf.loadComment(document.getElementById('waline-wrap'), loadWaline)
         else setTimeout(loadWaline, 0)
     } else {
         window.loadOtherComment = loadWaline

templates/assets/js/heo.js

@@ -443,6 +443,74 @@ var heo = {
             lastSayHello = o
     },
 
+    //匿名评论
+    addRandomCommentInfo: function () {
+        // 从形容词数组中随机取一个值
+        const randomAdjective = adjectives[Math.floor(Math.random() * adjectives.length)];
+
+        // 从蔬菜水果动物名字数组中随机取一个值
+        const randomName = vegetablesAndFruits[Math.floor(Math.random() * vegetablesAndFruits.length)];
+
+        // 将两个值组合成一个字符串
+        const name = `${randomAdjective}${randomName}`;
+
+        function dr_js_autofill_commentinfos() {
+            var lauthor = [
+                    "#author",
+                    "input[name='comname']",
+                    "#inpName",
+                    "input[name='author']",
+                    "#ds-dialog-name",
+                    "#name",
+                    "input[name='nick']",
+                    "#comment_author",
+                ],
+                lmail = [
+                    "#mail",
+                    "#email",
+                    "input[name='commail']",
+                    "#inpEmail",
+                    "input[name='email']",
+                    "#ds-dialog-email",
+                    "input[name='mail']",
+                    "#comment_email",
+                ],
+                lurl = [
+                    "#url",
+                    "input[name='comurl']",
+                    "#inpHomePage",
+                    "#ds-dialog-url",
+                    "input[name='url']",
+                    "input[name='website']",
+                    "#website",
+                    "input[name='link']",
+                    "#comment_url",
+                ];
+            for (var i = 0; i < lauthor.length; i++) {
+                var author = document.querySelector(lauthor[i]);
+                if (author != null) {
+                    author.value = name;
+                    author.dispatchEvent(new Event("input"));
+                    author.dispatchEvent(new Event("change"));
+                    break;
+                }
+            }
+            for (var j = 0; j < lmail.length; j++) {
+                var mail = document.querySelector(lmail[j]);
+                if (mail != null) {
+                    mail.value = visitorMail;
+                    mail.dispatchEvent(new Event("input"));
+                    mail.dispatchEvent(new Event("change"));
+                    break;
+                }
+            }
+            return !1;
+        }
+        dr_js_autofill_commentinfos();
+        var input = document.getElementsByClassName(GLOBAL_CONFIG.source.comments.textarea)[0];
+        input.focus();
+        input.setSelectionRange(-1, -1);
+    },
 
     //初始化console图标
     initConsoleState: function() {
@@ -505,6 +573,8 @@ var heo = {
     },
 
 };
+const adjectives = ["美丽的", "英俊的", "聪明的", "勇敢的", "可爱的", "慷慨的", "善良的", "可靠的", "开朗的", "成熟的", "稳重的", "真诚的", "幽默的", "豁达的", "有趣的", "活泼的", "优雅的", "敏捷的", "温柔的", "温暖的", "敬业的", "细心的", "耐心的", "深沉的", "朴素的", "含蓄的", "率直的", "开放的", "务实的", "坚强的", "自信的", "谦虚的", "文静的", "深刻的", "纯真的", "朝气蓬勃的", "慎重的", "大方的", "顽强的", "迷人的", "机智的", "善解人意的", "富有想象力的", "有魅力的", "独立的", "好奇的", "干净的", "宽容的", "尊重他人的", "体贴的", "守信的", "有耐性的", "有责任心的", "有担当的", "有远见的", "有智慧的", "有眼光的", "有冒险精神的", "有爱心的", "有同情心的", "喜欢思考的", "喜欢学习的", "具有批判性思维的", "善于表达的", "善于沟通的", "善于合作的", "善于领导的", "有激情的", "有幽默感的", "有思想的", "有个性的", "有正义感的", "有责任感的", "有创造力的", "有想象力的", "有艺术细胞的", "有团队精神的", "有协调能力的", "有决策能力的", "有组织能力的", "有学习能力的", "有执行能力的", "有分析能力的", "有逻辑思维的", "有创新能力的", "有专业素养的", "有商业头脑的"]
+    , vegetablesAndFruits = ["萝卜", "白菜", "芹菜", "生菜", "青椒", "辣椒", "茄子", "豆角", "黄瓜", "西红柿", "洋葱", "大蒜", "土豆", "南瓜", "豆腐", "韭菜", "花菜", "西兰花", "蘑菇", "金针菇", "苹果", "香蕉", "橙子", "柠檬", "猕猴桃", "草莓", "葡萄", "桃子", "杏子", "李子", "石榴", "西瓜", "哈密瓜", "蜜瓜", "樱桃", "蓝莓", "柿子", "橄榄", "柚子", "火龙果"];
 $(document).ready((function() {
         initBlog()
     }

templates/assets/zhheo/blogex.js

@@ -293,8 +293,7 @@ function rightMenuCommentText(txt) {
     if (GLOBAL_CONFIG.rightMenuEnable) {
         rm.hideRightMenu();
     }
-    var input =  GLOBAL_CONFIG.source.comments.use=='Twikoo' ? document.getElementsByClassName('el-textarea__inner')[0] :
-        GLOBAL_CONFIG.source.comments.use=='Artalk' ? document.getElementsByClassName('atk-textarea')[0] : document.getElementsByClassName('appearance-none')[0];
+    var input =  document.getElementsByClassName(GLOBAL_CONFIG.source.comments.textarea)[0];
     let evt = document.createEvent('HTMLEvents');
     evt.initEvent('input', true, true);
     let inputValue = replaceAll(txt, '\n', '\n> ')
@@ -434,7 +433,7 @@ function removeLoading() {
 }
 
 function addFriendLink() {
-    var input = document.getElementsByClassName('el-textarea__inner')[0];
+    var input = document.getElementsByClassName(GLOBAL_CONFIG.source.comments.textarea)[0];
     let evt = document.createEvent('HTMLEvents');
     evt.initEvent('input', true, true);
     input.value = '昵称（请勿包含博客等字样）：\n网站地址（要求博客地址，请勿提交个人主页）：\n头像图片url（请提供尽可能清晰的图片，我会上传到我自己的图床）：\n描述：\n';

templates/assets/zhheo/custom.css

@@ -2515,4 +2515,25 @@ p.p.gray,span.p.gray {
     -o-transform: rotate(360deg);
     -ms-transform: rotate(360deg);
     transform: rotate(360deg);
+}
+
+[data-theme=dark] .artalk,[data-theme=dark] .atk-layer-wrap{
+    --at-color-font: #fff;
+    --at-color-deep: #e7e7e7;
+    --at-color-sub: #e7e7e7;
+    --at-color-grey: #fff;
+    --at-color-meta: #fff;
+    --at-color-border: #2d3235;
+    --at-color-light: #687a86;
+    --at-color-bg: #1e2224;
+    --at-color-bg-transl: rgba(30, 34, 36, .95);
+    --at-color-bg-grey: #46494e;
+    --at-color-bg-grey-transl: rgba(8, 8, 8, .95);
+    --at-color-bg-light: rgba(29, 161, 242, .1);
+    --at-color-main: #0083ff;
+    --at-color-red: #ff5652;
+    --at-color-pink: #fa5a57;
+    --at-color-yellow: #ff7c37;
+    --at-color-green: #4caf50;
+    --at-color-gradient: linear-gradient(180deg, transparent, rgba(30, 34, 36, 1))
 }

templates/assets/zhheo/rightmenu.js

@@ -321,7 +321,7 @@ rm.pasteText = function () {
 //引用到评论
 rm.rightMenuCommentText = function (txt) {
     rm.hideRightMenu();
-    var input = document.getElementsByClassName('el-textarea__inner')[0];
+    var input = document.getElementsByClassName(GLOBAL_CONFIG.source.comments.textarea)[0];
     let evt = document.createEvent('HTMLEvents');
     evt.initEvent('input', true, true);
     let inputValue = replaceAll(txt, '\n', '\n> ')

templates/assets/zhheo/zhheoblog.css

@@ -12770,6 +12770,11 @@ button.el-button.tk-cancel.el-button--default.el-button--small {
     flex-wrap: wrap;
 }
 
+.comment-randomInfo {
+    margin-left: auto;
+    font-size: 13px;
+}
+
 /* 隐藏没有评论 */
 .tk-comments-no {
     /* display: none !important; */

templates/comments.html

@@ -151,8 +151,7 @@
                 </div>
 
 
-                <th:block th:if="${(theme.config.comments.twikooEnable ||  theme.config.comments.artalkEnable
-                                     ||  theme.config.comments.walineEnable) &&
+                <th:block th:if="${ theme.config.comments.commentsEnable &&
                         #strings.contains('Twikoo,Artalk,Waline',theme.config.comments.use) &&
                         theme.config.envelope_comment.enable_danmu }">
                     <div id="danmuBtn">

templates/modules/comment.html

@@ -1,21 +1,43 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<th:block th:fragment="comment(group, kind, name, allowComment)" th:if="${allowComment}">
-    <th:block th:if="${theme.config.comments.use!='commentWidget'}"
-              th:with="use = ${theme.config.comments.use}">
-        <th:block th:replace="~{'modules/comment/'+ ${use}}"/>
-    </th:block>
+<th:block th:fragment="comment(group, kind, name, allowComment)" th:if="${allowComment && theme.config.comments.commentsEnable}">
     <!-- 已知问题 PJAX 下，comment 首次请求会出错。当前的临时解决办法是使用 js 重试 -->
-    <div id="post-comment"
-         th:if="${pluginFinder.available('PluginCommentWidget') && #strings.equals(theme.config.comments.use, 'commentWidget')}">
+    <div id="post-comment">
         <div class="comment-head">
             <div class="comment-headline"><i class="haofont hao-icon-comments"></i> <span>评论</span></div>
-            <div class="comment-privacy"><a href="/privacy">隐私政策</a></div>
+            <div  class="comment-randomInfo">
+                <a th:if="${theme.config.comments.visitorMail.visitorMailEnable}"
+                   onclick="heo.addRandomCommentInfo()" href="javascript:void(0)">匿名评论</a>
+                <a href="/privacy">隐私政策</a>
+            </div>
             <div class="comment-tips" id="comment-tips">
                 <span>你无需删除空行，直接评论以获取最佳展示效果</span>
             </div>
         </div>
-        <halo:comment th:attr="name=${name},kind=${kind},group=${group}" colorScheme="document.documentElement.getAttribute('data-theme')"/>
+
+
+        <th:block th:if="${ #strings.equals(theme.config.comments.use, 'Twikoo') &&
+                 not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
+            <div id="twikoo-wrap"></div>
+            <style>
+                #twikoo .tk-tag-green {
+                    background-color: #3b70fc;
+                    border: none;
+                    border-radius: 4px;
+                    color: #fff;
+                }
+
+            </style>
+        </th:block>
+
+        <div th:if="${#strings.equals(theme.config.comments.use, 'Artalk') && not #strings.isEmpty(theme.config.comments.artalks.server)}"
+             id="artalk-wrap"></div>
+
+        <div th:if="${#strings.equals(theme.config.comments.use, 'Waline')
+              && not #strings.isEmpty(theme.config.comments.walines.serverURL)}" id="waline-wrap"></div>
+
+        <halo:comment th:if="${pluginFinder.available('PluginCommentWidget') && #strings.equals(theme.config.comments.use, 'commentWidget')}"
+                      th:attr="name=${name},kind=${kind},group=${group}" colorScheme="document.documentElement.getAttribute('data-theme')"/>
     </div>
 </th:block>
 </html>

templates/modules/comment/Artalk.html

@@ -1,15 +1,162 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<!-- 导航栏菜单栏 -->
-<div id="post-comment" th:fragment="artalk"
-     th:if="${theme.config.comments.artalkEnable && #strings.equals(theme.config.comments.use, 'Artalk') && not #strings.isEmpty(theme.config.comments.artalks.server)}">
-    <div class="comment-head">
-        <div class="comment-headline"><i class="haofont hao-icon-comments"></i> <span>评论</span></div>
-        <div class="comment-privacy"><a href="/privacy">隐私政策</a></div>
-        <div class="comment-tips" id="comment-tips">
-            <span>你无需删除空行，直接评论以获取最佳展示效果</span>
-        </div>
+
+<th:block th:fragment="artalk" th:if="${#strings.equals(theme.config.comments.use, 'Artalk')
+  && not #strings.isEmpty(theme.config.comments.artalks.server)}">
+    <div class="js-pjax">
+        <script th:src="${assets_link + '/js/comment/artalk.js'}"></script>
+        <input type="hidden" name="page-type" id="page-type" value="album">
     </div>
-    <div id="artalk-wrap"></div>
-</div>
+    <!-- 最近评论 -->
+    <script>
+        window.addEventListener('load', () => {
+            const changeContent = (content) => {
+                if (content === '') return content
+
+                content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
+                content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
+                content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
+                content = content.replace(/<[^>]+>/g, "") // remove html tag
+
+                if (content.length > 150) {
+                    content = content.substring(0, 150) + '...'
+                }
+                return content
+            }
+            const generateHtml = array => {
+                let result = ''
+
+                if (array.length) {
+                    for (let i = 0; i < array.length; i++) {
+                        if (i == 6) {
+                            break;
+                        }
+                        result += '<div class=\'aside-list-item\'>'
+
+                        if (true) {
+                            let name = 'src'
+                            if ([[${ isLazyload }]]) {
+                                name = 'data-lazy-src'
+                            }
+                            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
+                        }
+
+                        result += `<div class='content'>
+                                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
+                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
+                                </div>`
+                    }
+                } else {
+                    result += '没有评论'
+                }
+
+                let $dom = document.querySelector('#card-newest-comments .aside-list')
+                $dom.innerHTML = result
+                window.lazyLoadInstance && window.lazyLoadInstance.update()
+                window.pjax && window.pjax.refresh($dom)
+            }
+
+            const necommHtml = array => {
+                let result = ''
+
+                const pagesize = [[${ theme.config.sidebar.newcommentnumber }]];
+                const defaultpagesize = 5;
+                const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
+
+                if (array.length) {
+                    for (let i = 0; i < array.length; i++) {
+
+                        if (i == finalpagesize) {
+                            break;
+                        }
+                        result += '<div class="aside-list-item">'
+
+                        if (true) {
+                            let name = 'src'
+                            if ([[${ isLazyload }]]) {
+                                name = 'data-lazy-src'
+                            }
+                            result += `
+                            <a class="thumbnail" href="${array[i].url}">
+                                <img alt="dasda" ${name}="${array[i].avatar}">
+                            </a>
+                        `
+                        }
+
+                        result += `
+                        <div class="content">
+                            <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
+                            href="${array[i].url}" title="${array[i].content}">
+                            ${array[i].content}
+                            </a>
+                            <div class="name">
+                                <span>${array[i].nick} / </span>
+                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time>
+                            </div>
+                        </div>
+                    </div>
+                  `
+                    }
+                } else {
+                    result += '没有评论'
+                }
+
+                let $dom = document.querySelector('#newcomm')
+                $dom.innerHTML = result
+                window.lazyLoadInstance && window.lazyLoadInstance.update()
+                window.pjax && window.pjax.refresh($dom)
+            }
+
+            const getComment = () => {
+                const statheaderList = {
+                    method: 'POST',
+                    headers: {
+                        'Content-Type': 'application/x-www-form-urlencoded',
+                        'Origin': window.location.origin
+                    },
+                    body: new URLSearchParams({
+                        'site_name': GLOBAL_CONFIG.source.artalk.siteName,
+                        'limit': '20',
+                        'type': 'latest_comments'
+                    })
+                }
+                fetch("[(${theme.config.comments.artalks.server})]" + 'api/stat', statheaderList)
+                    .then(response => response.json())
+                    .then(d => {
+                        const artalk = d.data.map(function (e) {
+                            return {
+                                '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,
+                                'date': e.date,
+                            }
+                        })
+                        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), 10 / (60 * 24))
+                        generateHtml(artalk)
+                        document.querySelector('#newcomm') && necommHtml(artalk)
+                    }).catch(e => {
+                    const $dom = document.querySelector('#card-newest-comments .aside-list')
+                    $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
+                })
+            }
+            const newestCommentInit = () => {
+                if (document.querySelector('#card-newest-comments .aside-list')) {
+                    const data = saveToLocal.get('artalk-newest-comments')
+                    if (data) {
+                        generateHtml(JSON.parse(data))
+                        document.querySelector('#newcomm') && necommHtml(JSON.parse(data))
+                    } else {
+                        getComment()
+                    }
+                }
+            }
+
+            newestCommentInit()
+            document.addEventListener('pjax:complete', newestCommentInit)
+        })
+    </script>
+
+</th:block>
+
 </html>

templates/modules/comment/Twikoo.html

@@ -1,93 +1,167 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<!-- 导航栏菜单栏 -->
-<div id="post-comment" th:fragment="twikoo" th:if="${theme.config.comments.twikooEnable &&
-#strings.equals(theme.config.comments.use, 'Twikoo') &&
+
+<th:block th:fragment="twikoo" th:if="${#strings.equals(theme.config.comments.use, 'Twikoo') &&
 not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
-    <div class="comment-head">
-        <div class="comment-headline"><i class="haofont hao-icon-comments"></i> <span>评论</span></div>
-        <div class="comment-privacy"><a href="/privacy">隐私政策</a></div>
-        <div class="comment-tips" id="comment-tips">
-            <span>你无需删除空行，直接评论以获取最佳展示效果</span>
-        </div>
+    <div class="js-pjax">
+        <script th:src="${assets_link + '/js/comment/twikoo.js'}"></script>
     </div>
-    <div id="twikoo-wrap"></div>
-    <script>(() => {
-        const init = () => {
-            twikoo.init(Object.assign({
-                el: '#twikoo-wrap',
-                envId: "[(${theme.config.comments.twikoos.envId})]",
-                region: '',
-                onCommentLoaded: function () {
-                    btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
-                    typeof hljs === 'object' && hljs.highlightAll()
-                    typeof Prism === 'object' && Prism.highlightAll()
-                    $("input").focus(function () {
-                        heo_intype = true;
-                    });
-                    $("textarea").focus(function () {
-                        heo_intype = true;
-                    });
-                    $("input").focusout(function () {
-                        heo_intype = false;
-                    });
-                    $("textarea").focusout(function () {
-                        heo_intype = false;
-                    });
+    <!-- 最近评论 -->
+    <script>
+        window.addEventListener('load', () => {
+            const changeContent = (content) => {
+                if (content === '') return content
+
+                content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
+                content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
+                content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
+                content = content.replace(/<[^>]+>/g, "") // remove html tag
+
+                if (content.length > 150) {
+                    content = content.substring(0, 150) + '...'
                 }
-            }, null))
-        }
-
-        const getCount = () => {
-            twikoo.getCommentsCount({
-                envId: "[(${theme.config.comments.twikoos.envId})]",
-                region: '',
-                urls: [window.location.pathname],
-                includeReply: true
-            }).then(function (res) {
-                document.getElementById('twikoo-count').innerText = res[0].count
-            }).catch(function (err) {
-            });
-        }
-
-        const runFn = () => {
-            init()
-            true && getCount()
-        }
-
-        const loadTwikoo = () => {
-            if (typeof twikoo === 'object') {
-                setTimeout(runFn, 0)
-                return
+                return content
             }
-            getScript(GLOBAL_CONFIG.source.twikoo.js).then(runFn)
-        }
 
-        if ('Twikoo' === 'Twikoo' || !false) {
-            if (false) btf.loadComment(document.getElementById('twikoo-wrap'), loadTwikoo)
-            else loadTwikoo()
-        } else {
-            window.loadOtherComment = () => {
-                loadTwikoo()
+            const getComment = () => {
+                const runTwikoo = () => {
+                    twikoo.getRecentComments({
+                        envId: "[(${theme.config.comments.twikoos.envId})]",
+                        region: '',
+                        pageSize: 20,
+                        includeReply: true
+                    }).then(function (res) {
+                        const twikooArray = res.map(e => {
+                            return {
+                                'content': changeContent(e.comment),
+                                'avatar': e.avatar,
+                                'nick': e.nick,
+                                'url': e.url + '#' + e.id,
+                                'date': new Date(e.created).toISOString()
+                            }
+                        })
+
+                        saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
+                        generateHtml(twikooArray)
+                        document.querySelector('#newcomm') && necommHtml(twikooArray)
+                    }).catch(function (err) {
+                        const $dom = document.querySelector('#card-newest-comments .aside-list')
+                        const $newcomm = document.querySelector('#newcomm')
+                        $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
+                        if($newcomm){
+                            $newcomm.innerHTML = "无法获取评论，请确认相关配置是否正确"
+                        }
+
+                    })
+                }
+
+                if (typeof twikoo === 'object') {
+                    runTwikoo()
+                } else {
+                    getScript(GLOBAL_CONFIG.source.twikoo.js).then(runTwikoo)
+                }
             }
-        }
 
+            const generateHtml = array => {
+                let result = ''
 
-    })()</script>
+                if (array.length) {
+                    for (let i = 0; i < array.length; i++) {
+                        if (i == 6) {
+                            break;
+                        }
+                        result += '<div class=\'aside-list-item\'>'
 
-    <style>
-        #twikoo .tk-tag-green {
-            background-color: #3b70fc;
-            border: none;
-            border-radius: 4px;
-            color: #fff;
-        }
+                        if (true) {
+                            let name = 'src'
+                            if([[${isLazyload}]]){
+                                name = 'data-lazy-src'
+                            }
+                            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
+                        }
 
+                        result += `<div class='content'>
+                                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
+                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
+                                </div>`
+                    }
+                } else {
+                    result += '没有评论'
+                }
 
-    </style>
+                let $dom = document.querySelector('#card-newest-comments .aside-list')
+                $dom.innerHTML = result
+                window.lazyLoadInstance && window.lazyLoadInstance.update()
+                window.pjax && window.pjax.refresh($dom)
+            }
 
+            const necommHtml = array => {
+                let result = ''
 
-</div>
+                const pagesize = [[${theme.config.sidebar.newcommentnumber}]];
+                const defaultpagesize = 5;
+                const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
 
+                if (array.length) {
+                    for (let i = 0; i < array.length; i++) {
 
+                        if (i == finalpagesize) {
+                            break;
+                        }
+                        result += '<div class="aside-list-item">'
+
+                        if (true) {
+                            let name = 'src'
+                            if([[${isLazyload}]]){
+                                name = 'data-lazy-src'
+                            }
+                            result += `
+                            <a class="thumbnail" href="${array[i].url}">
+                                <img alt="dasda" ${name}="${array[i].avatar}">
+                            </a>
+                        `
+                        }
+
+                        result += `
+                        <div class="content">
+                            <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
+                            href="${array[i].url}" title="${array[i].content}">
+                            ${array[i].content}
+                            </a>
+                            <div class="name">
+                                <span>${array[i].nick} / </span>
+                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time>
+                            </div>
+                        </div>
+                    </div>
+                  `
+
+                    }
+                } else {
+                    result += '没有评论'
+                }
+
+                let $dom = document.querySelector('#newcomm')
+                $dom.innerHTML = result
+                window.lazyLoadInstance && window.lazyLoadInstance.update()
+                window.pjax && window.pjax.refresh($dom)
+            }
+
+            const newestCommentInit = () => {
+                if (document.querySelector('#card-newest-comments .aside-list')) {
+                    const data = saveToLocal.get('twikoo-newest-comments')
+                    if (data) {
+                        generateHtml(JSON.parse(data))
+                        document.querySelector('#newcomm') &&  necommHtml(JSON.parse(data))
+                    } else {
+                        getComment()
+                    }
+                }
+            }
+
+            newestCommentInit()
+            document.addEventListener('pjax:complete', newestCommentInit)
+        })</script>
+
+</th:block>
 </html>

templates/modules/comment/Waline.html

@@ -1,16 +1,156 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
-<!-- 导航栏菜单栏 -->
-<div id="post-comment" th:fragment="waline" th:if="${theme.config.comments.walineEnable
-  && #strings.equals(theme.config.comments.use, 'Waline')
+
+<th:block th:fragment="waline" th:if="${#strings.equals(theme.config.comments.use, 'Waline')
   && not #strings.isEmpty(theme.config.comments.walines.serverURL)}">
-    <div class="comment-head">
-        <div class="comment-headline"><i class="haofont hao-icon-comments"></i> <span>评论</span></div>
-        <div class="comment-privacy"><a href="/privacy">隐私政策</a></div>
-        <div class="comment-tips" id="comment-tips">
-            <span>你无需删除空行，直接评论以获取最佳展示效果</span>
-        </div>
+    <div class="js-pjax">
+        <script th:src="${assets_link + '/js/comment/waline.js'}"></script>
     </div>
-    <div id="waline-wrap"></div>
-</div>
+    <script>
+        window.addEventListener('load', () => {
+            const changeContent = (content) => {
+                if (content === '') return content
+
+                content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
+                content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
+                content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
+                content = content.replace(/<[^>]+>/g, "") // remove html tag
+
+                if (content.length > 150) {
+                    content = content.substring(0, 150) + '...'
+                }
+                return content
+            }
+
+            const generateHtml = array => {
+                let result = ''
+
+                if (array.length) {
+                    for (let i = 0; i < array.length; i++) {
+                        if (i == 6) {
+                            break;
+                        }
+                        result += '<div class=\'aside-list-item\'>'
+
+                        if (true) {
+                            let name = 'src'
+                            if ([[${ isLazyload }]]) {
+                                name = 'data-lazy-src'
+                            }
+                            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
+                        }
+
+                        result += `<div class='content'>
+                                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
+                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
+                                </div>`
+                    }
+                } else {
+                    result += '没有评论'
+                }
+
+                let $dom = document.querySelector('#card-newest-comments .aside-list')
+                $dom.innerHTML = result
+                window.lazyLoadInstance && window.lazyLoadInstance.update()
+                window.pjax && window.pjax.refresh($dom)
+            }
+
+            const getComment = () => {
+                const loadWaline = () => {
+                    Waline.RecentComments({
+                        serverURL: GLOBAL_CONFIG.source.waline.serverURL,
+                        count: 20
+                    }).then(({ comments }) => {
+                        const walineArray = comments.map(e => {
+                            return {
+                                'content': changeContent(e.comment),
+                                'avatar': e.avatar,
+                                'nick': e.nick,
+                                'url': e.url + '#' + e.objectId,
+                                'date': e.insertedAt,
+                            }
+                        })
+                        saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), 10 / (60 * 24))
+                        generateHtml(walineArray)
+                        document.querySelector('#newcomm') && necommHtml(artalk)
+                    }).catch(e => {
+                        const $dom = document.querySelector('#card-newest-comments .aside-list')
+                        $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
+                    })
+                }
+
+                if (typeof Waline === 'object') loadWaline()
+                else getScript(GLOBAL_CONFIG.source.waline.js).then(loadWaline)
+            }
+
+            const necommHtml = array => {
+                let result = ''
+
+                const pagesize = [[${ theme.config.sidebar.newcommentnumber }]];
+                const defaultpagesize = 5;
+                const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
+
+                if (array.length) {
+                    for (let i = 0; i < array.length; i++) {
+
+                        if (i == finalpagesize) {
+                            break;
+                        }
+                        result += '<div class="aside-list-item">'
+
+                        if (true) {
+                            let name = 'src'
+                            if ([[${ isLazyload }]]) {
+                                name = 'data-lazy-src'
+                            }
+                            result += `
+                            <a class="thumbnail" href="${array[i].url}">
+                                <img alt="dasda" ${name}="${array[i].avatar}">
+                            </a>
+                        `
+                        }
+
+                        result += `
+                        <div class="content">
+                            <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
+                            href="${array[i].url}" title="${array[i].content}">
+                            ${array[i].content}
+                            </a>
+                            <div class="name">
+                                <span>${array[i].nick} / </span>
+                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time>
+                            </div>
+                        </div>
+                    </div>
+                  `
+                    }
+                } else {
+                    result += '没有评论'
+                }
+
+                let $dom = document.querySelector('#newcomm')
+                $dom.innerHTML = result
+                window.lazyLoadInstance && window.lazyLoadInstance.update()
+                window.pjax && window.pjax.refresh($dom)
+            }
+
+            const newestCommentInit = () => {
+                if (document.querySelector('#card-newest-comments .aside-list')) {
+                    const data = saveToLocal.get('waline-newest-comments')
+                    if (data) {
+                        generateHtml(JSON.parse(data))
+                        document.querySelector('#newcomm') && necommHtml(JSON.parse(data))
+                    } else {
+                        getComment()
+                    }
+                }
+            }
+
+            newestCommentInit()
+            document.addEventListener('pjax:complete', newestCommentInit)
+        })
+
+
+    </script>
+</th:block>
 </html>

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

@@ -1,163 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
-<th:block th:fragment="artalk" th:if="${theme.config.comments.artalkEnable
-  && #strings.equals(theme.config.comments.use, 'Artalk')
-  && not #strings.isEmpty(theme.config.comments.artalks.server)}">
-    <div class="js-pjax">
-        <script th:src="${assets_link + '/js/comment/artalk.js'}"></script>
-        <input type="hidden" name="page-type" id="page-type" value="album">
-    </div>
-    <!-- 最近评论 -->
-    <script>
-        window.addEventListener('load', () => {
-            const changeContent = (content) => {
-                if (content === '') return content
-
-                content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
-                content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
-                content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
-                content = content.replace(/<[^>]+>/g, "") // remove html tag
-
-                if (content.length > 150) {
-                    content = content.substring(0, 150) + '...'
-                }
-                return content
-            }
-            const generateHtml = array => {
-                let result = ''
-
-                if (array.length) {
-                    for (let i = 0; i < array.length; i++) {
-                        if (i == 6) {
-                            break;
-                        }
-                        result += '<div class=\'aside-list-item\'>'
-
-                        if (true) {
-                            let name = 'src'
-                            if ([[${ isLazyload }]]) {
-                                name = 'data-lazy-src'
-                            }
-                            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
-                        }
-
-                        result += `<div class='content'>
-                                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-                                </div>`
-                    }
-                } else {
-                    result += '没有评论'
-                }
-
-                let $dom = document.querySelector('#card-newest-comments .aside-list')
-                $dom.innerHTML = result
-                window.lazyLoadInstance && window.lazyLoadInstance.update()
-                window.pjax && window.pjax.refresh($dom)
-            }
-
-            const necommHtml = array => {
-                let result = ''
-
-                const pagesize = [[${ theme.config.sidebar.newcommentnumber }]];
-                const defaultpagesize = 5;
-                const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
-
-                if (array.length) {
-                    for (let i = 0; i < array.length; i++) {
-
-                        if (i == finalpagesize) {
-                            break;
-                        }
-                        result += '<div class="aside-list-item">'
-
-                        if (true) {
-                            let name = 'src'
-                            if ([[${ isLazyload }]]) {
-                                name = 'data-lazy-src'
-                            }
-                            result += `
-                            <a class="thumbnail" href="${array[i].url}">
-                                <img alt="dasda" ${name}="${array[i].avatar}">
-                            </a>
-                        `
-                        }
-
-                        result += `
-                        <div class="content">
-                            <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
-                            href="${array[i].url}" title="${array[i].content}">
-                            ${array[i].content}
-                            </a>
-                            <div class="name">
-                                <span>${array[i].nick} / </span>
-                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time>
-                            </div>
-                        </div>
-                    </div>
-                  `
-                    }
-                } else {
-                    result += '没有评论'
-                }
-
-                let $dom = document.querySelector('#newcomm')
-                $dom.innerHTML = result
-                window.lazyLoadInstance && window.lazyLoadInstance.update()
-                window.pjax && window.pjax.refresh($dom)
-            }
-
-            const getComment = () => {
-                const statheaderList = {
-                    method: 'POST',
-                    headers: {
-                        'Content-Type': 'application/x-www-form-urlencoded',
-                        'Origin': window.location.origin
-                    },
-                    body: new URLSearchParams({
-                        'site_name': GLOBAL_CONFIG.source.artalk.siteName,
-                        'limit': '20',
-                        'type': 'latest_comments'
-                    })
-                }
-                fetch("[(${theme.config.comments.artalks.server})]" + 'api/stat', statheaderList)
-                    .then(response => response.json())
-                    .then(d => {
-                        const artalk = d.data.map(function (e) {
-                            return {
-                                '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,
-                                'date': e.date,
-                            }
-                        })
-                        saveToLocal.set('artalk-newest-comments', JSON.stringify(artalk), 10 / (60 * 24))
-                        generateHtml(artalk)
-                        document.querySelector('#newcomm') && necommHtml(artalk)
-                    }).catch(e => {
-                    const $dom = document.querySelector('#card-newest-comments .aside-list')
-                    $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
-                })
-            }
-            const newestCommentInit = () => {
-                if (document.querySelector('#card-newest-comments .aside-list')) {
-                    const data = saveToLocal.get('artalk-newest-comments')
-                    if (data) {
-                        generateHtml(JSON.parse(data))
-                        document.querySelector('#newcomm') && necommHtml(JSON.parse(data))
-                    } else {
-                        getComment()
-                    }
-                }
-            }
-
-            newestCommentInit()
-            document.addEventListener('pjax:complete', newestCommentInit)
-        })
-    </script>
-
-</th:block>
-
-</html>

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

@@ -1,165 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
-<th:block th:fragment="twikoo" th:if="${theme.config.comments.twikooEnable &&
-#strings.equals(theme.config.comments.use, 'Twikoo') &&
-not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
-    <!-- 最近评论 -->
-    <script>
-        window.addEventListener('load', () => {
-            const changeContent = (content) => {
-                if (content === '') return content
-
-                content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
-                content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
-                content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
-                content = content.replace(/<[^>]+>/g, "") // remove html tag
-
-                if (content.length > 150) {
-                    content = content.substring(0, 150) + '...'
-                }
-                return content
-            }
-
-            const getComment = () => {
-                const runTwikoo = () => {
-                    twikoo.getRecentComments({
-                        envId: "[(${theme.config.comments.twikoos.envId})]",
-                        region: '',
-                        pageSize: 20,
-                        includeReply: true
-                    }).then(function (res) {
-                        const twikooArray = res.map(e => {
-                            return {
-                                'content': changeContent(e.comment),
-                                'avatar': e.avatar,
-                                'nick': e.nick,
-                                'url': e.url + '#' + e.id,
-                                'date': new Date(e.created).toISOString()
-                            }
-                        })
-
-                        saveToLocal.set('twikoo-newest-comments', JSON.stringify(twikooArray), 10 / (60 * 24))
-                        generateHtml(twikooArray)
-                        document.querySelector('#newcomm') && necommHtml(twikooArray)
-                    }).catch(function (err) {
-                        const $dom = document.querySelector('#card-newest-comments .aside-list')
-                        const $newcomm = document.querySelector('#newcomm')
-                        $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
-                        if($newcomm){
-                            $newcomm.innerHTML = "无法获取评论，请确认相关配置是否正确"
-                        }
-
-                    })
-                }
-
-                if (typeof twikoo === 'object') {
-                    runTwikoo()
-                } else {
-                    getScript(GLOBAL_CONFIG.source.twikoo.js).then(runTwikoo)
-                }
-            }
-
-            const generateHtml = array => {
-                let result = ''
-
-                if (array.length) {
-                    for (let i = 0; i < array.length; i++) {
-                        if (i == 6) {
-                            break;
-                        }
-                        result += '<div class=\'aside-list-item\'>'
-
-                        if (true) {
-                            let name = 'src'
-                            if([[${isLazyload}]]){
-                                name = 'data-lazy-src'
-                            }
-                            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
-                        }
-
-                        result += `<div class='content'>
-                                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-                                </div>`
-                    }
-                } else {
-                    result += '没有评论'
-                }
-
-                let $dom = document.querySelector('#card-newest-comments .aside-list')
-                $dom.innerHTML = result
-                window.lazyLoadInstance && window.lazyLoadInstance.update()
-                window.pjax && window.pjax.refresh($dom)
-            }
-
-            const necommHtml = array => {
-                let result = ''
-
-                const pagesize = [[${theme.config.sidebar.newcommentnumber}]];
-                const defaultpagesize = 5;
-                const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
-
-                if (array.length) {
-                    for (let i = 0; i < array.length; i++) {
-
-                        if (i == finalpagesize) {
-                            break;
-                        }
-                        result += '<div class="aside-list-item">'
-
-                        if (true) {
-                            let name = 'src'
-                            if([[${isLazyload}]]){
-                                name = 'data-lazy-src'
-                            }
-                            result += `
-                            <a class="thumbnail" href="${array[i].url}">
-                                <img alt="dasda" ${name}="${array[i].avatar}">
-                            </a>
-                        `
-                        }
-
-                        result += `
-                        <div class="content">
-                            <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
-                            href="${array[i].url}" title="${array[i].content}">
-                            ${array[i].content}
-                            </a>
-                            <div class="name">
-                                <span>${array[i].nick} / </span>
-                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time>
-                            </div>
-                        </div>
-                    </div>
-                  `
-
-                    }
-                } else {
-                    result += '没有评论'
-                }
-
-                let $dom = document.querySelector('#newcomm')
-                $dom.innerHTML = result
-                window.lazyLoadInstance && window.lazyLoadInstance.update()
-                window.pjax && window.pjax.refresh($dom)
-            }
-
-            const newestCommentInit = () => {
-                if (document.querySelector('#card-newest-comments .aside-list')) {
-                    const data = saveToLocal.get('twikoo-newest-comments')
-                    if (data) {
-                        generateHtml(JSON.parse(data))
-                        document.querySelector('#newcomm') &&  necommHtml(JSON.parse(data))
-                    } else {
-                        getComment()
-                    }
-                }
-            }
-
-            newestCommentInit()
-            document.addEventListener('pjax:complete', newestCommentInit)
-        })</script>
-
-</th:block>
-</html>

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

@@ -1,157 +0,0 @@
-<!DOCTYPE html>
-<html lang="en" xmlns:th="http://www.thymeleaf.org">
-
-<th:block th:fragment="waline" th:if="${theme.config.comments.walineEnable
-  && #strings.equals(theme.config.comments.use, 'Waline')
-  && not #strings.isEmpty(theme.config.comments.walines.serverURL)}">
-    <div class="js-pjax">
-        <script th:src="${assets_link + '/js/comment/waline.js'}"></script>
-    </div>
-    <script>
-        window.addEventListener('load', () => {
-            const changeContent = (content) => {
-                if (content === '') return content
-
-                content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
-                content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
-                content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
-                content = content.replace(/<[^>]+>/g, "") // remove html tag
-
-                if (content.length > 150) {
-                    content = content.substring(0, 150) + '...'
-                }
-                return content
-            }
-
-            const generateHtml = array => {
-                let result = ''
-
-                if (array.length) {
-                    for (let i = 0; i < array.length; i++) {
-                        if (i == 6) {
-                            break;
-                        }
-                        result += '<div class=\'aside-list-item\'>'
-
-                        if (true) {
-                            let name = 'src'
-                            if ([[${ isLazyload }]]) {
-                                name = 'data-lazy-src'
-                            }
-                            result += `<a href='${array[i].url}' class='thumbnail'><img ${name}='${array[i].avatar}' alt='${array[i].nick}'><div class='name'><span>${array[i].nick}</span></div></a>`
-                        }
-
-                        result += `<div class='content'>
-                                <a class='comment' href='${array[i].url}' title='${array[i].content}'>${array[i].content}</a>
-                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
-                                </div>`
-                    }
-                } else {
-                    result += '没有评论'
-                }
-
-                let $dom = document.querySelector('#card-newest-comments .aside-list')
-                $dom.innerHTML = result
-                window.lazyLoadInstance && window.lazyLoadInstance.update()
-                window.pjax && window.pjax.refresh($dom)
-            }
-
-            const getComment = () => {
-                const loadWaline = () => {
-                    Waline.RecentComments({
-                        serverURL: GLOBAL_CONFIG.source.waline.serverURL,
-                        count: 20
-                    }).then(({ comments }) => {
-                        const walineArray = comments.map(e => {
-                            return {
-                                'content': changeContent(e.comment),
-                                'avatar': e.avatar,
-                                'nick': e.nick,
-                                'url': e.url + '#' + e.objectId,
-                                'date': e.insertedAt,
-                            }
-                        })
-                        saveToLocal.set('waline-newest-comments', JSON.stringify(walineArray), 10 / (60 * 24))
-                        generateHtml(walineArray)
-                        document.querySelector('#newcomm') && necommHtml(artalk)
-                    }).catch(e => {
-                        const $dom = document.querySelector('#card-newest-comments .aside-list')
-                        $dom.innerHTML = "无法获取评论，请确认相关配置是否正确"
-                    })
-                }
-
-                if (typeof Waline === 'object') loadWaline()
-                else getScript(GLOBAL_CONFIG.source.waline.js).then(loadWaline)
-            }
-
-            const necommHtml = array => {
-                let result = ''
-
-                const pagesize = [[${ theme.config.sidebar.newcommentnumber }]];
-                const defaultpagesize = 5;
-                const finalpagesize = pagesize <= 0 ? defaultpagesize : pagesize;
-
-                if (array.length) {
-                    for (let i = 0; i < array.length; i++) {
-
-                        if (i == finalpagesize) {
-                            break;
-                        }
-                        result += '<div class="aside-list-item">'
-
-                        if (true) {
-                            let name = 'src'
-                            if ([[${ isLazyload }]]) {
-                                name = 'data-lazy-src'
-                            }
-                            result += `
-                            <a class="thumbnail" href="${array[i].url}">
-                                <img alt="dasda" ${name}="${array[i].avatar}">
-                            </a>
-                        `
-                        }
-
-                        result += `
-                        <div class="content">
-                            <a class="comment" style="display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;"
-                            href="${array[i].url}" title="${array[i].content}">
-                            ${array[i].content}
-                            </a>
-                            <div class="name">
-                                <span>${array[i].nick} / </span>
-                                <time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time>
-                            </div>
-                        </div>
-                    </div>
-                  `
-                    }
-                } else {
-                    result += '没有评论'
-                }
-
-                let $dom = document.querySelector('#newcomm')
-                $dom.innerHTML = result
-                window.lazyLoadInstance && window.lazyLoadInstance.update()
-                window.pjax && window.pjax.refresh($dom)
-            }
-
-            const newestCommentInit = () => {
-                if (document.querySelector('#card-newest-comments .aside-list')) {
-                    const data = saveToLocal.get('waline-newest-comments')
-                    if (data) {
-                        generateHtml(JSON.parse(data))
-                        document.querySelector('#newcomm') && necommHtml(JSON.parse(data))
-                    } else {
-                        getComment()
-                    }
-                }
-            }
-
-            newestCommentInit()
-            document.addEventListener('pjax:complete', newestCommentInit)
-        })
-
-
-    </script>
-</th:block>
-</html>

templates/modules/head.html

@@ -225,6 +225,10 @@
                     maxBarrage: [[${ theme.config.comments.commentBarrageConfig.maxBarrage }]],
                     barrageTime: [[${ theme.config.comments.commentBarrageConfig.barrageTime }]],
                     mailMd5: "[(${theme.config.comments.commentBarrageConfig.mailMd5})]",
+                    lazyload: [[${theme.config.comments.lazyload}]],
+                    textarea: [[${ theme.config.comments.use == 'Twikoo' ? 'el-textarea__inner' :
+                                   theme.config.comments.use == 'Artalk' ? 'atk-textarea' :
+                                   theme.config.comments.use == 'Waline' ? 'wl-editor' : 'appearance-none' }]]
                 },
                 twikoo:{
                     js:[[${not #strings.isEmpty(theme.config.comments.twikoos.js) ? theme.config.comments.twikoos.js : assets_link +'/libs/twikoo/twikoo.all.min.js' }]],
@@ -240,7 +244,6 @@
                 },
                 waline:{
                     js:[[${not #strings.isEmpty(theme.config.comments.walines.walinesJs) ? theme.config.comments.walines.walinesJs : 'https://cdn.cbd.int/@waline/client@2.15.7/dist/waline.js' }]],
-                    css:[[${not #strings.isEmpty(theme.config.comments.walines.walinesCss) ? theme.config.comments.walines.walinesCss : 'https://cdn.cbd.int/@waline/client@2.15.7/dist/waline.css' }]],
                     serverURL: "[(${theme.config.comments.walines.serverURL})]",
                 },
                 welcome:{

templates/modules/layouts/layout.html

@@ -12,6 +12,9 @@
 
 <head>
     <th:block th:replace="~{modules/head :: head(htmlType = ${htmlType})}"/>
+    <link th:if="${#strings.equals(theme.config.comments.use, 'Waline')
+    && not #strings.isEmpty(theme.config.comments.walines.serverURL)}"
+      rel="stylesheet" th:href="${not #strings.isEmpty(theme.config.comments.walines.walinesCss) ? theme.config.comments.walines.walinesCss : 'https://cdn.cbd.int/@waline/client@2.15.7/dist/waline.css' }">
 </head>
 
 <body>
@@ -68,11 +71,11 @@
     <script data-pjax src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/qrcodejs/1.0.0/qrcode.min.js"></script>
 
     <!-- 评论 -->
-    <th:block th:if="${theme.config.comments.use!='commentWidget'}"
+    <th:block th:if="${theme.config.comments.use!='commentWidget' && theme.config.comments.commentsEnable }"
               th:with="use = ${theme.config.comments.use}">
-        <th:block th:replace="~{'modules/comment/newest-comments/' + ${use}}"></th:block>
+        <th:block th:replace="~{'modules/comment/' + ${use}}"></th:block>
+        <script th:if="${theme.config.comments.visitorMail.visitorMailEnable}">var visitorMail = "[(${theme.config.comments.visitorMail.mail})]";</script>
     </th:block>
-
     <!--  https://raphamorim.io/waterfall.js/  应该是这个 还有相关的 js 代码 是否可以调整-->
     <script th:src="${assets_link + '/libs/waterfall/waterfall.min.js'}"></script>
 
@@ -100,14 +103,13 @@
     <script th:if="${theme.config.tool.rightMenu.rightMenuEnable}" th:src="${assets_link + '/zhheo/rightmenu.js'}"></script>
 
     <!-- 评论弹幕 -->
-    <script  th:if="${ ((theme.config.comments.twikooEnable &&
-        not #strings.isEmpty(theme.config.comments.twikoos.envId) &&
-        not #strings.isEmpty(theme.config.comments.twikoos.accessToken) ) ||
-        (theme.config.comments.artalkEnable &&
-        not #strings.isEmpty(theme.config.comments.artalks.server))) && theme.config.comments.commentBarrageConfig.commentBarrageEnable}"  data-pjax=""
+    <script  th:if="${ ( ( not #strings.isEmpty(theme.config.comments.twikoos.envId)  && not #strings.isEmpty(theme.config.comments.twikoos.accessToken) ) ||
+        ( not #strings.isEmpty(theme.config.comments.artalks.server) && not #strings.isEmpty(theme.config.comments.artalks.siteName)) ||
+          (#strings.equals(theme.config.comments.use, 'Waline') && not #strings.isEmpty(theme.config.comments.walines.serverURL)) )
+        && theme.config.comments.commentBarrageConfig.commentBarrageEnable
+        && theme.config.comments.commentsEnable}"  data-pjax=""
              th:src="${assets_link + '/zhheo/commentBarrage.js'}"></script>
 
-
     <!-- Tocbot 目录生成 start -->
     <th:block th:replace="~{modules/common/toc-bot :: toc-bot}"></th:block>
 

templates/modules/sidebar.html

@@ -8,7 +8,7 @@
     <div id="sidebar-menus">
         <span class="sidebar-menu-item-title">功能</span>
         <div class="sidebar-menu-item">
-            <a class="darkmode_switchbutton menu-child" id="darkmode_switchbutton" href="javascript:void(0);" onclick="rm.switchDarkMode()"
+            <a class="darkmode_switchbutton menu-child" href="javascript:void(0);" onclick="rm.switchDarkMode()"
                rel="external nofollow" title="显示模式切换">
                 <i class="haofont hao-icon-moon" style="font-size: 0.9rem;"></i>
                 <span>显示模式</span>

templates/modules/widgets/nav-right.html

@@ -22,7 +22,7 @@
 
     <!-- 切换模式 -->
     <div class="nav-button" th:if="${theme.config.nav.right.darkMode}">
-        <a class="console_switchbutton" id="darkmode_switchbutton" href="javascript:void(0);"  onclick="navFn.switchDarkMode();" rel="external nofollow"
+        <a class="console_switchbutton" href="javascript:void(0);"  onclick="navFn.switchDarkMode();" rel="external nofollow"
            title="切换模式 - 日夜交替，黑白互换。">
             <i class="haofont hao-icon-circle-half-stroke" style="font-size: 1rem; font-weight: 700;"></i>
         </a>