侧边栏壁纸
博主头像
小莫唐尼博主等级

为 API 生,为框架死,为 debug 奋斗一辈子丨talk is cheap,show me the code.

  • 累计撰写 20 篇文章
  • 累计创建 35 个标签
  • 累计收到 105 条评论

目 录CONTENT

文章目录

Joe美化(8):增加一个全屏弹幕功能

小莫唐尼
2022-09-07 / 8 评论 / 5 点赞 / 93 阅读 / 594 字 / 正在检测是否收录...
温馨提示:
本文最后更新于 2022-09-07,若内容或图片失效,请留言反馈。部分素材来自网络,若不小心影响到您的利益,请联系我们删除。

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

特别说明:该修改只针对于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)” 弹幕背景颜色

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

5

评论区