Skip to content

B 站视频

这是一个用于在 Hugo 网站中嵌入 Bilibili 视频的自定义 shortcode。

功能特性

  • 🎥 支持嵌入 Bilibili 视频
  • 📱 响应式设计，自适应移动端和桌面端
  • 🎨 现代化的圆角设计和阴影效果
  • 🌙 支持明暗主题切换
  • 📝 支持视频说明文字（caption）
  • ♿ 符合可访问性标准
  • 🔒 安全的 iframe 嵌入

基本用法

最简单的用法

{{< bilibili bv="BV1634y1w7Nu" >}}

带说明文字的用法

{{< bilibili bv="BV1634y1w7Nu" caption="Istio Advisor Plus GPT 演示视频" >}}

完整参数示例

{{< bilibili bv="BV1634y1w7Nu" aid="36041724" cid="63259487" caption="这是一个示例视频" >}}

参数说明

参数 类型 必需 说明 示例
bv string ✅ Bilibili 视频的 BV 号 BV1634y1w7Nu
aid string ❌ 视频的 AV 号（可选） 36041724
cid string ❌ 视频分 P 的 CID 号（可选） 63259487
caption string ❌ 视频下方显示的说明文字 "这是视频说明"

如何获取参数

获取 BV 号

  1. 打开 Bilibili 视频页面
  2. 从 URL 中复制 BV 号，例如：
  3. URL: https://www.bilibili.com/video/BV1634y1w7Nu/
  4. BV 号：BV1634y1w7Nu

获取 AID 和 CID（可选）

  1. 在视频页面按 F12 打开开发者工具
  2. 在 Console 中输入：

console.log('aid:', window.__INITIAL_STATE__.aid);
console.log('cid:', window.__INITIAL_STATE__.videoData.cid);
3. 或者从页面源代码中搜索这些参数

实际使用示例

示例 1：技术演示视频

## Istio Advisor Plus GPT 演示

下面是一个展示如何使用 Istio 老中医解决实际问题的视频：

{{< bilibili bv="BV1634y1w7Nu" caption="Istio Advisor Plus GPT 演示视频" >}}

视频展示了如何使用 GPT 来解答 Istio 相关的技术问题。

示例 2：航拍视频

## 上海夜景航拍

11 月 12 日晚在上海静安寺上空飞行，航拍的南京西路夜景：

{{< bilibili bv="BV12345678" aid="36041724" cid="63259487" caption="上海静安寺南京西路夜景航拍" >}}

示例 3：无说明文字

## 会议回顾

{{< bilibili bv="BV1634y1w7Nu" >}}

样式定制

CSS 变量

shortcode 使用 CSS 变量来支持主题切换：

:root {
  --bilibili-video-bg: #000;        /* 视频背景色 */
  --bilibili-caption-color: #555;   /* 说明文字颜色 */
}

/* 暗色模式 */
.dark-mode {
  --bilibili-video-bg: #111;
  --bilibili-caption-color: #ccc;
}

自定义样式

如果需要自定义样式，可以覆盖以下 CSS 类：

.bilibili-video-wrapper {
  /* 主容器样式 */
  max-width: 720px;  /* 最大宽度 */
  margin: 1rem auto; /* 外边距 */
}

.bilibili-video-container {
  /* 视频容器样式 */
  aspect-ratio: 16 / 9;  /* 宽高比 */
  border-radius: 8px;    /* 圆角 */
}

.bilibili-caption {
  /* 说明文字样式 */
  font-size: 0.95rem;
  font-style: italic;
  text-align: center;
}

注意事项

1. 网络环境

  • 确保用户能够访问 Bilibili
  • 在某些网络环境下可能无法加载

2. 隐私考虑

  • iframe 会加载 Bilibili 的播放器
  • 可能会设置第三方 cookie

3. 性能优化

  • 视频不会自动播放，减少带宽消耗
  • 使用loading="lazy"属性延迟加载

4. 可访问性

  • 所有 iframe 都包含适当的title属性
  • 支持键盘导航
  • 兼容屏幕阅读器

故障排除

问题 1：视频不显示

可能原因：

  • BV 号错误
  • 网络连接问题
  • 视频已被删除或设为私有

解决方法：

  • 检查 BV 号是否正确
  • 确认视频在 Bilibili 上可以正常播放

问题 2：说明文字不显示

可能原因：

  • CSS 样式冲突
  • 参数格式错误

解决方法：

  • 检查 caption 参数是否正确引用
  • 确认 CSS 文件已正确加载

问题 3：样式问题

可能原因：

  • CSS 变量未定义
  • 样式被其他 CSS 覆盖

解决方法：

  • 检查 CSS 导入顺序
  • 使用开发者工具调试样式

技术实现

文件结构

layouts/shortcodes/bilibili.html     # Hugo shortcode 模板
assets/scss/components/_bilibili.scss # 样式文件

生成的 HTML 结构

<figure class="bilibili-video-wrapper">
  <div class="bilibili-video-container">
    <iframe
      src="//player.bilibili.com/player.html?bvid=BV1634y1w7Nu&isOutside=true"
      title="视频标题"
      allowfullscreen
      scrolling="no"
      frameborder="0">
    </iframe>
  </div>
  <figcaption class="bilibili-caption">
    <p>视频说明文字</p>
  </figcaption>
</figure>

版本历史

  • v1.0: 初始版本，支持基本的视频嵌入
  • v1.1: 添加说明文字支持
  • v1.2: 优化响应式设计和可访问性
  • v1.3: 修复样式冲突问题，改进暗色模式支持

相关文档