小莫唐尼

小莫唐尼

[Halo] Joe美化 - 增加一个全屏弹幕功能

674
2022-09-07
[Halo] Joe美化 - 增加一个全屏弹幕功能

之前就有弄一个弹幕的功能,现在它来了,简单记录一下吧。

特别说明:该修改只针对于halo博客的joe主题!!!

功能描述

全屏弹幕

  • 支持:侧栏最新回复内容(只要joe后台设置开启了侧栏的最新回复)
  • 支持:文章详情页面的评论
  • 支持:其他页面的评论回复内容

上图预览:
image

image

代码使用

第一步:下载文件

包含三个文件:
样式文件:evan-barrage.min.css
脚本文件:evan-barrage.min.js

第二步:引入css样式文件

引用css的方式有三种,分别如下:

第1种:主题设置-自定义-外部css链接 中填写 evan-barrage.min.css的文件地址,如图:

image

第2种:主题设置-自定义-自定义css 中拷贝 evan-barrage.min.css的文件内容粘贴到此处,如图:

image-1660530454036

第3种:

joe主题编辑,在 template/common/header.ftl文件中,加入evan-barrage.min.css css文件链接地址(注意,这个链接地址是你自己的地址,请不要直接使用我的地址),如图:

image

第三步:引入js文件

在joe主题设置中,找到自定义,在 外部JS链接(head)配置中加入evan-barrage.min.js js文件链接,如图:

image

第四步:初始化插件

找到,joe 主题设置-> 自定义-> 自定义JS(body),添加以下代码(具体参数请参考下方说明):

  // 方式一:使用默认参数
  new EvanBarrage( )
  
 // 方式二:配置参数(参数看下方说明)
  new EvanBarrage({
   	color: "#fff",
       bgColor: "rgba(0,0,0,0.35)",
       randomAvatar: "http://api.btstu.cn/sjtx/api.php",
  })

位置如图所示:
image

参数说明:
参数名 参数类型 是否必填 默认值 说明
randomAvatar String http://api.btstu.cn/sjtx/api.php 随机头像地址,当无法读取到头像时候使用
color String “#fff” 弹幕文字颜色,默认是白色
bgColor String “rgba(0,0,0,0.35)” 弹幕背景颜色

😘😘😘 大功告成,快去试试吧,给你的博客也加上一个弹幕效果~