[Halo] Joe美化 - 增加一个全屏弹幕功能
编辑
674
2022-09-07
之前就有弄一个弹幕的功能,现在它来了,简单记录一下吧。
特别说明:该修改只针对于halo博客的joe主题!!!
功能描述
全屏弹幕
- 支持:侧栏最新回复内容(只要joe后台设置开启了侧栏的最新回复)
- 支持:文章详情页面的评论
- 支持:其他页面的评论回复内容
上图预览:
代码使用
第一步:下载文件
包含三个文件:
样式文件:evan-barrage.min.css
脚本文件:evan-barrage.min.js
第二步:引入css样式文件
引用css的方式有三种,分别如下:
第1种:主题设置-自定义-外部css链接
中填写 evan-barrage.min.css
的文件地址,如图:
第2种:主题设置-自定义-自定义css
中拷贝 evan-barrage.min.css
的文件内容粘贴到此处,如图:
第3种:
joe主题编辑,在 template/common/header.ftl
文件中,加入evan-barrage.min.css
css文件链接地址(注意,这个链接地址是你自己的地址,请不要直接使用我的地址),如图:
第三步:引入js文件
在joe主题设置中,找到自定义,在 外部JS链接(head)
配置中加入evan-barrage.min.js
js文件链接,如图:
第四步:初始化插件
找到,joe 主题设置-> 自定义-> 自定义JS(body)
,添加以下代码(具体参数请参考下方说明):
// 方式一:使用默认参数
new EvanBarrage( )
// 方式二:配置参数(参数看下方说明)
new EvanBarrage({
color: "#fff",
bgColor: "rgba(0,0,0,0.35)",
randomAvatar: "http://api.btstu.cn/sjtx/api.php",
})
位置如图所示:
参数说明:
参数名 | 参数类型 | 是否必填 | 默认值 | 说明 |
---|---|---|---|---|
randomAvatar | String | 否 | “http://api.btstu.cn/sjtx/api.php” | 随机头像地址,当无法读取到头像时候使用 |
color | String | 是 | “#fff” | 弹幕文字颜色,默认是白色 |
bgColor | String | 是 | “rgba(0,0,0,0.35)” | 弹幕背景颜色 |
😘😘😘 大功告成,快去试试吧,给你的博客也加上一个弹幕效果~
- 8
- 7
-
赞助
微信支付微信赞赏QQ赞赏支付宝赞赏 -
分享