适配Artalk评论

settings.yaml

@@ -2180,11 +2180,6 @@ spec:
               value: true
             - label: 禁用
               value: false
-        - $formkit: number
-          name: maxBarrage
-          value: 20
-          label: 弹幕数页数
-          placeholder: 请输入弹幕数页数
         - $formkit: radio
           label: 信笺
           name: enable_envelope_comment
@@ -2272,12 +2267,13 @@ spec:
           id: use
           key: use
           value: commentWidget
-          help: Twikoo评论需要填写下方配置
           options:
             - label: 默认
               value: commentWidget
             - label: Twikoo
               value: Twikoo
+            - label: Artalk
+              value: Artalk
         - $formkit: radio
           if: $get(use).value == 'Twikoo'
           name: twikooEnable
@@ -2285,6 +2281,7 @@ spec:
           key: twikooEnable
           label: Twikoo
           value: true
+          help: Twikoo评论需要填写下方配置
           options:
             - label: 打开
               value: true
@@ -2295,45 +2292,122 @@ spec:
           name: twikoos
           label: Twikoo评论配置
           value:
-            maxBarrage:
-            barrageTime:
             envId:
             accessToken:
-            mailMd5:
             js: ""
           children:
-            - $formkit: number
-              name: maxBarrage
-              value: 1
-              label: 同时最多显示弹幕数
-              placeholder: 请输入显示弹幕数
-              help: 右下角同时最多显示的弹幕数量
-            - $formkit: number
-              name: barrageTime
-              value: 4000
-              label: 弹幕显示间隔时间ms
-              placeholder: 请输入间隔时间ms
-              help: 右下角弹出热评弹幕的间隔时间
             - $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的控制台中获取，用于显示弹幕，详情请查看文档
-            - $formkit: text
-              name: mailMd5
-              label: Twikoo评论 - 博主邮箱MD5值
-              placeholder: 请输入md5值
-              help: 用于验证博主评论，可前往cmd5.com加密自己使用的邮箱，选择32位小写
+              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
+          name: artalks
+          label: Artalk评论配置
+          value:
+            siteName: ""
+            server: ""
+            js: ""
+            css: ""
+          children:
+            - $formkit: url
+              name: server
+              key: artalkServer
+              label: Artalk评论 - 后端URL
+              placeholder: 请输入后端URL
+              help: 详情请查看文档
+              validation: required
+            - $formkit: text
+              name: siteName
+              key: siteName
+              label: 标题
+              placeholder: 请输入标题
+              help: 详情请查看文档
+              validation: required
+            - $formkit: text
+              name: js
+              key: artalkJs
+              label: Artalk评论 - js
+              placeholder: 请输入js文件地址
+              help: 主题的Artalk版本是最新版本(如果你使用的不是最新版本请自己引入js文件)
+            - $formkit: text
+              name: css
+              key: artalkCss
+              label: Artalk评论 - css
+              placeholder: 请输入css文件地址
+              help: 主题的Artalk版本是最新版本(如果你使用的不是最新版本请自己引入css文件)
+        - $formkit: group
+          name: commentBarrageConfig
+          if: $get(use).value == 'Artalk' || $get(use).value == 'Twikoo'
+          label: 留言弹幕配置
+          value:
+            commentBarrageEnable: true
+            maxBarrage: 1
+            barrageTime: 4000
+            mailMd5:
+          children:
+            - $formkit: radio
+              name: commentBarrageEnable
+              id: commentBarrageEnable
+              key: commentBarrageEnable
+              options:
+                - label: 打开
+                  value: true
+                - label: 关闭
+                  value: false
+            - $formkit: number
+              if: $get(commentBarrageEnable).value
+              name: maxBarrage
+              key: maxBarrage
+              label: 同时最多显示弹幕数
+              placeholder: 请输入显示弹幕数
+              help: 右下角同时最多显示的弹幕数量
+              validation: required
+            - $formkit: number
+              if: $get(commentBarrageEnable).value
+              name: barrageTime
+              key: barrageTime
+              label: 弹幕显示间隔时间ms
+              placeholder: 请输入间隔时间ms
+              help: 右下角弹出热评弹幕的间隔时间
+              validation: required
+            - $formkit: text
+              if: $get(commentBarrageEnable).value
+              name: mailMd5
+              key: mailMd5
+              label: 评论 - 博主邮箱MD5值
+              placeholder: 请输入md5值
+              help: 用于验证博主评论，可前往cmd5.com加密自己使用的邮箱，选择32位小写
+              validation: required
 
     - group: style
       label: 样式

templates/assets/js/halo.js

@@ -257,7 +257,7 @@ let halo = {
             document.head.appendChild(a)
     },
 
-    danmu: (url,token,maxBarrage)=>{
+    danmu: ()=>{
         const e = new EasyDanmakuMin({
             el: "#danmu",
             line: 10,
@@ -273,13 +273,14 @@ let halo = {
             function a(e) {
                 return e = (e = (e = (e = (e = e.replace(/<\/*br>|[\s\uFEFF\xA0]+/g, "")).replace(/<img.*?>/g, "[图片]")).replace(/<a.*?>.*?<\/a>/g, "[链接]")).replace(/<pre.*?>.*?<\/pre>/g, "[代码块]")).replace(/<.*?>/g, "")
             }
-            fetch(url, {
+            if(GLOBAL_CONFIG.source.comments.use == 'Twikoo'){
+                fetch(GLOBAL_CONFIG.source.twikoo.twikooUrl, {
                     method: "POST",
                     body: JSON.stringify({
                         event: "GET_RECENT_COMMENTS",
-                    accessToken: token,
+                        accessToken: GLOBAL_CONFIG.source.twikoo.accessToken,
                         includeReply: !1,
-                    pageSize: maxBarrage
+                        pageSize: 5
                     }),
                     headers: {
                         "Content-Type": "application/json"
@@ -300,6 +301,37 @@ let halo = {
                     }
                 ))
             }
+            if(GLOBAL_CONFIG.source.comments.use == 'Artalk'){
+                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': '100',
+                        'type':'latest_comments'
+                    })
+                }
+                fetch(GLOBAL_CONFIG.source.artalk.artalkUrl + 'api/stat', statheaderList)
+                    .then((e=>e.json())).then((({data: t})=>{
+                        t.forEach((e=>{
+                                n.push({
+                                    avatar: 'https://cravatar.cn/avatar/' + e.email_encrypted + '?d=mp&s=240',
+                                    content: e.nick + "：" + a(e.content_marked),
+                                    href: e.page_url + '#atk-comment-' + e.id
+
+                                })
+                            }
+                        )),
+                            e.batchSend(n, !0),
+                            saveToLocal.set("danmu", n, .02)
+                    }
+                ))
+            }
+
+        }
         document.getElementById("danmuBtn").innerHTML = "<button class=\"hideBtn\" onclick=\"document.getElementById('danmu').classList.remove('hidedanmu')\">显示弹幕</button> <button class=\"hideBtn\" onclick=\"document.getElementById('danmu').classList.add('hidedanmu')\">隐藏弹幕</button>"
     },
 

templates/assets/zhheo/blogex.js

@@ -293,7 +293,8 @@ function rightMenuCommentText(txt) {
     if (GLOBAL_CONFIG.rightMenuEnable) {
         rm.hideRightMenu();
     }
-    var input = document.getElementsByClassName('el-textarea__inner')[0];
+    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];
     let evt = document.createEvent('HTMLEvents');
     evt.initEvent('input', true, true);
     let inputValue = replaceAll(txt, '\n', '\n> ')

templates/assets/zhheo/commentBarrage.js

@@ -1,19 +1,23 @@
-if(GLOBAL_CONFIG.htmlType!='comments') {
+if(GLOBAL_CONFIG.htmlType!='comments' && document.querySelector('#post-comment')) {
+
     var commentBarrageConfig = {
         //同时最多显示弹幕数
-        maxBarrage: GLOBAL_CONFIG.source.twikoo.maxBarrage,
+        maxBarrage: GLOBAL_CONFIG.source.comments.maxBarrage,
         //弹幕显示间隔时间ms
-        barrageTime: GLOBAL_CONFIG.source.twikoo.barrageTime,
+        barrageTime: GLOBAL_CONFIG.source.comments.barrageTime,
         //twikoo部署地址腾讯云的为环境ID
         twikooUrl: GLOBAL_CONFIG.source.twikoo.twikooUrl,
+        artalkUrl: GLOBAL_CONFIG.source.artalk.artalkUrl,
         //token获取见上方
         accessToken: GLOBAL_CONFIG.source.twikoo.accessToken,
-        mailMd5: GLOBAL_CONFIG.source.twikoo.mailMd5,
+        mailMd5: GLOBAL_CONFIG.source.comments.mailMd5,
         pageUrl: window.location.pathname,
         barrageTimer: [],
         barrageList: [],
+        siteName: GLOBAL_CONFIG.source.artalk.siteName,
         barrageIndex: 0,
         dom: document.querySelector('.comment-barrage'),
+        use: GLOBAL_CONFIG.source.comments.use
     }
 
     var commentInterval = null;
@@ -30,6 +34,7 @@ if(GLOBAL_CONFIG.htmlType!='comments') {
     function initCommentBarrage() {
         //console.log("开始创建热评")
 
+        if(commentBarrageConfig.use=='Twikoo'){
             var data = JSON.stringify({
                 "event": "COMMENT_GET",
                 "commentBarrageConfig.accessToken": commentBarrageConfig.accessToken,
@@ -46,6 +51,30 @@ if(GLOBAL_CONFIG.htmlType!='comments') {
             xhr.open("POST", commentBarrageConfig.twikooUrl);
             xhr.setRequestHeader("Content-Type", "application/json");
             xhr.send(data);
+        }
+
+        if(commentBarrageConfig.use=='Artalk'){
+            var data ={
+                "site_name": commentBarrageConfig.siteName,
+                "page_key": commentBarrageConfig.pageUrl,
+                "limit": 100,
+                "offset": 0
+            };
+            var xhr = new XMLHttpRequest();
+            xhr.withCredentials = true;
+            xhr.addEventListener("readystatechange", function () {
+                if (this.readyState === 4) {
+                    commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data.comments);
+                    commentBarrageConfig.dom.innerHTML = '';
+                }
+            });
+            const usp = new URLSearchParams(data)
+            const query = usp.toString()
+            xhr.open("POST", commentBarrageConfig.artalkUrl+'api/get');
+            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
+            xhr.send(query);
+        }
+
 
 
         clearInterval(commentInterval);
@@ -64,13 +93,25 @@ if(GLOBAL_CONFIG.htmlType!='comments') {
     }
 
     function commentLinkFilter(data) {
+        let newData = [];
+        if(commentBarrageConfig.use=='Twikoo'){
             data.sort((a, b) => {
                 return a.created - b.created;
             })
-        let newData = [];
             data.forEach(item => {
                 newData.push(...getCommentReplies(item));
             });
+        }
+        if(commentBarrageConfig.use=='Artalk'){
+            data.sort((a, b) => {
+                const aCreated = Date.parse(a.date);
+                const bCreated = Date.parse(b.date);
+                return aCreated - bCreated;
+            })
+            data.forEach(item => {
+                newData.push(item);
+            });
+        }
         return newData;
     }
 
@@ -87,6 +128,13 @@ if(GLOBAL_CONFIG.htmlType!='comments') {
     }
 
     function popCommentBarrage(data) {
+        let isTwikoo = commentBarrageConfig.use=='Twikoo';
+        let isArtalk = commentBarrageConfig.use=='Artalk';
+        let nick = data.nick;
+        let avatar = isTwikoo ? `https://cravatar.cn/avatar/${data.mailMd5}` : isArtalk ? `https://cravatar.cn/avatar/${data.email_encrypted}?d=mp&s=240` : 'https://cravatar.cn/avatar/';
+        let barrageBlogger = isTwikoo ? data.mailMd5 === commentBarrageConfig.mailMd5 : isArtalk ? data.email_encrypted === commentBarrageConfig.mailMd5 : false;
+        let id = isTwikoo ?  data.id : isArtalk ?  'atk-comment-'+data.id  : 'post-comment';
+        let comment = isTwikoo ? data.comment : isArtalk ? data.content : '';
 
         let barrage = document.createElement('div');
         let width = commentBarrageConfig.dom.clientWidth;
@@ -95,14 +143,14 @@ if(GLOBAL_CONFIG.htmlType!='comments') {
         barrage.innerHTML = `
         <div class="barrageHead">
         <a class="barrageTitle
-        ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "barrageBloggerTitle" : ""}" href="javascript:heo.scrollTo('post-comment')">
-        ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "博主" : "热评"}
+        ${barrageBlogger ? "barrageBloggerTitle" : ""}" href="javascript:heo.scrollTo('post-comment')">
+        ${barrageBlogger ? "博主" : "热评"}
         </a>
-        <div class="barrageNick">${data.nick}</div>
-        <img class="barrageAvatar" src="https://cravatar.cn/avatar/${data.mailMd5}"/>
+        <div class="barrageNick">${nick}</div>
+        <img class="barrageAvatar" src="${avatar}"/>
         <a class="comment-barrage-close" href="javascript:heo.switchCommentBarrage()"><i class="haofont hao-icon-xmark"></i></a>
         </div>
-        <a class="barrageContent" href="javascript:heo.scrollTo('${data.id}');">${data.comment}</a>
+        <a class="barrageContent" href="javascript:heo.scrollTo('${id}');">${comment}</a>
         `
         // 获取hao标签内的所有pre元素
         let haoPres = barrage.querySelectorAll(".barrageContent pre");

templates/comments.html

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

templates/modules/comment.html

@@ -5,6 +5,10 @@
             th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') && not #strings.isEmpty(theme.config.comments.twikoos.envId)}">
         <div th:replace="~{modules/comment/twikoo :: twikoo}"></div>
     </th:block>
+    <th:block
+            th:if="${theme.config.comments.artalkEnable && #strings.equals(theme.config.comments.use, 'Artalk') && not #strings.isEmpty(theme.config.comments.artalks.server)}">
+        <div th:replace="~{modules/comment/artalk :: artalk}"></div>
+    </th:block>
     <!-- 已知问题 PJAX 下，comment 首次请求会出错。当前的临时解决办法是使用 js 重试 -->
     <div id="post-comment"
          th:if="${pluginFinder.available('PluginCommentWidget') && #strings.equals(theme.config.comments.use, 'commentWidget')}">

templates/modules/comment/artalk.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="http://www.thymeleaf.org">
+<!-- 导航栏菜单栏 -->
+<div id="post-comment" th:fragment="artalk">
+    <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>
+    <div id="artalk-wrap"></div>
+</div>
+</html>

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

@@ -0,0 +1,212 @@
+<!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>
+            if (document.querySelector('#post-comment')) {
+                function addArtalkSource() {
+                    const ele = document.createElement('link')
+                    ele.rel = 'stylesheet'
+                    ele.href = `${GLOBAL_CONFIG.source.artalk.css}`
+                    document.getElementsByTagName('head')[0].appendChild(ele)
+                }
+
+                function loadArtalk() {
+                    function 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))
+                    }
+                    function initLightbox() {
+                        window.ATK_LIGHTBOX_CONF = {
+                            groupAll: true,
+                        }
+                    }
+
+                    if (typeof window.artalkItem === 'object') setTimeout(() => { initArtalk() }, 200)
+                    else {
+                        addArtalkSource()
+                        typeof Artalk !== 'function' ? getScript(`${GLOBAL_CONFIG.source.artalk.js}`).then(initArtalk)
+                            : setTimeout(() => { initArtalk() }, 200)
+                    }
+
+                }
+
+                document.getElementById('darkmode').addEventListener('click', () => {
+                    if (typeof window.artalkItem !== 'object') return
+                    let isDark = document.documentElement.getAttribute('data-theme') === 'dark'
+                    window.artalkItem.setDarkMode(!isDark)
+                })
+                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>
+    <!-- 最近评论 -->
+    <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,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en" xmlns:th="http://www.thymeleaf.org">
 
-<th:block th:fragment="cardNewestComments">
+<th:block th:fragment="twikoo">
     <!-- 最近评论 -->
     <script
             th:if="${theme.config.comments.twikooEnable

templates/modules/common/rightside.html

@@ -12,7 +12,7 @@
             <button id="rightside-config" type="button" title="设置"><i class="haofont hao-icon-gear"></i></button>
             <button th:if="${htmlType == 'post'}" class="close" id="mobile-toc-button" type="button" title="目录"><i class="haofont hao-icon-list-ul"></i></button>
             <a id="to_comment" href="javascript:heo.scrollTo('post-comment')" title="直达评论" ><i class="haofont hao-icon-comments"></i></a>
-            <a id="switch-commentBarrage" href="javascript:heo.switchCommentBarrage();" rel="external nofollow noreferrer" title="开关弹幕" draggable="false" data-pjax-state="external"><i class="haofont hao-icon-danmu"></i></a>
+            <a th:if="${theme.config.comments.commentBarrageConfig.commentBarrageEnable}" id="switch-commentBarrage" href="javascript:heo.switchCommentBarrage();" rel="external nofollow noreferrer" title="开关弹幕" draggable="false" data-pjax-state="external"><i class="haofont hao-icon-danmu"></i></a>
             <button id="go-up" type="button" title="回到顶部"><i class="haofont hao-icon-arrow-up"></i></button>
             <a th:if="${htmlType == 'post' || htmlType == 'page'}"
                th:with="editor = ${htmlType == 'post' ? 'posts/editor?name='+ post.metadata.name : htmlType == 'page' ? 'single-pages/editor?name='+ singlePage.metadata.name : '' }"

templates/modules/head.html

@@ -205,13 +205,23 @@
                     js: 'https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.js',
                     css: 'https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/fancybox/3.5.7/jquery.fancybox.min.css'
                 },
+                comments:{
+                    use: [[${theme.config.comments.use}]],
+                    maxBarrage: [[${ theme.config.comments.commentBarrageConfig.maxBarrage }]],
+                    barrageTime: [[${ theme.config.comments.commentBarrageConfig.barrageTime }]],
+                    mailMd5: "[(${theme.config.comments.commentBarrageConfig.mailMd5})]",
+                },
                 twikoo:{
                     js:[[${not #strings.isEmpty(theme.config.comments.twikoos.js) ? theme.config.comments.twikoos.js : assets_link +'/libs/twikoo/twikoo.all.min.js' }]],
-                    maxBarrage: [[${ theme.config.comments.twikoos.maxBarrage }]],
-                    barrageTime: [[${ theme.config.comments.twikoos.barrageTime }]],
                     twikooUrl: "[(${theme.config.comments.twikoos.envId})]",
                     accessToken: "[(${theme.config.comments.twikoos.accessToken})]",
-                    mailMd5: "[(${theme.config.comments.twikoos.mailMd5})]",
+
+                },
+                artalk:{
+                    js:[[${not #strings.isEmpty(theme.config.comments.artalks.js) ? theme.config.comments.artalks.js : 'https://cdn.bootcdn.net/ajax/libs/artalk/2.6.2/Artalk.js' }]],
+                    css:[[${not #strings.isEmpty(theme.config.comments.artalks.css) ? theme.config.comments.artalks.css : 'https://cdn.bootcdn.net/ajax/libs/artalk/2.6.2/Artalk.css' }]],
+                    artalkUrl: "[(${theme.config.comments.artalks.server})]",
+                    siteName: "[(${theme.config.comments.artalks.siteName})]",
                 },
                 welcome:{
                     key:"[(${theme.config.sidebar.welcome.key})]",

templates/modules/layouts/layout.html

@@ -67,8 +67,9 @@
     <!-- 应该是文章页分享使用 -->
     <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:replace="~{modules/widgets/cardNewestComments :: cardNewestComments}"></th:block>
+    <!-- 评论 -->
+    <th:block th:replace="~{modules/comment/newest-comments/artalk :: artalk}"></th:block>
+    <th:block th:replace="~{modules/comment/newest-comments/twikoo :: twikoo}"></th:block>
 
     <!--  https://raphamorim.io/waterfall.js/  应该是这个 还有相关的 js 代码 是否可以调整-->
     <script th:src="${assets_link + '/libs/waterfall/waterfall.min.js'}"></script>
@@ -97,11 +98,14 @@
     <script th:if="${theme.config.tool.rightMenu.rightMenuEnable}" th:src="${assets_link + '/zhheo/rightmenu.js'}"></script>
 
     <!-- 评论弹幕 -->
-    <script  th:if="${theme.config.comments.twikooEnable && #strings.equals(theme.config.comments.use, 'Twikoo') &&
+    <script  th:if="${ ((theme.config.comments.twikooEnable &&
         not #strings.isEmpty(theme.config.comments.twikoos.envId) &&
-        not #strings.isEmpty(theme.config.comments.twikoos.accessToken)}"  data-pjax=""
+        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=""
              th:src="${assets_link + '/zhheo/commentBarrage.js'}"></script>
 
+
     <!-- Tocbot 目录生成 start -->
     <th:block th:replace="~{modules/common/toc-bot :: toc-bot}"></th:block>
 
@@ -229,7 +233,7 @@
     if(document.querySelector('#danmu') &&
         document.body.clientWidth > 768 &&
         [[${theme.config.envelope_comment.enable_danmu}]]){
-        halo.addScript("Danmaku", "[[${assets_link + '/libs/twikoo/easy-Danmaku.min.js'}]]", halo.danmu("[(${theme.config.comments.twikoos.envId})]","[(${theme.config.comments.twikoos.accessToken})]",[[${theme.config.envelope_comment.maxBarrage}]]))
+        halo.addScript("Danmaku", "[[${assets_link + '/libs/twikoo/easy-Danmaku.min.js'}]]", halo.danmu())
     }
 
 </script>

templates/modules/right-menu.html

@@ -102,7 +102,7 @@
                 <i class="haofont hao-icon-copy"></i>
                 <span>复制地址</span>
             </div>
-            <div class="rightMenu-item" id="menu-commentBarrage"
+            <div th:if="${theme.config.comments.commentBarrageConfig.commentBarrageEnable}" class="rightMenu-item" id="menu-commentBarrage"
                  rel="external nofollow noreferrer" draggable="false" style="display: flex;">
                 <i class="haofont hao-icon-message"></i>
                 <span class="menu-commentBarrage-text">关闭热评</span>

templates/modules/widgets/nav-right.html

@@ -40,7 +40,7 @@
          th:with="currentUser = ${contributorFinder.getContributor(#authentication.name)}">
         <span class="site-page nav-login">
             <i sec:authorize="isAnonymous()" class="haofont hao-icon-zhanghao1 " style="font-size: 1rem;font-weight: 700;"></i>
-            <img sec:authorize="isAuthenticated()"  th:src="${currentUser.avatar ?: #theme.assets('/images/none.png')}"
+            <img sec:authorize="isAuthenticated()"  th:src="${currentUser.avatar}"
                  th:alt="${currentUser.displayName}"
                  style=" width: 24px; height: 24px; border-radius: 9999px" />
         </span>

templates/post.html

@@ -82,7 +82,7 @@
                                href="#post-comment"><span id="comment-count"
                                                           th:text="${post.stats.comment}"></span></a>
 
-                            <a th:if="${#strings.equals(theme.config.comments.use, 'Twikoo')}" href="#post-comment">
+                            <a th:if="${#strings.contains('Twikoo,Artalk',theme.config.comments.use)}" href="#post-comment">
                                 <span id="twikoo-count"></span></a>
                         </span>
                         <span  class="post-meta-commentcount" sec:authorize="isAuthenticated()"