github
/
halo-theme-hao
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

优化留言板，评论弹幕

This commit is contained in:
1152958806@qq.com 2023-08-23 11:35:16 +08:00
parent 95025e4b0a
commit 573eca6f71
5 changed files with 181 additions and 173 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
templates/assets/js/halo.js
View File

@ -314,32 +314,7 @@ let halo = {
))
}
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>"
},
//关闭留言板评论弹幕
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)
}
}
},
}
}

20
templates/assets/js/heo.js
View File

@ -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)
}
))
}
},
//隐藏侧边栏

296
templates/assets/libs/twikoo/commentBarrage.js
View File

@ -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 = `
<div class="barrageHead">
<a class="barrageTitle
${data.mailMd5 === commentBarrageConfig.mailMd5 ? "barrageBloggerTitle" : ""}" href="#post-comment">
${data.mailMd5 === commentBarrageConfig.mailMd5 ? "barrageBloggerTitle" : ""}" href="javascript:heo.scrollTo('post-comment')">
${data.mailMd5 === commentBarrageConfig.mailMd5 ? "博主" : "热评"}
</a>
<div class="barrageNick">${data.nick}</div>
<img class="barrageAvatar" src="https://cravatar.cn/avatar/${data.mailMd5}"/>
<a class="comment-barrage-close" href="javascript:heo.switchCommentBarrage()"><i class="haofont hao-icon-xmark"></i></a>
</div>
<a class="barrageContent" href="#${data.id}">${data.comment}</a>
<a class="barrageContent" href="javascript:heo.scrollTo('${data.id}');">${data.comment}</a>
`
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);
});
}
document.addEventListener('pjax:send', function () {
clearInterval(commentInterval);
});

8
templates/comments.html
View File

@ -1,6 +1,6 @@
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = ${singlePage.spec.title + ' | ' + site.title})}">
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'comments',title = ${singlePage.spec.title + ' | ' + site.title})}">
<th:block th:fragment="content">
@ -155,12 +155,8 @@
#strings.equals(theme.config.comments.use, 'Twikoo') &&
theme.config.envelope_comment.enable_danmu }">
<div id="danmuBtn">
<button class="hideBtn"
onclick="document.getElementById('danmu').classList.remove('hidedanmu')">显示弹幕</button>
<button class="hideBtn"
onclick="document.getElementById('danmu').classList.add('hidedanmu')">隐藏弹幕</button>
</div>
</div>
<div id="danmu">
</div>

1
templates/modules/layouts/layout.html
View File

@ -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}]]))
}