前言

通过标签外挂为博客添加一个b站视频卡片样式。本篇文章原教程来自 Leonus 所发布的 哔哩哔哩卡片标签外挂

步骤

在 /themes/anzhiyu/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
46
47
48
"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];
  const API = hexo.bilibiliApi ? hexo.bilibiliApi : "https://api.320.ink/api/b";
  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('${API}?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 nolazyload">
          <img src="\${data.pic + '&h=300'}" class="nolazyload">
          ${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 >= 10000 ? (data.view / 10000).toFixed(1) + "w" : data.view}</span>
            <span>${likeIcon}\${data.like >= 10000 ? (data.like / 10000).toFixed(1) + "w" : data.view}</span>
            <span>${coinIcon}\${data.coin >= 10000 ? (data.coin / 10000).toFixed(1) + "w" : data.coin}</span>
          </div>
          <div class="owner">
            <span class="tip">视频</span>
            <img src="\${data.face + '&h=100'}" class="nolazyload">
            <span>\${data.owner}</span>
          </div>
        </div>
        \`
      })
    }
  </script>
  `;
}

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

在 /themes/anzhiyu/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
103
104
105
106
107
108
.bilibili_box
  display: flex
  background: var(--card-bg)
  border: var(--style-border)
  border-radius: 12px !important
  overflow: hidden
  color: var(--font-color) !important
  text-decoration: none !important
  transition: .3s
  border-bottom: var(--style-border) !important
  padding: 0 !important
  height 143px
  &:hover
    border-color: var(--anzhiyu-main) !important
    color: var(--anzhiyu-white) !important
    .bilibili_info .stat svg path
      fill: var(--anzhiyu-white) !important
  +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: var(--anzhiyu-white)
  .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()
        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: #f69
        border: 1px solid
        padding: 3px 6px
        font-size: 12px
        border-radius: 5px
        margin: 0 10px 0 0
        background: none;
        box-shadow: none;
      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 获取所以设置成了手动填写

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

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

示例：

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

结尾

在安知鱼主题1.6.8已经适配哔哩哔哩标签外挂了，但是当前存在一些问题：

  • 由于懒加载问题，导致获取的图片不能第一时间就显示出来
    在 /themes/anzhiyu/scripts/filters/post_lazyload.js 中进行如下修改：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    const lazyload = htmlContent => {
      const error_img = hexo.theme.config.error_img.post_page
      const bg = hexo.theme.config.lazyload.placeholder
        ? urlFor(hexo.theme.config.lazyload.placeholder)
        : "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7";
      return htmlContent.replace(
        /(<img(?!.*?class[\t]*=[\t]*['"].*?nolazyload.*?['"]).*? src=)/gi,
        `$1 "${bg}" data-lazy-src=`
      );
      // 原主题
      // return htmlContent.replace(
      //   /(<img(?!.class[\t]*=[\t]*['"].*?nolazyload.*?['"]).*? src=)/gi,
      //   `$1 "${bg}" onerror="this.onerror=null,this.src=&quot;${error_img}&quot;" data-lazy-src=`
      // );
    }

  • 样式没有适配
    将如下代码粘贴进你的任意一个css文件中即可

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    /* 白天鼠标触碰时背景颜色 */
    [data-theme=light] .bilibili_box:hover {
        background: none !important;
        color: var(--anzhiyu-fontcolor) !important;
    }

    /* 白天播放量、点赞数等图标颜色 */
    [data-theme=light] .bilibili_box .bilibili_info .stat svg path {
        fill: rgba(54, 54, 54, 1) !important;
    }

    /* 夜间鼠标触碰时背景颜色 */
    [data-theme=dark] .bilibili_box:hover {
        background: none !important;
    }