| Issues | License | NPM | |--------|---------|-------| ||

hexo-tag-bilibili-card

一个 Hexo 插件，在你的文章中插入哔哩哔哩卡片，样式模仿和借鉴自哔哩哔哩，基于 hexo-bilibili-card

安装

npm i hexo-tag-bilibili-card

预览

复制以下代码到 HTML 文件中查看

<script src="https://unpkg.com/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card.js" async></script>
<bilibili-card vid="BV1y54y1a768" type="video" title="【UWP】手把手教你安装 UWP 安装包" author="where-where"
  cover="http://i2.hdslb.com/bfs/archive/41bc750cb5011bb036e008a716a89158c7eb7bb5.jpg" duration="05:21" views="2.2万"
  danmakus="4" comments="75" favorites="253" coins="106" likes="287" info-types="views danmakus"
  theme="system"></bilibili-card>

使用

最低需求

• 支持 Web Components
• 支持 ES6 语法

使用插件

在你的文章中插入以下片段

{% bilibili_card $id $type $info-types $theme %}

其中

| 属性名 | 描述 | 可选值 | 默认值 | 示例 | |-------|------|-------|-------|-----| | $id | 媒体 ID | 视频：AV, BV；~~专栏：CV~~；番剧：MD；音频：AU | 空，将跳过生成 | BV1y54y1a768 | | $type | 卡片类型 | video, ~~article~~, user, live, bangumi, audio, dynamic, favorite, ~~album~~ | 自动识别 AV, BV, ~~CV~~, MD, AU，识别失败视为 video | video | | $info-types | 显示信息 | views, danmakus, comments, favorites, coins, likes | 空，由 bilibili-card 分配默认值 | views danmakus | | $theme | 样式 | system, light, dark | 空，由 bilibili-card 分配默认值 | system |

完整示例

{% bilibili_card BV1y54y1a768 video 'views danmakus' system %}

然后你就可以看见文章中的卡片了

使用 Web Components

你也可以直接使用 Web Component 控件

在 Head 中引入

<script src="https://unpkg.com/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card.js" async></script>

在文章中插入

<bilibili-card ...></bilibili-card>

其中

| 属性名 | 描述 | 默认值 | |-------|------|-------| | vid | 媒体 ID | 空 | | type | 卡片类型 | video | | title | 卡片标题 | 哔哩哔哩 (゜-゜)つロ 干杯~ | | author | 作者 | 2233 | | cover | 封面图片地址 | 空 | | duration | 媒体时长 | ??:?? | | views | 观看量 | 0 | | danmakus | 弹幕数 | 0 | | comments | 评论数 | 0 | | favorites | 收藏数 | 0 | | coins | 投币数 | 0 | | likes | 点赞数 | 0 | | info-types | 显示信息 | 根据卡片类型分配 | | image-proxy | 图片代理地址 | https://images.weserv.nl/?url= | | theme | 样式 | system |

使用 Builder

你还可以使用 bilibiliCardBuilder 来生成 DOM 对象

<link rel="stylesheet" href="https://unpkg.com/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card.css">
<div id="host"></div>
<script type="module">
  import { bilibiliCardBuilder } from "https://unpkg.com/hexo-tag-bilibili-card/components/bilibili-card-builder/bilibili-card-builder.esm.js";
  const card = bilibiliCardBuilder.createCard(
    undefined,
    "views danmakus",
    {
      vid: "BV1y54y1a768",
      title: "【UWP】手把手教你安装 UWP 安装包",
      author: "where-where",
      cover: "http://i2.hdslb.com/bfs/archive/41bc750cb5011bb036e008a716a89158c7eb7bb5.jpg",
      duration: "05:21",
      views: "2.2万",
      danmakus: "4",
      comments: "75",
      favorites: "253",
      coins: "106",
      likes: "287"
    }
  );
  document.getElementById("host").appendChild(card);
</script>

其中

/** 卡片类型 */
type cardType = "video" | "article" | "user" | "live" | "bangumi" | "audio" | "dynamic" | "favorite" | "album";
/** 样式 */
type themeType = "system" | "light" | "dark";
/** 卡片信息 */
type cardInfo =
    {
        /** 媒体 ID */
        vid: string;
        /** 卡片类型 */
        type: cardType;
        /** 卡片标题 */
        title: string;
        /** 作者 */
        author: string;
        /** 封面图片地址 */
        cover: string;
        /** 媒体时长 */
        duration: string;
        /** 观看量 */
        views: string | number;
        /** 弹幕数 */
        danmakus: string | number;
        /** 评论数 */
        comments: string | number;
        /** 收藏数 */
        favorites: string | number;
        /** 投币数 */
        coins: string | number;
        /** 点赞数 */
        likes: string | number;
    };

/** 哔哩哔哩控件生成器 */
declare interface IBilibiliCardBuilder {
    /**
     * 生成哔哩哔哩卡片控件外壳
     * @param imageProxy 图片代理地址
     * @param infoTypes 显示信息
     * @param 卡片信息
     * @param theme 样式
     * @returns 卡片控件
     */
    createHost(imageProxy: string, infoTypes: string, { vid, type, title, author, cover, duration, views, danmakus, comments, favorites, coins, likes }: cardInfo, theme: themeType): HTMLElement;
    /**
     * 使用自定义标签名生成哔哩哔哩卡片控件外壳
     * @param tagName 自定义标签名
     * @param imageProxy 图片代理地址
     * @param infoTypes 显示信息
     * @param 卡片信息
     * @param theme 样式
     * @returns 卡片控件
     */
    createHostWithTagName(tagName: string, imageProxy: string, infoTypes: string, { vid, type, title, author, cover, duration, views, danmakus, comments, favorites, coins, likes }: cardInfo, theme: themeType): HTMLElement;
    /**
     * 为哔哩哔哩卡片控件外壳生成卡片内容
     * @param element 控件外壳
     */
    praseElement(element: HTMLElement): void;
    /**
     * 生成哔哩哔哩卡片控件
     * @param imageProxy 图片代理地址
     * @param infoTypes 显示信息
     * @param 卡片信息
     * @param theme 样式
     * @returns 卡片控件
     */
    createCard(imageProxy: string, infoTypes: string, { vid, type, title, author, cover, duration, views, danmakus, comments, favorites, coins, likes }: cardInfo, theme: themeType): HTMLElement;
    /**
     * 使用自定义标签名生成哔哩哔哩卡片控件
     * @param tagName 自定义标签名
     * @param imageProxy 图片代理地址
     * @param infoTypes 显示信息
     * @param 卡片信息
     * @param theme 样式
     * @returns 卡片控件
     */
    createCardWithTagName(tagName: string, imageProxy: string, infoTypes: string, { vid, type, title, author, cover, duration, views, danmakus, comments, favorites, coins, likes }: cardInfo, theme: themeType): HTMLElement;
    /**
     * 注册哔哩哔哩卡片控件属性变化观察器
     * @param element 卡片控件
     */
    registerObserver(element: HTMLElement): void;
}

/** 哔哩哔哩控件生成器 */
const bilibiliCardBuilder: IBilibiliCardBuilder;

/** 全局导出 */
globalThis.bilibiliCardBuilder = bilibiliCardBuilder;
/** CommonJS 导出 */
module.exports = bilibiliCardBuilder;
/** ES6 导出 */
export default bilibiliCardBuilder;

兼容性

请根据注释自行取舍

<!-- 补全不支持的依赖 -->
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js"></script>
<!-- 补全 Web Components 支持 -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<!-- 补全不支持的语法 -->
<script src="https://cdn.jsdelivr.net/npm/@babel/[email protected]/babel.min.js"></script>
<!-- 设置 type 为 text/babel 以支持新语法 -->
<script src="https://cdn.jsdelivr.net/npm/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card.js" type="text/babel" async></script>
<!-- 部分情况下控件无法正常自动插入 CSS 依赖，需要手动补充 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/hexo-tag-bilibili-card/components/bilibili-card/bilibili-card.css">
<!-- 补全 CSS 变量支持 -->
<script src="https://cdn.jsdelivr.net/npm/css-vars-ponyfill/dist/css-vars-ponyfill.min.js"></script>
<script>
  cssVars({
    variables: {
      "--bilibili-accent-color": "#fb7299",
      "--bilibili-card-border-color": "#e7e7e7",
      "--bilibili-card-background-color": "white",
      "--bilibili-card-cover-color": "#c9c9c9",
      "--bilibili-card-cover-background-color": "#f4f4f4",
      "--bilibili-card-title-color": "#505050",
      "--bilibili-card-subtitle-color": "white",
      "--bilibili-card-subtitle-background-color": "rgba(0, 0, 0, .4)",
      "--bilibili-card-content-color": "#999"
    },
    watch: true
  });
</script>
<bilibili-card ...></bilibili-card>

配置

由于哔哩哔哩图片地址的跨域限制，因此需要配置图片代理，目前未找到大陆地区较为稳定的服务，默认使用的 https://images.weserv.nl/?url=，部分地区受到了 DNS 污染及反应过慢。建议参考 rsstt-img-relay 自建服务

bilibili_card:
  enable: true  # 是否启用
  image_proxy: https://images.weserv.nl/?url= # 图片代理
  inject_layouts: [default] # 需要注入的布局
  mode: component # 模式选择，component 为 Web 组件
                  # 其他为直接插入 HTML，样式可选 system, light, dark

引用及参考

• jsdom
• hexo-fs
• hexo-bilibili-card
• 哔哩哔哩-API收集整理

参与人员