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

bilibili-card

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

安装

npm i bilibili-card

预览

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

<script type="module" src="https://unpkg.com/bilibili-card/dist/components/index.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>

SVG 预览

使用

最低需求

• 支持 Web Components
• 支持 ES6 语法

使用 Web Components

在 Head 中引入

<script type="module" src="https://unpkg.com/bilibili-card/dist/components/index.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 | 样式 | 空 |

使用 Vue 组件

你也可以直接使用 Vue 控件

<template>
  <BiliBiliCard :get-theme="getTheme" />
</template>

<script setup>
import { getTheme } from "bilibili-card/src/helpers/theme/index";
import BiliBiliCard from "bilibili-card/src/components/bilibili-card.vue";
</script>

其中属性同 Web Components

使用 Builder

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

<link rel="stylesheet" href="https://unpkg.com/bilibili-card/src/styles/bilibili-card.css">
<div id="host"></div>
<script type="module">
  import { bilibiliCardBuilder } from "https://unpkg.com/bilibili-card/dist/tools/bilibili-card-builder/index.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>

使用 Vue Plugin

你还可以将其作为 Vue 插件使用

在 vite.config 中引入

import bilibiliCard from "bilibili-card/dist/lib/bilibili-card";

export default defineConfig({
  plugins: [
    bilibiliCard({
      image_proxy: "https://images.weserv.nl/?url="
    })
  ]
});

其中

| 选项名 | 描述 | 默认值 | |-------|------|-------| | image_proxy | 图片代理地址 | https://images.weserv.nl/?url= |

然后就可以在 Vue 中使用该组件了

<template>
  <BiliBiliCard theme="theme" />
</template>

<script setup>
import BiliBiliCard from "bilibili-card:{ID}?proxy=&type=&info-types=";
</script>

其中

| 属性名 | 描述 | 可选值 | 默认值 | 示例 | |-------|------|-------|-------|-----| | theme | 样式 | css 文件地址 | 空 | https://unpkg.com/bilibili-card/src/styles/bilibili-card.css | | pathname | 媒体 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 |

定义文件可导入

/// <reference types="bilibili-card/src/types/bilibili-card" />

或添加

declare module "bilibili-card:*" {
  import type { defineComponent, HTMLAttributes } from "vue";
  interface BilibiliCardProps extends HTMLAttributes {
    theme?: string;
  }
  const component: ReturnType<typeof defineComponent<BilibiliCardProps>>;
  export default component;
}

完整示例

import BiliBiliCard from "bilibili-card:BV1y54y1a768?type=video&info-types=views danmakus";

配置

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

引用及参考

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

参与人员