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

对于 Hexo 搭建个人博客的二次元博主而言，在博客中展示专属追番 / 追剧 / 游戏列表，是提升博客个性化与 “二次元浓度” 的绝佳方式。但传统维护方式要么手动更新数据滞后，要么 iframe 嵌入破坏页面美观，还存在自建爬虫易失效的风险。

今天给大家推荐一款 GitHub 星标超 500 + 的宝藏插件 ——hexo-bilibili-bangumi，它完美解决所有痛点，支持一键同步 B 站、Bangumi、AniList、Simkl 等多平台数据，自动生成高颜值、高性能的展示页面，让你只需安心追番，数据与页面更新全交给插件，成为 Hexo 二次元博主必备工具！

一、核心痛点：传统追番列表展示方案的劝退理由

很多 Hexo 博主在博客中展示追番记录时，都会被以下三大问题劝退：

1. 手动维护成本极高：每观看一集、新增一部番剧 / 剧集，都需手动修改博客代码或配置，不仅繁琐耗时，还极易遗漏更新，导致展示数据与实际观看进度脱节。
2. iframe 嵌入体验拉胯：直接嵌入第三方平台的追番列表 iframe，样式无法自定义，与博客主题风格割裂，破坏页面整体视觉统一性，还会影响页面加载速度。
3. 自建爬虫风险高、难维护：自行开发爬虫对接平台 API，需耗费大量时间与精力；且平台接口频繁迭代更新，极易导致爬虫失效，后续维护成本无限攀升。

hexo-bilibili-bangumi 插件的核心优势，就是彻底摒弃这些低效方案，实现 “自动化同步 + 高颜值展示” 的双重体验，零手动维护，轻松打造专属博客追番页面！

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

这款插件之所以能成为二次元博主首选，核心在于其多源适配、全场景覆盖、极致性能三大核心亮点，兼顾实用性与美观性。

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

插件支持国内外主流 ACG 及影视追踪平台，可根据自身使用习惯灵活切换数据源，兼顾国内主流、专业数据库、国际资源三大场景：

表格

数据源	适用场景	核心优势
哔哩哔哩（bili）	国内日常追番、追剧	使用门槛最低，支持实时同步 B 站追番 / 追剧进度，数据更新快
Bangumi（bgm/bgmv0）	专业 ACG 爱好者、番剧深度玩家	元数据最全面，支持番剧、游戏双类型同步，细节丰富
AniList	国际向动漫爱好者、海外博主	覆盖全球动漫资源库，适配海外用户访问需求，支持多语言
Simkl	综合影视爱好者	支持番剧、电影、电视剧多类型内容同步，适用场景更广

2.2 三大内容类型，一站式展示 ACG 全维度

插件不止能同步追番数据，还能覆盖追剧、游戏三大核心场景，满足二次元爱好者全维度内容展示需求，打造专属个人 ACG 档案：

• 追番（bangumi）：核心功能，覆盖动画、番剧、OVA 等内容，同步观看进度、剧集信息、封面图等全维度数据。
• 追剧（cinema）：支持电影、电视剧等影视内容同步，适配多数据源，轻松展示影视收藏清单。
• 游戏（game）：仅支持 Bangumi 数据源，可展示个人游戏收藏、游玩进度，兼顾二次元游戏玩家需求。

2.3 极致展示体验，美观与性能双在线

插件在页面展示上做了多重优化，既保证视觉效果统一协调，又提升页面加载速度，适配不同终端设备：

• 进度条可视化：直观展示每部作品的观看进度（如 “8/12 集”“全 12 话”），追番 / 追剧状态一目了然，无需点开详情即可掌握进度。
• 图片懒加载优化：首屏加载速度提升 50%+，仅当滚动至对应区域时加载番剧封面图，减少初始加载资源，提升页面打开速度。
• 响应式布局：自动适配电脑、平板、手机等各类终端设备，保证在不同屏幕尺寸下，展示效果一致、交互体验流畅。
• Webp 格式智能调用：自动使用 Webp 格式加载图片，相比传统 JPG 格式体积缩小 30%-60%，进一步降低页面加载耗时。
• 镜像防 403 机制：内置 B 站封面防盗链解决方案，配置镜像地址后，可正常加载所有番剧封面，避免出现封面加载失败的 403 错误。

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

插件安装与配置流程极简，无需复杂技术基础，按照以下步骤操作，即可快速实现追番列表展示，新手也能一次成功。

3.1 插件安装（npm 一键安装，无需手动下载）

进入 Hexo 博客根目录（即存放_config.yml 文件的文件夹），在终端执行以下命令，一键安装插件：

bash

运行

npm install hexo-bilibili-bangumi --save

3.2 基础配置（修改_config.yml 文件，核心参数设置）

在 Hexo 站点根目录的_config.yml文件中，添加以下配置代码，可根据自身需求修改参数，注释已详细说明各配置项作用：

yaml

# hexo-bilibili-bangumi 追番插件配置
bangumi:
  enable: true          # 是否启用追番功能（必填，设为true开启）
  source: bili          # 数据源（必填，可选：bili/bgmv0/bangumi/anilist/simkl）
  path: bangumis/index.html  # 生成页面的访问路径（可选，默认生成在博客根目录/bangumis/）
  vmid: 你的用户ID      # 对应数据源的用户ID（必填，下文教你如何获取）
  title: '我的追番列表' # 页面标题（可选，自定义博客追番页面名称）
  quote: '生命不息，追番不止！' # 页面引言（可选，增加二次元专属氛围）
  show: 1               # 展示状态（可选，0=想看 1=在看 2=看过，默认展示在看）
  lazyload: true        # 是否开启图片懒加载（可选，建议开启提升加载速度）
  progress: true        # 是否显示观看进度条（可选，建议开启提升直观性）

3.3 数据更新与页面生成（一键生成专属页面）

配置完成后，执行以下命令，即可更新追番数据并生成博客页面，步骤简单，一键操作：

1. 更新追番数据：bash运行hexo bangumi -u ✨ 进阶：若需同步 B 站私密 / 仅自己可见的追番进度，需添加 SESSDATA 参数：bash运行hexo bangumi -u '你的B站SESSDATA'
2. 更新追剧数据（若选择同步影视内容）：bash运行hexo cinema -u
3. 更新游戏数据（若选择 Bangumi 数据源同步游戏）：bash运行hexo game -u
4. 生成博客静态页面：bash运行hexo generate # 简写：hexo g

✅ 完成后：访问你的博客地址 + /bangumis/（如https://你的博客域名/bangumis/），即可直接查看一键生成的专属追番列表页面！

3.4 快速获取各平台用户 ID（关键配置，必做）

不同数据源的用户 ID 获取方式不同，以下是最便捷的获取方法，新手也能快速找到：

1. B 站 UID 获取：登录 B 站 → 进入个人空间 → 浏览器地址栏网址末尾的数字即为 UID（例：https://space.bilibili.com/123456，123456 就是 UID）。⚠️ 注意：需将 B 站追番列表设置为公开，否则插件无法同步数据！
2. Bangumi 用户名获取：登录 Bangumi → 按F12打开浏览器开发者工具 → 切换到控制台（Console） → 输入以下代码并回车执行，返回的结果即为用户名：javascript运行document.getElementById('header').getElementsByTagName('a')[0].getAttribute('href').split('/').at(-1)

四、进阶配置：优化展示效果与兼容性（按需选择）

若想进一步优化追番页面的展示效果、解决常见问题，可添加以下进阶配置，适配个性化需求。

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

若插件加载 B 站封面时出现 403 错误（封面不显示），可在配置中添加镜像地址，推荐以下 3 个常用镜像服务，按需选择其一：

yaml

bangumi:
  # 其他基础配置保持不变
  coverMirror: 'https://images.weserv.nl/?url='  # 镜像地址（可选，推荐Weserv镜像，稳定性强）
  # 可选镜像地址参考：
  # 百度镜像：https://image.baidu.com/search/down?url= （单图限5MB内）
  # 雪花镜像：https://pic1.xuehuaimg.com/proxy/（适配ACG图片场景）

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

若部分番剧、剧集或游戏未被插件自动同步，可手动添加数据至source/_data/extra_bangumis.json文件（若不存在该文件，可手动创建），示例如下：

json

{
  "watchedExtra": [
    {
      "title": "番剧/剧集标题",
      "type": "番剧/电影/游戏",
      "cover": "封面图片链接",
      "totalCount": "全12话/全1季",
      "des": "自定义简介（可补充个人观看感受）",
      "status": "看过",  // 状态：想看/在看/看过
      "progress": "12/12"  // 观看进度
    }
  ]
}

五、插件总结与适用人群

核心价值

hexo-bilibili-bangumi 插件以 **“自动化同步 + 高颜值展示 + 高性能优化”** 为核心，彻底解决了 Hexo 博客展示追番数据的所有痛点。它无需手动维护、不破坏页面风格、适配多平台多场景，让二次元博主能轻松在博客中展示专属 ACG 内容，真正实现 “博客个性化与兴趣展示” 的完美结合。

适用人群

1. 使用 Hexo 搭建个人博客的二次元爱好者，日常追番 / 追剧 / 玩游戏的用户；
2. 希望提升博客个性化与二次元浓度，打造专属个人特色的博主；
3. 不想花费时间手动维护追番数据，追求高效便捷的博客内容更新者；
4. 需同步多平台 ACG / 影视数据，展示全维度个人兴趣档案的用户。

使用建议

新手优先选择B 站（bili）数据源，快速上手实现基础功能；熟悉插件配置后，可切换至Bangumi数据源，获取更全面的 ACG 元数据；若博客有海外访问需求，可选择AniList数据源，兼顾国际动漫资源覆盖。

插件 GitHub 官方地址：https://github.com/HCLonely/hexo-bilibili-bangumi，更多功能细节、更新日志及高级配置，可查看官方文档，持续解锁更多玩法！