From 573eca6f718bba488063d270c71b7de290114f16 Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <17683872107czx> Date: Wed, 23 Aug 2023 11:35:16 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E7=95=99=E8=A8=80=E6=9D=BF?= =?UTF-8?q?=EF=BC=8C=E8=AF=84=E8=AE=BA=E5=BC=B9=E5=B9=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/assets/js/halo.js | 27 +- templates/assets/js/heo.js | 20 +- .../assets/libs/twikoo/commentBarrage.js | 298 ++++++++++-------- templates/comments.html | 8 +- templates/modules/layouts/layout.html | 1 - 5 files changed, 181 insertions(+), 173 deletions(-) diff --git a/templates/assets/js/halo.js b/templates/assets/js/halo.js index acc24984..05cddf7b 100644 --- a/templates/assets/js/halo.js +++ b/templates/assets/js/halo.js @@ -314,32 +314,7 @@ let halo = { )) } document.getElementById("danmuBtn").innerHTML = " " - }, - //关闭留言板评论弹幕 - closeCommentBarrage: function () { - let commentBarrage = document.querySelector('.comment-barrage'); - if (commentBarrage) { - if ($(".comment-barrage").is(":visible")) { - $(".comment-barrage").hide(); - $(".menu-commentBarrage-text").text("显示热评"); - document.querySelector("#consoleCommentBarrage").classList.remove("on"); - localStorage.setItem('commentBarrageSwitch', 'false'); - } - } - }, - //打开评论弹幕 - openCommentBarrage: function () { - let commentBarrage = document.querySelector('.comment-barrage'); - if (commentBarrage) { - if ($(".comment-barrage").is(":hidden")) { - $(".comment-barrage").show(); - $(".menu-commentBarrage-text").text("关闭热评"); - document.querySelector("#consoleCommentBarrage").classList.add("on"); - localStorage.removeItem('commentBarrageSwitch'); - btf.snackbarShow("✨ 已开启评论弹幕", false, 2000) - } - } - }, + } } \ No newline at end of file diff --git a/templates/assets/js/heo.js b/templates/assets/js/heo.js index e965b56b..ab3e6c40 100644 --- a/templates/assets/js/heo.js +++ b/templates/assets/js/heo.js @@ -391,9 +391,23 @@ var heo = { }, //滚动到指定id - scrollTo: function (id) { - var domTop = document.querySelector(id).offsetTop; - window.scrollTo(0, domTop - 80); + scrollTo: function(e) { + const t = document.getElementById(e); + if (t) { + const e = t.getBoundingClientRect().top + window.pageYOffset - 80 + , o = window.pageYOffset + , n = e - o; + let a = null; + window.requestAnimationFrame((function e(t) { + a || (a = t); + const l = t - a + , i = (c = Math.min(l / 0, 1)) < .5 ? 2 * c * c : (4 - 2 * c) * c - 1; + var c; + window.scrollTo(0, o + n * i), + l < 600 && window.requestAnimationFrame(e) + } + )) + } }, //隐藏侧边栏 diff --git a/templates/assets/libs/twikoo/commentBarrage.js b/templates/assets/libs/twikoo/commentBarrage.js index d0ded861..a2a5eadd 100644 --- a/templates/assets/libs/twikoo/commentBarrage.js +++ b/templates/assets/libs/twikoo/commentBarrage.js @@ -1,158 +1,182 @@ -var commentBarrageConfig = { - //同时最多显示弹幕数 - maxBarrage: GLOBAL_CONFIG.source.twikoo.maxBarrage, - //弹幕显示间隔时间ms - barrageTime: GLOBAL_CONFIG.source.twikoo.barrageTime, - //twikoo部署地址腾讯云的为环境ID - twikooUrl: GLOBAL_CONFIG.source.twikoo.twikooUrl, - //token获取见上方 - accessToken: GLOBAL_CONFIG.source.twikoo.accessToken, - mailMd5: GLOBAL_CONFIG.source.twikoo.mailMd5, - pageUrl: window.location.pathname, - barrageTimer: [], - barrageList: [], - barrageIndex: 0, - dom: document.querySelector('.comment-barrage'), -} - -var commentInterval = null; -var hoverOnCommentBarrage = false; - -$(".comment-barrage").hover(function () { - hoverOnCommentBarrage = true; - //console.log("热评悬浮"); -}, function () { - hoverOnCommentBarrage = false; - //console.log("停止悬浮"); -}); - -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); - - - clearInterval(commentInterval); - commentInterval = null; - - commentInterval = setInterval(() => { - if (commentBarrageConfig.barrageList.length && !hoverOnCommentBarrage) { - popCommentBarrage(commentBarrageConfig.barrageList[commentBarrageConfig.barrageIndex]); - commentBarrageConfig.barrageIndex += 1; - commentBarrageConfig.barrageIndex %= commentBarrageConfig.barrageList.length; - } - if ((commentBarrageConfig.barrageTimer.length > (commentBarrageConfig.barrageList.length > commentBarrageConfig.maxBarrage ? commentBarrageConfig.maxBarrage : commentBarrageConfig.barrageList.length)) && !hoverOnCommentBarrage) { - removeCommentBarrage(commentBarrageConfig.barrageTimer.shift()) - } - }, commentBarrageConfig.barrageTime) -} - -function commentLinkFilter(data) { - data.sort((a, b) => { - return a.created - b.created; - }) - let newData = []; - data.forEach(item => { - newData.push(...getCommentReplies(item)); - }); - return newData; -} - -function getCommentReplies(item) { - if (item.replies) { - let replies = [item]; - item.replies.forEach(item => { - replies.push(...getCommentReplies(item)); - }) - return replies; - } else { - return []; +if(GLOBAL_CONFIG.htmlType!='comments') { + var commentBarrageConfig = { + //同时最多显示弹幕数 + maxBarrage: GLOBAL_CONFIG.source.twikoo.maxBarrage, + //弹幕显示间隔时间ms + barrageTime: GLOBAL_CONFIG.source.twikoo.barrageTime, + //twikoo部署地址腾讯云的为环境ID + twikooUrl: GLOBAL_CONFIG.source.twikoo.twikooUrl, + //token获取见上方 + accessToken: GLOBAL_CONFIG.source.twikoo.accessToken, + mailMd5: GLOBAL_CONFIG.source.twikoo.mailMd5, + pageUrl: window.location.pathname, + barrageTimer: [], + barrageList: [], + barrageIndex: 0, + dom: document.querySelector('.comment-barrage'), } -} -function popCommentBarrage(data) { + var commentInterval = null; + var hoverOnCommentBarrage = false; - let barrage = document.createElement('div'); - let width = commentBarrageConfig.dom.clientWidth; - let height = commentBarrageConfig.dom.clientHeight; - barrage.className = 'comment-barrage-item' - barrage.innerHTML = ` + $(".comment-barrage").hover(function () { + hoverOnCommentBarrage = true; + //console.log("热评悬浮"); + }, function () { + hoverOnCommentBarrage = false; + //console.log("停止悬浮"); + }); + + 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); + + + clearInterval(commentInterval); + commentInterval = null; + + commentInterval = setInterval(() => { + if (commentBarrageConfig.barrageList.length && !hoverOnCommentBarrage) { + popCommentBarrage(commentBarrageConfig.barrageList[commentBarrageConfig.barrageIndex]); + commentBarrageConfig.barrageIndex += 1; + commentBarrageConfig.barrageIndex %= commentBarrageConfig.barrageList.length; + } + if ((commentBarrageConfig.barrageTimer.length > (commentBarrageConfig.barrageList.length > commentBarrageConfig.maxBarrage ? commentBarrageConfig.maxBarrage : commentBarrageConfig.barrageList.length)) && !hoverOnCommentBarrage) { + removeCommentBarrage(commentBarrageConfig.barrageTimer.shift()) + } + }, commentBarrageConfig.barrageTime) + } + + function commentLinkFilter(data) { + data.sort((a, b) => { + return a.created - b.created; + }) + let newData = []; + data.forEach(item => { + newData.push(...getCommentReplies(item)); + }); + return newData; + } + + function getCommentReplies(item) { + if (item.replies) { + let replies = [item]; + item.replies.forEach(item => { + replies.push(...getCommentReplies(item)); + }) + return replies; + } else { + return []; + } + } + + function popCommentBarrage(data) { + + let barrage = document.createElement('div'); + let width = commentBarrageConfig.dom.clientWidth; + let height = commentBarrageConfig.dom.clientHeight; + barrage.className = 'comment-barrage-item' + barrage.innerHTML = `
+ ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "barrageBloggerTitle" : ""}" href="javascript:heo.scrollTo('post-comment')"> ${data.mailMd5 === commentBarrageConfig.mailMd5 ? "博主" : "热评"}
${data.nick}
- ${data.comment} + ${data.comment} ` - commentBarrageConfig.barrageTimer.push(barrage); - commentBarrageConfig.dom.append(barrage); -} + // 获取hao标签内的所有pre元素 + let haoPres = barrage.querySelectorAll(".barrageContent pre"); -function removeCommentBarrage(barrage) { - barrage.className = 'comment-barrage-item out'; - setTimeout(() => { - commentBarrageConfig.dom.removeChild(barrage); - }, 1000) -} + // 遍历每个pre元素，将其替换为"【代码】" + haoPres.forEach((pre) => { + let codePlaceholder = document.createElement("span"); + codePlaceholder.innerText = "【代码】"; + pre.parentNode.replaceChild(codePlaceholder, pre); + }); + + // 获取hao标签内的所有图片元素 + let haoImages = barrage.querySelectorAll(".barrageContent img"); + + // 遍历每个图片元素，将其替换为"【图片】"，但排除带有class=tk-owo-emotion的图片 + haoImages.forEach((image) => { + if (!image.classList.contains("tk-owo-emotion")) { + image.style.display = "none"; // 隐藏图片 + let placeholder = document.createElement("span"); + placeholder.innerText = "【图片】"; + image.parentNode.replaceChild(placeholder, image); + } + }); + commentBarrageConfig.barrageTimer.push(barrage); + commentBarrageConfig.dom.append(barrage); + } + + function removeCommentBarrage(barrage) { + barrage.className = 'comment-barrage-item out'; + setTimeout(() => { + commentBarrageConfig.dom.removeChild(barrage); + }, 1000) + } // 自动隐藏 -document.addEventListener('scroll', btf.throttle(function () { - //滚动条高度+视窗高度 = 可见区域底部高度 - var visibleBottom = window.scrollY + document.documentElement.clientHeight; - //可见区域顶部高度 - var visibleTop = window.scrollY; - // 获取翻页按钮容器 - var pagination = document.querySelector('.comment-barrage'); - // 获取位置监测容器，此处采用评论区 - var eventlistner = document.getElementById('post-comment'); - if (eventlistner && pagination) { - var centerY = eventlistner.offsetTop + (eventlistner.offsetHeight / 2); - if (document.body.clientWidth > 768) { - if (centerY > visibleBottom) { - pagination.style.bottom = '0'; - } else { - pagination.style.bottom = '-200px'; + document.addEventListener('scroll', btf.throttle(function () { + //滚动条高度+视窗高度 = 可见区域底部高度 + var visibleBottom = window.scrollY + document.documentElement.clientHeight; + //可见区域顶部高度 + var visibleTop = window.scrollY; + // 获取翻页按钮容器 + var pagination = document.querySelector('.comment-barrage'); + // 获取位置监测容器，此处采用评论区 + var eventlistner = document.getElementById('post-comment'); + if (eventlistner && pagination) { + var centerY = eventlistner.offsetTop + 200; + if (document.body.clientWidth > 768) { + if (centerY > visibleBottom) { + pagination.style.bottom = '0'; + } else { + pagination.style.bottom = '-200px'; + } } } + }, 200)) + + initCommentBarrage(); + + if (localStorage.getItem('commentBarrageSwitch') !== 'false') { + $(".comment-barrage").show(); + $(".menu-commentBarrage-text").text("关闭热评"); + document.querySelector("#consoleCommentBarrage").classList.add("on"); + + } else { + $(".comment-barrage").hide(); + $(".menu-commentBarrage-text").text("显示热评"); + document.querySelector("#consoleCommentBarrage").classList.remove("on"); + + } -}, 200)) - -initCommentBarrage(); - -if (localStorage.getItem('commentBarrageSwitch') !== 'false') { - $(".comment-barrage").show(); - $(".menu-commentBarrage-text").text("关闭热评"); - document.querySelector("#consoleCommentBarrage").classList.add("on"); - -} else { - $(".comment-barrage").hide(); - $(".menu-commentBarrage-text").text("显示热评"); - document.querySelector("#consoleCommentBarrage").classList.remove("on"); -} - - -document.addEventListener('pjax:send', function () { - clearInterval(commentInterval); -}); \ No newline at end of file + document.addEventListener('pjax:send', function () { + clearInterval(commentInterval); + }); +} \ No newline at end of file diff --git a/templates/comments.html b/templates/comments.html index 2c3ea39c..c70a143e 100644 --- a/templates/comments.html +++ b/templates/comments.html @@ -1,6 +1,6 @@ + th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'comments',title = ${singlePage.spec.title + ' | ' + site.title})}"> @@ -155,12 +155,8 @@ #strings.equals(theme.config.comments.use, 'Twikoo') && theme.config.envelope_comment.enable_danmu }">
- - -
+
diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html index 697b35f3..0f95b49f 100644 --- a/templates/modules/layouts/layout.html +++ b/templates/modules/layouts/layout.html @@ -234,7 +234,6 @@ if(document.querySelector('#danmu') && document.body.clientWidth > 768 && [[${theme.config.envelope_comment.enable_danmu}]]){ - halo.closeCommentBarrage(); 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}]])) }