From 9566b55e522b8de0a13a68128e1a9560f8da117f Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <1152958806@qq.com> Date: Sat, 16 Sep 2023 20:38:55 +0800 Subject: [PATCH 1/2] =?UTF-8?q?=E9=80=82=E9=85=8DArtalk=E8=AF=84=E8=AE=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- settings.yaml | 126 ++++++++--- templates/assets/js/halo.js | 78 +++++-- templates/assets/zhheo/blogex.js | 3 +- templates/assets/zhheo/commentBarrage.js | 110 ++++++--- templates/comments.html | 4 +- templates/modules/comment.html | 4 + templates/modules/comment/artalk.html | 14 ++ .../comment/newest-comments/artalk.html | 212 ++++++++++++++++++ .../newest-comments/twikoo.html} | 2 +- templates/modules/common/rightside.html | 2 +- templates/modules/head.html | 16 +- templates/modules/layouts/layout.html | 14 +- templates/modules/right-menu.html | 2 +- templates/modules/widgets/nav-right.html | 2 +- templates/post.html | 2 +- 15 files changed, 495 insertions(+), 96 deletions(-) create mode 100644 templates/modules/comment/artalk.html create mode 100644 templates/modules/comment/newest-comments/artalk.html rename templates/modules/{widgets/cardNewestComments.html => comment/newest-comments/twikoo.html} (99%) diff --git a/settings.yaml b/settings.yaml index f105178f..ee7f38aa 100644 --- a/settings.yaml +++ b/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: 样式 diff --git a/templates/assets/js/halo.js b/templates/assets/js/halo.js index 138ae7be..eb2e7f7c 100644 --- a/templates/assets/js/halo.js +++ b/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,32 +273,64 @@ let halo = { function a(e) { return e = (e = (e = (e = (e = e.replace(/<\/*br>|[\s\uFEFF\xA0]+/g, "")).replace(//g, "[图片]")).replace(/.*?<\/a>/g, "[链接]")).replace(/.*?<\/pre>/g, "[代码块]")).replace(/<.*?>/g, "") } - fetch(url, { - method: "POST", - body: JSON.stringify({ - event: "GET_RECENT_COMMENTS", - accessToken: token, - includeReply: !1, - pageSize: maxBarrage - }), - headers: { - "Content-Type": "application/json" + if(GLOBAL_CONFIG.source.comments.use == 'Twikoo'){ + fetch(GLOBAL_CONFIG.source.twikoo.twikooUrl, { + method: "POST", + body: JSON.stringify({ + event: "GET_RECENT_COMMENTS", + accessToken: GLOBAL_CONFIG.source.twikoo.accessToken, + includeReply: !1, + pageSize: 5 + }), + headers: { + "Content-Type": "application/json" + } + }).then((e=>e.json())).then((({data: t})=>{ + t.forEach((e=>{ + null == e.avatar && (e.avatar = "https://cravatar.cn/avatar/d615d5793929e8c7d70eab5f00f7f5f1?d=mp"), + n.push({ + avatar: e.avatar, + content: e.nick + "：" + a(e.comment), + href: e.url + '#' + e.id + + }) + } + )), + e.batchSend(n, !0), + saveToLocal.set("danmu", n, .02) + } + )) + } + 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' + }) } - }).then((e=>e.json())).then((({data: t})=>{ - t.forEach((e=>{ - null == e.avatar && (e.avatar = "https://cravatar.cn/avatar/d615d5793929e8c7d70eab5f00f7f5f1?d=mp"), + fetch(GLOBAL_CONFIG.source.artalk.artalkUrl + 'api/stat', statheaderList) + .then((e=>e.json())).then((({data: t})=>{ + t.forEach((e=>{ n.push({ - avatar: e.avatar, - content: e.nick + "：" + a(e.comment), - href: e.url + '#' + e.id + 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) - } - )) + } + )), + e.batchSend(n, !0), + saveToLocal.set("danmu", n, .02) + } + )) + } + } document.getElementById("danmuBtn").innerHTML = " " }, diff --git a/templates/assets/zhheo/blogex.js b/templates/assets/zhheo/blogex.js index 024f1738..98185397 100644 --- a/templates/assets/zhheo/blogex.js +++ b/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> ') diff --git a/templates/assets/zhheo/commentBarrage.js b/templates/assets/zhheo/commentBarrage.js index 8dd327c0..0e8f1be2 100644 --- a/templates/assets/zhheo/commentBarrage.js +++ b/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,22 +34,47 @@ if(GLOBAL_CONFIG.htmlType!='comments') { function initCommentBarrage() { //console.log("开始创建热评") - var data = JSON.stringify({ - "event": "COMMENT_GET", - "commentBarrageConfig.accessToken": commentBarrageConfig.accessToken, - "url": commentBarrageConfig.pageUrl - }); - var xhr = new XMLHttpRequest(); - xhr.withCredentials = true; - xhr.addEventListener("readystatechange", function () { - if (this.readyState === 4) { - commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data); - commentBarrageConfig.dom.innerHTML = ''; - } - }); - xhr.open("POST", commentBarrageConfig.twikooUrl); - xhr.setRequestHeader("Content-Type", "application/json"); - xhr.send(data); + if(commentBarrageConfig.use=='Twikoo'){ + var data = JSON.stringify({ + "event": "COMMENT_GET", + "commentBarrageConfig.accessToken": commentBarrageConfig.accessToken, + "url": commentBarrageConfig.pageUrl + }); + var xhr = new XMLHttpRequest(); + xhr.withCredentials = true; + xhr.addEventListener("readystatechange", function () { + if (this.readyState === 4) { + commentBarrageConfig.barrageList = commentLinkFilter(JSON.parse(this.responseText).data); + commentBarrageConfig.dom.innerHTML = ''; + } + }); + 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) { - data.sort((a, b) => { - return a.created - b.created; - }) let newData = []; - data.forEach(item => { - newData.push(...getCommentReplies(item)); - }); + if(commentBarrageConfig.use=='Twikoo'){ + data.sort((a, b) => { + return a.created - b.created; + }) + 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 = `
- ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "博主" : "热评"} + ${barrageBlogger ? "barrageBloggerTitle" : ""}" href="javascript:heo.scrollTo('post-comment')"> + ${barrageBlogger ? "博主" : "热评"} -
${data.nick}
- +
${nick}
+
- ${data.comment} + ${comment} ` // 获取hao标签内的所有pre元素 let haoPres = barrage.querySelectorAll(".barrageContent pre"); diff --git a/templates/comments.html b/templates/comments.html index c70a143e..7e1b1780 100644 --- a/templates/comments.html +++ b/templates/comments.html @@ -151,8 +151,8 @@ -
diff --git a/templates/modules/comment.html b/templates/modules/comment.html index 5d051cf7..6f878142 100644 --- a/templates/modules/comment.html +++ b/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)}">
+ +
+
diff --git a/templates/modules/comment/artalk.html b/templates/modules/comment/artalk.html new file mode 100644 index 00000000..d14e5c0e --- /dev/null +++ b/templates/modules/comment/artalk.html @@ -0,0 +1,14 @@ + + + +
+
+
评论
+
隐私政策
+
+ 你无需删除空行，直接评论以获取最佳展示效果 +
+
+
+
+ \ No newline at end of file diff --git a/templates/modules/comment/newest-comments/artalk.html b/templates/modules/comment/newest-comments/artalk.html new file mode 100644 index 00000000..b53f09d5 --- /dev/null +++ b/templates/modules/comment/newest-comments/artalk.html @@ -0,0 +1,212 @@ + + + + +
+ + +
+ + + + + + \ No newline at end of file diff --git a/templates/modules/widgets/cardNewestComments.html b/templates/modules/comment/newest-comments/twikoo.html similarity index 99% rename from templates/modules/widgets/cardNewestComments.html rename to templates/modules/comment/newest-comments/twikoo.html index 5bcf79ac..74b891b5 100644 --- a/templates/modules/widgets/cardNewestComments.html +++ b/templates/modules/comment/newest-comments/twikoo.html @@ -1,7 +1,7 @@ - + - - + + + @@ -97,11 +98,14 @@ - + @@ -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()) } diff --git a/templates/modules/right-menu.html b/templates/modules/right-menu.html index c3525064..cc61584c 100644 --- a/templates/modules/right-menu.html +++ b/templates/modules/right-menu.html @@ -102,7 +102,7 @@ 复制地址
- -
diff --git a/templates/modules/comment.html b/templates/modules/comment.html index 6f878142..5283ea07 100644 --- a/templates/modules/comment.html +++ b/templates/modules/comment.html @@ -1,13 +1,9 @@ - -
- - -
+ +
-
+
评论
隐私政策
diff --git a/templates/modules/comment/newest-comments/artalk.html b/templates/modules/comment/newest-comments/artalk.html index b53f09d5..d2ac391a 100644 --- a/templates/modules/comment/newest-comments/artalk.html +++ b/templates/modules/comment/newest-comments/artalk.html @@ -6,45 +6,54 @@ && not #strings.isEmpty(theme.config.comments.artalks.server)}">
diff --git a/templates/modules/comment/newest-comments/twikoo.html b/templates/modules/comment/newest-comments/twikoo.html index 74b891b5..840c4201 100644 --- a/templates/modules/comment/newest-comments/twikoo.html +++ b/templates/modules/comment/newest-comments/twikoo.html @@ -1,12 +1,11 @@ - + - +
+ + + \ No newline at end of file diff --git a/templates/modules/comment/twikoo.html b/templates/modules/comment/twikoo.html index 21d2731d..56a4b448 100644 --- a/templates/modules/comment/twikoo.html +++ b/templates/modules/comment/twikoo.html @@ -1,7 +1,9 @@ -
+
评论
隐私政策
diff --git a/templates/modules/comment/waline.html b/templates/modules/comment/waline.html new file mode 100644 index 00000000..2fe02765 --- /dev/null +++ b/templates/modules/comment/waline.html @@ -0,0 +1,16 @@ + + + +
+
+
评论
+
隐私政策
+
+ 你无需删除空行，直接评论以获取最佳展示效果 +
+
+
+
+ \ No newline at end of file diff --git a/templates/modules/head.html b/templates/modules/head.html index 673ac36d..29311ce5 100644 --- a/templates/modules/head.html +++ b/templates/modules/head.html @@ -93,6 +93,21 @@ document.head.appendChild(script) }) + win.getCSS = (url,id = false) => new Promise((resolve, reject) => { + const link = document.createElement('link') + link.rel = 'stylesheet' + link.href = url + if (id) link.id = id + link.onerror = reject + link.onload = link.onreadystatechange = function() { + const loadState = this.readyState + if (loadState && loadState !== 'loaded' && loadState !== 'complete') return + link.onload = link.onreadystatechange = null + resolve() + } + document.head.appendChild(link) + }) + win.activateDarkMode = function () { document.documentElement.setAttribute('data-theme', 'dark') heo.initThemeColor() @@ -218,11 +233,16 @@ }, 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' }]], + js:[[${not #strings.isEmpty(theme.config.comments.artalks.artalkJs) ? theme.config.comments.artalks.artalkJs : 'https://cdn.bootcdn.net/ajax/libs/artalk/2.6.2/Artalk.js' }]], + css:[[${not #strings.isEmpty(theme.config.comments.artalks.artalkCss) ? theme.config.comments.artalks.artalkCss : 'https://cdn.bootcdn.net/ajax/libs/artalk/2.6.2/Artalk.css' }]], artalkUrl: "[(${theme.config.comments.artalks.server})]", siteName: "[(${theme.config.comments.artalks.siteName})]", }, + 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:{ key:"[(${theme.config.sidebar.welcome.key})]", locationLng: [[${theme.config.sidebar.welcome.locationLng}]], diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html index 34e59f56..1b8d5973 100644 --- a/templates/modules/layouts/layout.html +++ b/templates/modules/layouts/layout.html @@ -68,8 +68,10 @@ - - + + + diff --git a/templates/modules/sidebar.html b/templates/modules/sidebar.html index ca33b10b..7486e4ef 100644 --- a/templates/modules/sidebar.html +++ b/templates/modules/sidebar.html @@ -8,7 +8,7 @@