Hexo 插件自动同步追番数据：支持B站/Bangumi多平台展示页

写技术博客的二次元博主们，是否想过在个人网站上展示自己的追番列表？手动维护不仅耗时，数据还容易过时。

hexo-bilibili-bangumi 这款 Hexo 插件完美解决了这个问题。它能自动从 Bilibili、Bangumi、AniList 等平台拉取你的追番、追剧乃至游戏数据，并生成一个美观的展示页面。它支持进度条、图片懒加载、响应式布局和自定义样式，轻松为你的博客注入“二次元浓度”。

它解决什么问题？

传统想在博客展示追番列表的方案各有痛点：

• 手动维护：每追完一部就要修改代码，繁琐且容易遗忘。
• 嵌入 iframe：样式不可控，难以与博客主题融合。
• 自己写爬虫：费时费力，且需应对平台API的变化。

hexo-bilibili-bangumi 的思路则简单高效：你只管追番，数据同步交给插件。

核心特性

多数据源支持

数据源	说明
哔哩哔哩 (bili)	国内最常用，支持追番进度显示。
Bangumi (bgm/bgmv0)	专业的ACG数据库，元数据最为全面。
AniList	国际化的动漫追踪平台。
Simkl	综合性的影视作品追踪平台。

三种内容类型

• 追番 (bangumi)：动画、番剧。
• 追剧 (cinema)：电视剧、电影。
• 游戏 (game)：目前仅支持从 Bangumi 数据源获取。

丰富的展示功能

• 进度条显示：直观展示观看进度（例如“看到第 8 集/共 12 集”）。
• 图片懒加载：提升首屏加载速度，图片在滚动进入视窗时再加载。
• 响应式设计：在手机、平板、电脑等不同设备上均有良好显示效果。
• Webp 格式：自动使用体积更小的 Webp 格式图片。
• 图片镜像：可配置镜像服务，解决 B 站封面图防盗链导致的403问题。

快速上手

安装

通过 npm 在您的 Hexo 博客项目目录下安装插件：

npm install hexo-bilibili-bangumi --save

基础配置

在 Hexo 站点的全局配置文件 _config.yml 中添加以下配置：

bangumi:
  # 追番设置
  enable: true
  source: bili # 数据源：bili/bgmv0/bangumi/anilist/simkl
  path: bangumis/index.html
  vmid: 你的用户ID # B站 UID 或其他平台用户 ID
  title: '追番列表'
  quote: '生命不息，追番不止！'
  show: 1 # 0=想看, 1=在看, 2=看过
  lazyload: true # 图片懒加载
  progress: true # 显示进度条

更新数据

安装配置完成后，通过以下命令获取并更新数据：

# 更新追番数据
hexo bangumi -u

# 使用 B 站 SESSDATA 以显示精确的追番进度
hexo bangumi -u 'your_sessdata_here'

# 更新追剧/游戏数据（需配置相应部分）
hexo cinema -u
hexo game -u

生成页面

最后，执行 Hexo 生成命令：

hexo generate

完成后，访问 你的博客地址/bangumis/ 即可看到自动生成的追番展示页面。

如何获取用户 ID

B 站 UID

1. 登录 哔哩哔哩。
2. 进入你的个人空间。
3. 浏览器地址栏网址末尾的数字即是你的 UID。
4. 重要：确保你在 B 站的追番列表已设置为“公开”。

Bangumi 用户名

登录 Bangumi 后，打开浏览器开发者工具（F12），在控制台输入以下代码并执行，即可获取你的用户名：

document.getElementById('header').getElementsByTagName('a')[0].getAttribute('href').split('/').at(-1)

进阶配置

配置图片镜像（解决封面图 403 问题）

B 站等平台的图片可能有防盗链策略，配置镜像服务可以解决此问题：

bangumi:
  coverMirror: 'https://image.baidu.com/search/down?url='

常用镜像服务地址：

• https://image.baidu.com/search/down?url= （百度，限制5MB以下图片）
• https://images.weserv.nl/?url= （Weserv）
• https://pic1.xuehuaimg.com/proxy/ （雪花）

手动添加数据

如果有些内容不在同步的列表中，可以手动添加。在 Hexo 站点的 source/_data/ 目录下创建 extra_bangumis.json 文件，并按格式添加数据：

{
  "watchedExtra": [
    {
      "title": "番剧标题",
      "type": "番剧",
      "cover": "封面图片链接",
      "totalCount": "全12话",
      "des": "简介..."
    }
  ]
}

总结

hexo-bilibili-bangumi 让 Hexo 博主能够轻松拥有一个专业、美观的追番展示页面。其多数据源支持覆盖了主流平台，自动同步机制省去了繁琐的手动维护，而进度条、懒加载和响应式设计则保证了优秀的浏览体验。

• 适合谁：使用 Hexo 搭建博客的动漫爱好者；希望在个人网站动态展示追番、追剧或游戏记录的用户。
• 使用建议：初次使用建议从 B 站数据源开始，快速体验基础功能。若对元数据完整性有更高要求，可切换至 Bangumi 数据源。

这个 开源项目 在 GitHub 上持续维护，地址为：https://github.com/HCLonely/hexo-bilibili-bangumi。如果你也在寻找个性化博客内容的方法，不妨在 云栈社区 与更多开发者交流你的心得。