参考项目地址：https://github.com/pprory/easyDanmaku

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

代码中引入的js是我进行修改过的，不可以使用原项目js（也最好不要乱改配置，我没有做兼容）

添加js

获取js文件：easy-Danmaku
把上面js文件下载到本地。放到博客的[blogRoot]/source/js文件夹下面，没有的话创建一个或者自己决定放在哪个文件夹里。
然后在butterfly配置文件内的inject下的bottom里引入该文件，如：

1
2
3
bottom:
  - <script src="/js/easy-Danmaku.js"></script>
  - <script src="/js/XXXX.js"></script> # 自定义js位置，要放在弹幕插件下面

在自定义js内添加以下代码：

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
function danmu() {
  if (location.pathname != '/collect/' || document.body.clientWidth < 768) return //判断是否是留言板页面
  console.log(1);
  const Danmaku = new EasyDanmaku({
    page: '/collect/', // 即留言板地址
    el: '#danmu', //弹幕挂载节点
    line: 10, //弹幕行数
    speed: 20, //弹幕播放速度
    hover: true,
    loop: true, //开启循环播放
  })
  let data = saveToLocal.get('danmu')
  if (data) Danmaku.batchSend(data, true);
  else {
    let ls = []
    fetch('https://twikoo.xxx.cn/', { // 此处替换成自己的twikoo地址
      method: "POST",
      body: JSON.stringify({
        "event": "GET_RECENT_COMMENTS",
        "includeReply": false,
        "pageSize": 100
      }),
      headers: { 'Content-Type': 'application/json' }
    }).then(res => res.json()).then(({ 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), url: i.url + '#' + i.id })
      });
      Danmaku.batchSend(ls, true);
      saveToLocal.set('danmu', ls, 0.02)
    });
    // 格式化评论
    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
    }
  }
  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>`
}
danmu()
document.addEventListener("pjax:complete", danmu)

添加代码

使用hexo n page xxx创建一个页面，我是放在了留言板里面
打开 xxx/index.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
<style>
#article-container a:not(.headerlink, .fancybox, .default-style a) {
    font-weight: 700;
    color: var(--font-color);
    padding: 0 3px;
    border-bottom: 2px var(--leonus-main) solid;
}

#article-container a:not(.headerlink, .fancybox, .default-style a):hover {
    color: #fff;
    border-radius: 5px;
    text-decoration: none;
    background-color: var(--leonus-main);
}

#danmu {
    width: 100%;
    height: calc(100% - 60px);
    position: fixed;
    left: 0;
    top: 60px;
    z-index: 1;
    pointer-events: none;
}

.hidedanmu {
    opacity: 0;
}

.hidedanmu * {
    pointer-events: none !important;
}

div#danmuBtn {
    display: flex;
    justify-content: center;
}

div#danmuBtn button {
    background: var(--leonus-main);
    color: white;
    padding: 8px 20px;
    margin: 0 20px;
    border-radius: 100px;
}

.default-style {
    pointer-events: all;
    cursor: pointer;
    font-size: 16px;
    border-radius: 100px;
    overflow: hidden;
}

.default-style a {
    background-color: rgba(0, 0, 0, 0.5);
    transition: .3s;
    color: #eee !important;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px 16px 6px 6px;
    text-decoration: none !important;
}

.default-style a:hover {
    background-color: rgba(0, 0, 0, 0.7);
}

.default-style img {
    pointer-events: none;
    height: 30px;
    width: 30px;
    margin: 0 5px 0 0 !important;
    border-radius: 50% !important;
}

.default-style p {
    line-height: 1;
    pointer-events: none;
    margin: 0 !important;
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>

{% note success  flat %}
如果有什么 **想说的**、**想问的** 或者 **发现了本站的BUG**，欢迎留言告知😊。
{% endnote %}

{% note pink 'fa-solid fa-link'  flat %}
若想 **添加友链** 请前往 [友情链接](/link/) 页面进行友链申请😄
{% endnote %}

<div id="danmuBtn"></div>
<div id="danmu"></div>