bilibili-stats-badges
bilibili-stats-badges copied to clipboard
b站小徽章
Bilibili Stats Badges
Bilibili状态徽章,可用于网站、README等地方进行显摆(划掉)展示自己的B站账号信息。
目录
- 关系状态数徽章
- UP主状态数徽章
- 用户信息徽章
- 附加参数
- 混搭参数
- 调试和部署
- TODOs
关系状态数徽章
粉丝数
显示有多少人关注你
链接: https://bilistats.lonelyion.com/followers?uid=[你的UID]
HTML: <img src="https://bilistats.lonelyion.com/followers?uid=[你的UID]" alt="Followers"/>
Markdown: 
关注数
显示你关注了多少人
链接: https://bilistats.lonelyion.com/following?uid=[你的UID]
HTML: <img src="https://bilistats.lonelyion.com/following?uid=[你的UID]" alt="Following"/>
Markdown: 
UP主状态数徽章
视频播放量
显示所有视频投稿的播放数总和
链接: https://bilistats.lonelyion.com/views?uid=[你的UID]&type=video
, 其中&type=video
可有可无
HTML: <img src="https://bilistats.lonelyion.com/views?uid=[你的UID]" alt="Video Views"/>
Markdown: 
专栏阅读量
显示所有专栏投稿的阅读数总和
链接: https://bilistats.lonelyion.com/views?uid=[你的UID]&type=article
HTML: <img src="https://bilistats.lonelyion.com/views?uid=[你的UID]&type=article" alt="Article Views"/>
Markdown: 
获赞数
就个人空间里那个获赞数,我也不知道算哪些的总和
链接: https://bilistats.lonelyion.com/views?uid=[你的UID]&type=likes
HTML: <img src="https://bilistats.lonelyion.com/views?uid=[你的UID]&type=likes" alt="Likes"/>
Markdown: 
用户信息徽章
用户等级
不会还有人不是B站6级用户吧
链接: https://bilistats.lonelyion.com/level?uid=[你的UID]
HTML: <img src="https://bilistats.lonelyion.com/level?uid=[你的UID]" alt="Level"/>
Markdown: 
直播间开播状态
就很简单的在不在播,这个UID也是用户ID不是直播间号
链接: https://bilistats.lonelyion.com/live_status?uid=[你的UID]
HTML: <img src="https://bilistats.lonelyion.com/live_status?uid=[你的UID]" alt="Live Status"/>
Markdown: 
附加参数
color
改变徽章右侧的颜色,支持CSS颜色名字或十六进制数字
默认值:
blue
参数 | 外观 |
---|---|
?color=red |
|
?color=0a8b9d |
style
改变徽章的样式,支持以下几种外观
默认值:
flat-square
参数 | 外观 |
---|---|
?style=plastic |
|
?style=flat |
|
?style=flat-square |
|
?style=for-the-badge |
|
?style=social |
label
改变徽章的标签,特殊字符(如空格)最好使用URL编码转换
默认值:
Bilibili 粉丝数
等上面文档显示的那样
参数 | 外观 |
---|---|
?label=粉丝数 |
|
?label=B站%20粉丝数 |
|
?label=直播 |
label_color
改变徽章左侧的颜色,支持CSS颜色名字或十六进制数字
默认值:
grey
参数 | 外观 |
---|---|
?label_color=magenta |
|
?label_color=33ab06 |
logo_color
改变徽章左侧的颜色,支持CSS颜色名字或十六进制数字
默认值:
grey
参数 | 外观 |
---|---|
?logo_color=green |
|
?logo_color=cf34eb |
format
改变数字的格式,支持none
, commas
, short
默认值:
none
参数 | 外观 |
---|---|
?format=none |
|
?format=commas |
|
?format=short |
混搭参数
通过对url参数的组合,可以同时生效多个样式,例如
参数 | 外观 |
---|---|
?style=social&label=关注 |
|
?label=播放量&style=for-the-badge&color=3d3d3d&format=commas |
|
?label=获赞&style=for-the-badge&color=blue&label_color=00a1d6&logo_color=white |
调试和部署
调试
调试需要安装和配置好NodeJS 14以上版本以及Vercel CLI。
clone本项目后
npm install 或 yarn
vercel dev
即可在本地运行Vercel Serverless Functions环境,并且可以自动反馈文件修改。
部署
目前本项目仅支持部署到Vercel,也欢迎移植到其他平台。
点击上方按钮一键部署至Vercel,需要的环境变量已在部署步骤Configure Project
中说明。
TODOs
- 支持更多的字段信息
- 对一些只有两个值的信息(例如直播状态:
未开播
与已开播
),增加两个color的支持以对应不同的状态