懒得打字了,直接开始教程

参考项目地址:https://github.com/pprory/easyDanmaku
一些参数可以参考此处进行配置

适用twikoo,其他评论自行移植,应该都是一样的原理。

代码中引入的js是我进行修改过的,如果直接使用原项目的js会出现鼠标移到文字上无法暂停的BUG

获取数据

打开留言板页面 > 打开控制台 > 网络 > fetch/xhr,然后刷新一下,往下滑动页面,直到评论加载成功。
总共有两个fetch,点击负载找到有三个值的复制下来,顺便把请求地址复制下来,也就是那个xxx.vercel.app
获取需要的数据

添加代码

更新了一点小bug,建议修改。

打开留言版的md文件,粘贴如下代码并替换数据(已注释位置)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<script src="https://cdn.jsdelivr.net/gh/Lea321/cdn@main/js/easy-Danmaku.min.js"></script>
<style>
#container {
width: 100%;
height: 300px;
border-radius: 8px !important;
background: url(https://tva3.sinaimg.cn//large//0080xEK2ly1gc59rycydvj308c08cq2r.jpg);
}
[data-theme='dark'] #container {
background: url(https://tva3.sinaimg.cn//large//0080xEK2ly1gbo0qoxrl7j30b40b4742.jpg);
}
.newDanmaku,
.default-style {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
font-size: 1.3rem;
border-radius: 100px;
background-color: rgba(24, 24, 30, 0.1);
padding: 8px 20px;
}
[data-theme='dark'] .default-style {
color: var(--leonus-blue) !important;
}
.default-style img {
height: 30px;
width: 30px;
margin: 0 10px 0 0 !important;
border-radius: 50%;
}
.newDanmaku,
.default-style p {
line-height: 1;
margin: 0 !important;
}
.center-danmaku {
color: var(--leonus-blue);
font-size: 1.2rem;
width: 100%;
text-align: center;
}
.newDanmaku {
border: 1px solid var(--leonus-blue);
}
</style>

markdown内容可在此处书写。

<div id="container"><img src="/img/imgloading.gif" alt="加载中..."></div>


<script>
const Danmaku = new EasyDanmaku({
el: '#container', //弹幕挂载节点
wrapperStyle: 'demo',
line: 5, //弹幕行数
speed: 8, //弹幕播放速度
colourful: true, //彩色弹幕
// runtime: 1, //播放一次的时常
loop: true, //开启循环播放
hover: true, //鼠标移入悬停
})

let ls = []

// 评论弹幕
fetch('https://twikoo-snowy-three.vercel.app/', {
method: "POST",
body: JSON.stringify({
"event": "COMMENT_GET",
"accessToken": "b22ee6f501b34007b97438588963d41d",
"url": "/message/"
}),
headers: { 'Content-Type': 'application/json' }
}).then(res => res.json()).then(data => {
data.data.forEach(i => {
if (i.avatar == undefined) i.avatar = 'https://cravatar.cn/avatar/d615d5793929e8c7d70eab5f00f7f5f1?d=mp'
ls.push({ avatar: i.avatar, content: i.nick + ':' + formatDanmaku(i.comment) })
});
document.getElementById('container').innerHTML = '';
Danmaku.runtime = ls.length * 2
Danmaku.centeredSend('一大波弹幕即将来袭','center-danmaku',3000)
Danmaku.centeredSend('一大波弹幕即将来袭','center-danmaku',3000)
Danmaku.centeredSend('一大波弹幕即将来袭','center-danmaku',3000)
Danmaku.batchSend(ls,true);
});

// 添加弹幕
function addDanmaku() {
try {
let text = document.querySelector('.tk-main time').innerText
if (text.indexOf('秒') == -1 && text.indexOf('刚刚') == -1) return;
let img = document.querySelector('.tk-avatar img').src;
let nick = document.querySelector('.tk-nick').innerText;
let content = formatDanmaku(document.querySelector('.tk-content').innerText);
ls.push({ avatar: img, content: nick + ':' + content })
let html = '<p>刚刚:' + content + '</p>'
Danmaku.send(html,'newDanmaku');
} catch (error) {
console.log(error);
}
}

// 格式化评论
function formatDanmaku(str) {
str = str.replace(/<\/*br>|[\s\uFEFF\xA0]+/g, '');
str = str.replace(/<img.*?>/g, '[图片]');
str = str.replace(/<a.*?>.*?<\/a>/g, '[链接]');
str = str.replace(/<pre.*?>.*?<\/pre>/g, '[代码块]');
str = str.replace(/<.*?>/g, '');
return str
}
</script>

修改twikoo源码

修改butterfly\layout\includes\third-party\comments\twikoo.pug 11行左右的代码,这一步是为了新评论直接加到弹幕中。
注意修改/message/为你的留言地址

1
2
3
4
onCommentLoaded: function (e) {
+ if (location.pathname == '/message/') addDanmaku();
btf.loadLightbox(document.querySelectorAll('#twikoo .tk-content img:not(.tk-owo-emotion)'))
}