2023-04-01更新:添加简介显示,使用时可选择关闭。

一、前言

群里有一位小伙伴问这个文章的b站视频卡片样式怎么实现的:学成在线–媒资管理模块开发
看着还不错便来了兴致决定弄一下,通过 f12 查到了 api 地址,感谢@怕冷爱上雪提供帮助。

因为官方 api 不能直接使用,于是便尝试使用 vercel 来作为中转使用(早就想尝试使用 vercel 托管 api)。

二、教程

bilibili.js

[blogroot]\themes\butterfly\scripts\tag下新建文件bilibili.js并粘贴如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
'use strict'
let playIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M4.67735 4.2798C5.98983 4.1725 7.85812 4.0625 10 4.0625C12.1421 4.0625 14.0105 4.17252 15.323 4.27983C16.2216 4.3533 16.9184 5.04049 16.9989 5.9318C17.0962 7.00837 17.1875 8.43614 17.1875 10C17.1875 11.5639 17.0962 12.9916 16.9989 14.0682C16.9184 14.9595 16.2216 15.6467 15.323 15.7202C14.0105 15.8275 12.1421 15.9375 10 15.9375C7.85812 15.9375 5.98983 15.8275 4.67735 15.7202C3.77861 15.6467 3.08174 14.9593 3.00119 14.0678C2.90388 12.9908 2.8125 11.5627 2.8125 10C2.8125 8.43727 2.90388 7.00924 3.00119 5.93221C3.08174 5.04067 3.77861 4.35327 4.67735 4.2798ZM10 2.8125C7.81674 2.8125 5.9136 2.92456 4.5755 3.03395C3.07738 3.15643 1.8921 4.31616 1.75626 5.81973C1.65651 6.92379 1.5625 8.39058 1.5625 10C1.5625 11.6094 1.65651 13.0762 1.75626 14.1803C1.8921 15.6838 3.07738 16.8436 4.5755 16.966C5.9136 17.0754 7.81674 17.1875 10 17.1875C12.1835 17.1875 14.0868 17.0754 15.4249 16.966C16.9228 16.8436 18.108 15.6841 18.2438 14.1807C18.3435 13.077 18.4375 11.6105 18.4375 10C18.4375 8.38948 18.3435 6.92296 18.2438 5.81931C18.108 4.31588 16.9228 3.15645 15.4249 3.03398C14.0868 2.92458 12.1835 2.8125 10 2.8125ZM12.1876 10.722C12.7431 10.4013 12.7431 9.59941 12.1876 9.27866L9.06133 7.47373C8.50577 7.15298 7.81133 7.55392 7.81133 8.19542V11.8053C7.81133 12.4468 8.50577 12.8477 9.06133 12.527L12.1876 10.722Z" fill="#9499A0"/></svg>`
let likeIcon = `<svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" class="icon"><path fill-rule="evenodd" clip-rule="evenodd" d="M9.77234 30.8573V11.7471H7.54573C5.50932 11.7471 3.85742 13.3931 3.85742 15.425V27.1794C3.85742 29.2112 5.50932 30.8573 7.54573 30.8573H9.77234ZM11.9902 30.8573V11.7054C14.9897 10.627 16.6942 7.8853 17.1055 3.33591C17.2666 1.55463 18.9633 0.814421 20.5803 1.59505C22.1847 2.36964 23.243 4.32583 23.243 6.93947C23.243 8.50265 23.0478 10.1054 22.6582 11.7471H29.7324C31.7739 11.7471 33.4289 13.402 33.4289 15.4435C33.4289 15.7416 33.3928 16.0386 33.3215 16.328L30.9883 25.7957C30.2558 28.7683 27.5894 30.8573 24.528 30.8573H11.9911H11.9902Z"></path></svg>`
let coinIcon = `<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="icon" style="fill:;"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.045 25.5454C7.69377 25.5454 2.54504 20.3967 2.54504 14.0454C2.54504 7.69413 7.69377 2.54541 14.045 2.54541C20.3963 2.54541 25.545 7.69413 25.545 14.0454C25.545 17.0954 24.3334 20.0205 22.1768 22.1771C20.0201 24.3338 17.095 25.5454 14.045 25.5454ZM9.66202 6.81624H18.2761C18.825 6.81624 19.27 7.22183 19.27 7.72216C19.27 8.22248 18.825 8.62807 18.2761 8.62807H14.95V10.2903C17.989 10.4444 20.3766 12.9487 20.3855 15.9916V17.1995C20.3854 17.6997 19.9799 18.1052 19.4796 18.1052C18.9793 18.1052 18.5738 17.6997 18.5737 17.1995V15.9916C18.5667 13.9478 16.9882 12.2535 14.95 12.1022V20.5574C14.95 21.0577 14.5444 21.4633 14.0441 21.4633C13.5437 21.4633 13.1382 21.0577 13.1382 20.5574V12.1022C11.1 12.2535 9.52148 13.9478 9.51448 15.9916V17.1995C9.5144 17.6997 9.10883 18.1052 8.60856 18.1052C8.1083 18.1052 7.70273 17.6997 7.70265 17.1995V15.9916C7.71158 12.9487 10.0992 10.4444 13.1382 10.2903V8.62807H9.66202C9.11309 8.62807 8.66809 8.22248 8.66809 7.72216C8.66809 7.22183 9.11309 6.81624 9.66202 6.81624Z"></path></svg>`

function bilibili(args) {
const id = args[0].replace(/.*video\/(.*)\/?.*/, '$1')
const time = args[1]
const hidden_desc = args[2]
return `
<a href="https://www.bilibili.com/video/${id}/" class="bilibili_box" id="${id}"></a>

<script>
bilibili()
function bilibili() {
let dom = document.getElementById('${id}')
fetch('https://api.320.ink/api/b?id=${id}').then(res=>res.json()).then(data=>{
dom.innerHTML = \`
<div class="bilibili_cover">
<img src="https://s1.hdslb.com/bfs/static/player/img/play.svg" class="play_icon no-lazyload">
<img src="\${data.pic + '&h=300'}" class="no-lazyload">
${time ? `<span>${time}</span>` : ''}
</div>
<div class="bilibili_info">
<div class="title">\${data.title}</div>
${hidden_desc == 'true' ? '' : '<div class="desc">\${data.desc}</div>'}
<div class="stat">
<span>${playIcon}\${data.view}</span>
<span>${likeIcon}\${data.like}</span>
<span>${coinIcon}\${data.coin}</span>
</div>
<div class="owner">
<span class="tip">视频</span>
<img src="\${data.face + '&h=100'}" class="no-lazyload">
<span>\${data.owner}</span>
</div>
</div>
\`
})
}
</script>
`
}

hexo.extend.tag.register('bilibili', bilibili, { ends: false })

bilibili.styl

[blogroot]\themes\butterfly\source\css\_tags下新建文件bilbili.styl并粘贴如下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
.bilibili_box
display: flex
background: var(--card-bg)
border: 1px solid #e0e3ed
border-radius: 10px
overflow: hidden
color: var(--font-color) !important
text-decoration: none !important
transition: .3s
&:hover
border-color: #4976f5
+maxWidth768()
flex-direction: column
.bilibili_cover
width: 234px
position relative
+maxWidth768()
width: 100%
img
width: 100%
filter: none
margin: 0 !important
border-radius: 0 !important
.play_icon
position: absolute
width 45px
height 45px
opacity .8
top: 50%
left 50%
transform: translate(-50%,-50%)
span
position: absolute
bottom: 0px
right: 5px
color: white
text-shadow: 0 1px 3px #7a7a7a
.bilibili_info
padding: 10px 10px 10px 18px
line-height: 1
width: calc(100% - 200px)
display: flex
flex-direction: column
justify-content: space-around
+maxWidth768()
width: 100%
padding-bottom: 25px
line-height: 1.5
.title
font-size: 1.2rem
font-weight: bold
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
line-height: 1.5
.desc
font-size: 15px
margin: 2px 0 4px
white-space: nowrap
overflow: hidden
text-overflow: ellipsis
+maxWidth768()
// word-break: break-all
white-space: normal
display:-webkit-box;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
.stat
font-size: 15px
svg
margin-right: 3px
font-size: 18px
width: 1em
height: 1em
path
fill: var(--font-color)
span
margin-right: 10px
display: inline-flex
align-items: center
.owner
display: flex
align-items: center
line-height: 1
font-size: 15px
.tip
color: #FF6699
border: 1px solid
padding: 3px 6px
font-size: 12px
border-radius: 5px
margin-right: 10px
img
width 22px
height: 22px
border-radius: 50% !important
object-fit: cover
margin 0 5px 0 0 !important

[data-theme='light'] .bilibili_box .bilibili_info .stat svg,
[data-theme='dark'] .bilibili_cover
opacity .8

使用

使用此标签外挂只需要填写视频链接,填写后将会自动获取信息。
视频时长因为不容易通过 api 获取所以设置成了手动填写,反正这个数据基本上不会改变

如果是手机的话:进入视频之后点击分享,复制链接然后用浏览器打开再复制链接,不要使用短链接

示例链接:https://www.bilibili.com/video/BV1eh411G7bK/?spm_id_from=333.999.0.0

格式如下:(视频时长可填可不填,若需要隐藏简介则必须填写视频时长)

1
{% bilibili 视频链接 [视频时长 隐藏简介] %}

若需要隐藏简介只需要添加 true 即可

示例

1
2
3
{% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 %}
<!-- 如果你要隐藏简介,添加true即可(注意,要隐藏简介则必须设置适配时间!),如下 -->
{% bilibili https://www.bilibili.com/video/BV1eh411G7bK 00:29 true %}

三、API 简述

API地址如下:
https://api.320.ink/api/b

该api由Vercel托管,强烈建议自建API

可携带参数:

  • id
    bilibili 视频ID
  • t
    请求单个数据的类型,可选值如下
    备注
    owner 视频作者名
    face 视频作者头像
    title 视频标题
    desc 视频简介
    pic 视频封面
    view 观看数量
    like 点赞数
    coin 投币数
    danmaku 弹幕数
    favorite 收藏数
    reply 评论数量
    share 分享数量

示例

  1. https://api.320.ink/api/b?id=BV1eh411G7bK
    会返回视频的所有数据
  2. https://api.320.ink/api/b?id=BV1eh411G7bK&t=view
    会返回视频的观看数量

当然,如果是使用自建API的话你可以随意的修改代码来满足自己的需求。

四、自建 API

若没有 vercel 账号请先自行注册
自建 API 需要有自己的域名(应该都有吧)

安装cli

运行如下命令

1
npm i -g vercel

初始化项目

新建一个目录,然后在此目录中打开终端
运行如下命令然后一路回车

1
npm init

安装axios

运行

1
npm i axios

创建文件

创建完成效果
新建 api 目录,然后在 api 目录下创建如下两个文件

创建的文件名字对应你后期的 api 路径名,如 b.js 对应 xxx.com/api/b
另外,index.js 文件对应的是 xxx.com/api

b.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
const axios = require('axios')
module.exports = async (req, res) => {
if (req.method === 'GET') {
if (req.query.id) {
let { data } = await axios.get('https://api.bilibili.com/x/web-interface/view?bvid=' + req.query.id)
data = data.data
let ls = {
owner: data.owner.name,
face: "https://images.weserv.nl/?url=" + data.owner.face,
title: data.title,
desc: data.desc,
pic: "https://images.weserv.nl/?url=" + data.pic,
coin: data.stat.coin,
danmaku: data.stat.danmaku,
favorite: data.stat.favorite,
like: data.stat.like,
reply: data.stat.reply,
share: data.stat.share,
view: data.stat.view,
}
if (req.query.t) { return res.send(ls[req.query.t]) } else return res.send(JSON.stringify(ls))
} else { return res.send('Hello World!') }
}
}

为了避免访问 xxx.com/api 报错,我们给它也添加一个内容让他返回 Hello World
index.js

1
2
3
module.exports = (req, res) => {
return res.status(200).send('Hello World!')
}

在根目录下创建 vercel.json 文件并粘贴如下代码:
(这一步是为了防止跨域)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
{
"headers": [
{
"source": "/api/(.*)",
"headers": [
{
"key": "Access-Control-Allow-Origin",
"value": "*"
},
{
"key": "Access-Control-Allow-Headers",
"value": "X-Requested-With, Content-Type, Authorization"
},
{
"key": "Access-Control-Allow-Credentials",
"value": "true"
}
]
}
]
}

部署

本地

在部署前先运行如下命令来测试代码是否生效

第一次运行会让登录和创建项目,登陆的话选择你平时登录的方式例如 github 回车即可,在浏览器完成授权就登陆成功了。创建项目就直接一路回车即可。

1
vercel dev

index.js正常
b.js正常
本地测试没问题了就可以运行如下命令进行线上部署了。

1
vercel --prod

部署成功
挂梯正常访问

vercel 网站

官方提供的网址在国内是无法访问的,所以我们需要自己绑定一个域名

打开 Vercel,登录之后点击 api 项目,依次点击 setting,domains,填写域名然后添加解析即可。

为了提升一点点的访问速度,我们再改一下地区。
选择 functions 然后选择香港。选择之后需要重新部署,再运行一遍vercel --prod就行。

配置域名
配置地区

五、参考文献

  1. https://devpress.csdn.net/cloudnative/62fb77cc7e6682346618ec34.html#devmenu6
  2. https://devpress.csdn.net/cloudnative/62fb751ac67703293080018b.html