给你的留言板添加一个弹幕吧

本博客已弃用此功能，在本站看不到效果，但教程依旧有效。

升级版：弹幕升级版（全屏弹幕）

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

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

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

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

获取数据

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

添加代码

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

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

<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: #4976f5 !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: #4976f5;
    font-size: 1.2rem;
    width: 100%;
    text-align: center;
}
.newDanmaku {
    border: 1px solid #4976f5;
}
</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/为你的留言地址

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