4

给你的留言板添加一个弹幕吧（重制）

 1 year ago
source link: https://blog.leonus.cn/2023/danmaku.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

给你的留言板添加一个弹幕吧（重制）

发表2023-08-18更新2023-08-18
字数总计:929阅读时长:4分钟阅读量:84评论数:18
机器人
点击我可以查看本文摘要哦~

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

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

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

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

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

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

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 文件，粘贴如下代码并替换数据（已注释位置）

<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-purple) solid;
}

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

#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-purple);
    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>

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK