哔哩哔哩卡片标签外挂

2023-04-04更新：更新连接匹配问题。
例如 https://www.bilibili.com/video/BV1Sx4y1K7Gq 显示正常，
但是 https://www.bilibili.com/video/BV1Sx4y1K7Gq/?spm_id_from=333.880.my_history.page.click&vd_source=5b241fa0dead9a9b68032971967b01c9 无法正常显示。

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

一、前言

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

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

二、教程

bilibili.js

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

'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并粘贴如下代码：

.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	分享数量

示例

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

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

四、自建 API

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

安装cli

运行如下命令

1	npm i -g vercel

初始化项目

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

npm init

安装axios

运行

1	npm i axios

创建文件

新建 api 目录，然后在 api 目录下创建如下两个文件

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

b.js

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 文件并粘贴如下代码：
(这一步是为了防止跨域)

{
  "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"
        }
      ]
    }
  ]
}