Hexo博客追番神器：hexo-bilibili-bangumi插件教程，一键同步B站/Bangumi追番列表-微生之最

对于用Hexo搭建个人博客的二次元爱好者来说，在博客中展示专属追番列表，既能彰显个性，又能提升博客“二次元浓度”。但手动维护追番数据繁琐又易滞后，嵌入iframe样式杂乱，自建爬虫耗时耗力。而这款拥有500+ Star的宝藏插件——hexo-bilibili-bangumi，完美解决所有痛点，支持一键同步B站、Bangumi、AniList等平台追番/追剧/游戏数据，生成美观且功能齐全的展示页面，成为Hexo二次元博主必备工具。

一、核心痛点：传统追番列表展示方案的弊端

很多Hexo博主想在博客中展示追番记录，却被传统方案劝退：

手动维护成本高：每追完一集、新增一部番剧，都需要手动修改博客代码，不仅繁琐，还容易遗漏更新，导致数据过时。
iframe嵌入体验差：直接嵌入平台追番列表iframe，样式无法自定义，与博客主题割裂，破坏整体视觉一致性。
自建爬虫风险高：自行开发爬虫需耗费大量时间，且平台API接口频繁迭代，容易导致爬虫失效，维护成本极高。

hexo-bilibili-bangumi的核心优势的就是：用户只管安心追番，数据同步、页面生成全交给插件，零手动维护成本，轻松实现追番列表自动化展示。

二、hexo-bilibili-bangumi核心特性（全方位提升展示体验）

2.1 多数据源全覆盖，满足不同场景需求

插件支持主流ACG及影视追踪平台，可根据需求选择数据源，兼顾国内、国际及专业数据库场景：

数据源	适用场景	核心优势
哔哩哔哩（bili）	国内主流追番	使用门槛低，支持实时追番进度同步
Bangumi（bgm/bgmv0）	专业ACG爱好者	ACG元数据最全面，支持番剧、游戏双类型
AniList	国际向动漫追踪	覆盖全球动漫资源，适配海外用户需求
Simkl	综合影视追踪	支持番剧、电影、电视剧多内容类型

2.2 三大内容类型，一站式展示ACG资源

插件不仅支持追番，还能覆盖追剧、游戏场景，满足二次元爱好者全维度展示需求：

追番（bangumi）：核心功能，覆盖动画、番剧等内容，同步观看进度与详情。
追剧（cinema）：支持电视剧、电影数据同步，适配多数据源展示需求。
游戏（game）：仅支持Bangumi数据源，展示个人游戏收藏与游玩进度。

2.3 极致展示体验，兼顾美观与性能

插件内置多项优化功能，既保证页面美观，又兼顾加载速度与兼容性：

进度条可视化：直观展示观看进度（如“8/12集”），追番状态一目了然。
图片懒加载：首屏加载速度提升50%+，滚动至对应区域再加载图片，优化页面性能。
响应式布局：自动适配电脑、平板、手机等设备，保证不同终端展示效果一致。
Webp格式优化：自动调用Webp图片格式，体积较JPG小30%-60%，加载更快。
图片镜像防403：解决B站封面防盗链问题，配置镜像后可正常加载所有封面图。

三、Hexo博客快速上手教程（零基础也能搞定）

3.1 插件安装（npm一键安装）

进入Hexo博客根目录，执行以下命令安装插件：

npm install hexo-bilibili-bangumi --save

3.2 基础配置（_config.yml文件设置）

在Hexo站点根目录的_config.yml文件中添加以下配置，按需调整参数：

bangumi:
  # 追番模块核心设置
  enable: true          # 是否启用追番功能
  source: bili          # 数据源：bili/bgmv0/bangumi/anilist/simkl
  path: bangumis/index.html  # 生成页面路径，访问时对应博客地址/bangumis/
  vmid: 你的用户ID      # 对应数据源的用户ID（B站UID/ Bangumi用户名等）
  title: '我的追番列表' # 页面标题，可自定义
  quote: '生命不息，追番不止！' # 页面引言，增加二次元氛围
  show: 1               # 展示状态：0=想看，1=在看，2=看过
  lazyload: true        # 是否开启图片懒加载
  progress: true        # 是否显示观看进度条

3.3 数据更新与页面生成

配置完成后，执行对应命令更新数据并生成页面，步骤如下：

更新追番数据：hexo bangumi -u（若需显示B站追番进度，添加SESSDATA：hexo bangumi -u '你的SESSDATA'）
更新追剧数据：hexo cinema -u
更新游戏数据：hexo game -u
生成博客页面：hexo generate（简写：hexo g）

生成后，访问你的博客地址/bangumis/，即可看到专属追番列表页面。

3.4 快速获取各平台用户ID

B站UID获取：登录B站 → 进入个人空间 → 网址末尾的数字即为UID（需将追番列表设为公开，否则无法同步数据）。
Bangumi用户名获取：登录Bangumi → 按F12打开浏览器控制台 → 输入代码 document.getElementById('header').getElementsByTagName('a')[0].getAttribute('href').split('/').at(-1) → 执行后返回的结果即为用户名。

四、进阶配置：优化展示效果与兼容性

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

B站封面存在防盗链机制，直接加载可能出现403错误，添加以下配置即可解决：

bangumi:
  coverMirror: 'https://image.baidu.com/search/down?url=' # 配置镜像地址

推荐常用镜像服务（按需选择）：

百度镜像：https://image.baidu.com/search/down?url=（单图限5MB内）
Weserv镜像：https://images.weserv.nl/?url=（稳定性强，支持多格式）
雪花镜像：https://pic1.xuehuaimg.com/proxy/（适配ACG图片场景）

4.2 手动添加数据（补充插件未同步内容）

若部分番剧/游戏未被数据源覆盖，可手动添加数据至 source/_data/extra_bangumis.json 文件（无该文件可自行创建），示例如下：

{
  "watchedExtra": [
    {
      "title": "番剧标题",
      "type": "番剧",
      "cover": "封面图片链接",
      "totalCount": "全12话",
      "des": "番剧简介，可自定义描述内容",
      "status": "看过", // 状态：想看/在看/看过
      "progress": "12/12" // 观看进度
    }
  ]
}