Hexo 博客追番神器:一键同步 B 站/Bangumi 追番列表,500+ Star 的宝藏插件

写技术博客的二次元，谁不想在博客里秀一下自己的追番列表？但手动维护太累，数据还容易过时。

hexo-bilibili-bangumi 是一个 Hexo 博客插件：自动从 B 站、Bangumi、AniList 等平台拉取你的追番/追剧/游戏数据，生成美观的展示页面——支持进度条、图片懒加载、响应式布局、自定义样式，让你的博客”二次元浓度”拉满。

01 它解决什么问题？

想在博客里展示追番列表，传统方案：

• 手动维护：每追完一部就要改代码，累且容易忘
• 嵌入 iframe：样式不可控，和博客主题格格不入
• 自己写爬虫：费时费力，平台 API 还可能变

hexo-bilibili-bangumi 的思路是：你只管追番，数据同步交给插件。

02 核心特性

2.1 多数据源支持

2.2 三种内容类型

• 追番（bangumi）：动画、番剧
• 追剧（cinema）：电视剧、电影
• 游戏（game）：仅支持 Bangumi 数据源

2.3 丰富的展示功能

• 进度条显示：直观展示观看进度（如”看到第 8 集/共 12 集”）
• 图片懒加载：首屏加载更快，滚动时再加载图片
• 响应式设计：手机、平板、电脑都好看
• Webp 格式：自动使用 Webp 图片，体积更小
• 图片镜像：解决 B 站封面防盗链问题

03 快速上手

安装

npm install hexo-bilibili-bangumi --save

基础配置

在 Hexo 站点的 _config.yml 中添加：

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

更新数据

# 更新追番数据hexo bangumi -u# 使用 B 站 SESSDATA 显示追番进度hexo bangumi -u 'your_sessdata_here'# 更新追剧/游戏数据hexo cinema -uhexo game -u

生成页面

hexo generate

访问 你的博客地址/bangumis/ 即可看到追番页面。

04 获取用户 ID

B 站 UID

1. 登录 哔哩哔哩
2. 进入 个人空间
3. 网址最后的数字就是 UID
4. 注意：需要把追番列表设为公开

Bangumi 用户名

登录 Bangumi，打开浏览器控制台（F12），输入：

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

05 进阶配置

图片镜像（解决 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/（雪花）

手动添加数据

在 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