8.9 全部功能写完了
This commit is contained in:
小赵同学 committed
1 parent
acde3e57aa
commit
64c3e260d4
203 files changed
+1491
-3509
No files matched your search
@@ -44,94 +44,105 @@ lazyLoadInit({
|
||||
showTime: 1100
|
||||
});
|
||||
|
||||
|
||||
async function fetchCommentsAndCreateBarrager(path, options) {
|
||||
async function loadBarrager() {
|
||||
try {
|
||||
const response = await fetch('https://waline.usj.cc/api/comment?path=' + encodeURIComponent(path));
|
||||
const data = await response.json();
|
||||
|
||||
if (!data.data || !data.data.data) {
|
||||
console.error('评论数据获取失败');
|
||||
return;
|
||||
}
|
||||
|
||||
const commentsData = data.data.data;
|
||||
const looperTime = options.looper_time || 3000;
|
||||
const flattenedComments = flattenComments(commentsData);
|
||||
const totalComments = flattenedComments.length;
|
||||
let currentIndex = 0;
|
||||
|
||||
// 初始化弹幕插件
|
||||
let barrage = new Barrage.default({
|
||||
el: 'body',
|
||||
backColor:"#000000b5",
|
||||
fontSize:"14px",
|
||||
isLeft:true,
|
||||
speed:0,
|
||||
height:"33px"
|
||||
});
|
||||
|
||||
if (totalComments !== 0) {
|
||||
createBarrager();
|
||||
}
|
||||
|
||||
function createBarrager() {
|
||||
const currentComment = flattenedComments[currentIndex];
|
||||
const barragerItem = {
|
||||
headImg: currentComment.avatar + "?s=33" || options.defaultAvatar,
|
||||
content: stripHTML(currentComment.orig) || options.defaultInfo,
|
||||
href: currentComment.link || options.defaultLink,
|
||||
speed: options.speed || 10
|
||||
};
|
||||
|
||||
// 发送弹幕
|
||||
barrage.start(barragerItem.content, {
|
||||
speed: barragerItem.speed,
|
||||
headImg: barragerItem.headImg,
|
||||
speed:35
|
||||
});
|
||||
|
||||
currentIndex++;
|
||||
|
||||
if (currentIndex < totalComments) {
|
||||
setTimeout(createBarrager, looperTime);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function stripHTML(html) {
|
||||
return html.replace(/<\/?[^>]+(>|$)/g, "");
|
||||
}
|
||||
|
||||
function flattenComments(comments) {
|
||||
let result = [];
|
||||
comments.forEach(function(comment) {
|
||||
result.push(comment);
|
||||
if (comment.children && comment.children.length > 0) {
|
||||
result = result.concat(flattenComments(comment.children));
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
const commentsData = await initArtalkAndGetComments();
|
||||
if (commentsData) {
|
||||
await createBarragerFromArtalk(commentsData);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('无法获取评论数据', error);
|
||||
console.error('加载弹幕时发生错误:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 弹幕函数
|
||||
function loadBarrager() {
|
||||
// 获取当前页面的路径
|
||||
var currentPath = "{{ .RelPermalink }}";
|
||||
// 异步初始化 Artalk 并获取评论数据
|
||||
function initArtalkAndGetComments() {
|
||||
return new Promise((resolve, reject) => {
|
||||
Artalk.use((ctx) => {
|
||||
ctx.on('list-loaded', () => {
|
||||
console.log('评论列表加载完毕');
|
||||
const commentsData = ctx.getComments();
|
||||
if (commentsData) {
|
||||
resolve(commentsData);
|
||||
// console.log(commentsData);
|
||||
} else {
|
||||
reject('获取评论数据失败');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// 只有当 URL 包含 "post" 时才执行弹幕加载逻辑
|
||||
if (currentPath.includes("post") || currentPath.includes("says")) {
|
||||
// 调用封装的函数
|
||||
fetchCommentsAndCreateBarrager(currentPath, {
|
||||
looper_time: 3000, // 每条弹幕的发送间隔，单位毫秒
|
||||
defaultAvatar: 'static/default-avatar.png', // 默认头像
|
||||
defaultInfo: 'No comment', // 默认评论内容
|
||||
defaultLink: '#', // 默认用户链接
|
||||
speed: 10, // 弹幕速度，单位秒
|
||||
});
|
||||
Artalk.init({
|
||||
el: '#Comments', // 绑定元素的 Selector
|
||||
server: 'https://artalk.5b2.cn', // 后端地址
|
||||
site: '优世界', // 你的站点名
|
||||
flatMode: true
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
// 异步创建弹幕
|
||||
async function createBarragerFromArtalk(commentsData) {
|
||||
const looperTime = 1000; // 每条弹幕的发送间隔，单位毫秒
|
||||
const flattenedComments = flattenComments(commentsData);
|
||||
const totalComments = flattenedComments.length;
|
||||
let currentIndex = 0;
|
||||
|
||||
// 初始化弹幕插件
|
||||
let barrage = new Barrage.default({
|
||||
el: 'body',
|
||||
backColor: "#000000b5",
|
||||
fontSize: "14px",
|
||||
isLeft: true,
|
||||
speed: 0,
|
||||
height: "33px"
|
||||
});
|
||||
|
||||
if (totalComments !== 0) {
|
||||
while (currentIndex < totalComments) {
|
||||
const currentComment = flattenedComments[currentIndex];
|
||||
const barragerItem = {
|
||||
headImg: "https://cravatar.cn/avatar/"+currentComment.email_encrypted + "?s=33" || 'static/default-avatar.png',
|
||||
content: stripHTML(currentComment.content_marked) || 'No comment',
|
||||
href: currentComment.link || '#',
|
||||
speed: 10
|
||||
};
|
||||
|
||||
// 发送弹幕
|
||||
barrage.start(barragerItem.content, {
|
||||
speed: barragerItem.speed,
|
||||
headImg: barragerItem.headImg,
|
||||
speed: 35
|
||||
});
|
||||
|
||||
currentIndex++;
|
||||
await delay(looperTime); // 等待指定的时间再发送下一条弹幕
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 延迟函数，返回一个 Promise，用于等待指定的毫秒数
|
||||
function delay(ms) {
|
||||
return new Promise(resolve => setTimeout(resolve, ms));
|
||||
}
|
||||
|
||||
// 去除 HTML 标签的函数
|
||||
function stripHTML(html) {
|
||||
return html.replace(/<\/?[^>]+(>|$)/g, "");
|
||||
}
|
||||
|
||||
// 展平评论数据结构的函数
|
||||
function flattenComments(comments) {
|
||||
let result = [];
|
||||
comments.forEach(function (comment) {
|
||||
result.push(comment);
|
||||
if (comment.children && comment.children.length > 0) {
|
||||
result = result.concat(flattenComments(comment.children));
|
||||
}
|
||||
});
|
||||
return result;
|
||||
}
|
||||
|
||||
// 调用异步的弹幕加载函数
|
||||
if (document.querySelector("#Comments") && !isMobile()) {
|
||||
loadBarrager()
|
||||
}
|
||||
Reference in new issue
Block a user