hexo-bilibili-bangumi
💡 介绍
为 Hexo 博客添加追番/追剧页面。
- ✨ 支持多个数据源（哔哩哔哩、Bangumi、AniList、Simkl）
- 🎨 支持自定义样式
- 🚀 支持图片懒加载
- 📊 支持进度展示
- 🔄 支持数据自动更新
- 📱 响应式设计
- 🖼️ 支持图片镜像缓存
- 📄 支持手动添加数据
效果预览
| 亮色模式 |
暗色模式 |
 |
 |
📦 安装
npm install hexo-bilibili-bangumi --save
⚙️ 配置
基础配置
将以下配置写入站点的配置文件 _config.yml 中（不是主题的配置文件）：
bangumi: # 追番设置
enable: true # 是否启用
source: bili # 数据源
path: bangumis/index.html # 页面路径
vmid: # 用户ID
title: '追番列表' # 页面标题
quote: '生命不息，追番不止！' # 页面引言
theme: auto # 页面主题: light=亮色, dark=暗色, auto=跟随系统
show: 1 # 初始显示页面: 0=想看, 1=在看, 2=看过
lazyload: true # 是否启用图片懒加载
metaColor: # meta 信息字体颜色
color: # 简介字体颜色
webp: true # 是否使用 webp 格式图片
progress: true # 是否显示进度条
swup: false # 是否启用swup兼容，需要主题支持
...
cinema: # 追剧设置
enable: true # 是否启用
source: bili
...
game: # 游戏设置，仅支持source: bgmv0
enable: true # 是否启用
source: bgmv0
...
详细配置
bangumi: # 追番设置
enable: true
source: bili
bgmInfoSource: 'bgmv0'
path:
vmid:
title: '追番列表'
quote: '生命不息，追番不止！'
theme: auto
show: 1
lazyload: true
srcValue: '__image__'
# lazyloadAttrName: 'data-src=__image__' # 已弃用
# loading: 已弃用
swup: false
showMyComment: false
pagination: false
metaColor:
color:
webp:
progress:
progressBar:
extraOrder:
order: latest
proxy:
host: '代理host'
port: '代理端口'
extra_options:
key: value
coverMirror:
cinema: # 追剧设置
enable: true
path:
vmid:
title: '追剧列表'
quote: '生命不息，追剧不止！'
theme: auto
show: 1
lazyload: true
srcValue: '__image__'
swup: false
metaColor:
color:
webp:
progress:
progressBar:
extraOrder:
order:
extra_options:
key: value
coverMirror:
game: # 游戏设置，仅支持source: bgmv0
enable: true
path:
source: bgmv0
vmid:
title: '游戏列表'
quote: '生命不息，游戏不止！'
theme: auto
show: 1
lazyload: true
srcValue: '__image__'
swup: false
metaColor:
color:
webp:
progress:
progressBar:
extraOrder:
order:
extra_options:
key: value
coverMirror:
详细参数说明
基础参数
| 参数名 |
类型 |
默认值 |
说明 |
| enable |
boolean |
false |
是否启用该功能 |
| source |
string |
‘bili’ |
数据源选择。bili: 哔哩哔哩源, bgmv0: Bgm Api源(api.bgm.tv), bangumi: Bangumi源(bangumi.tv), bgm: Bangumi源(bgm.tv), anilist: AniList源, simkl: Simkl源 |
| path |
string |
‘bangumis/index.html’ |
生成页面的路径 |
| vmid |
string/number |
- |
用户Id。如何获取 |
| title |
string |
‘追番列表’ |
页面标题 |
| quote |
string |
‘生命不息，追番不止！’ |
页面顶部的引言，支持HTML |
| theme |
string |
‘auto’ |
页面颜色主题：light: 亮色，dark: 暗色，auto: 跟最主题（仅支持通过[data-theme="dark"]实现暗色模式的主题） |
显示控制
| 参数名 |
类型 |
默认值 |
说明 |
| show |
number |
1 |
初始显示的内容类型：0=想看，1=在看，2=看过 |
| lazyload |
boolean |
true |
是否启用图片懒加载，可避免首次加载时间过长 |
| srcValue |
string |
‘__image__’ |
设置封面图的默认src值，__image__为封面链接，__loading__为loading图片链接 |
| metaColor |
string |
- |
meta信息的字体颜色，支持CSS颜色值（如’#FFFFFF’） |
| color |
string |
- |
简介文字的字体颜色 |
| swup |
boolean |
false |
是否启用swup兼容，需要主题支持 |
图片处理
| 参数名 |
类型 |
默认值 |
说明 |
| webp |
boolean |
true |
是否使用webp格式图片（仅支持哔哩哔哩源，可大幅减小图片体积） |
| coverMirror |
string |
- |
封面图片镜像服务地址，用于解决防盗链、跨域等问题(图片镜像服务) |
进度显示
| 参数名 |
类型 |
默认值 |
说明 |
| progress |
boolean |
true |
是否显示数据获取进度条 |
| progressBar |
boolean |
true |
是否在追番页面显示观看进度条（仅支持bili和bgmv0源） |
数据处理
| 参数名 |
类型 |
默认值 |
说明 |
| pagination |
boolean |
false |
是否启用分页优化，建议番剧数量较多时启用 |
| order |
string |
- |
排序方式：score=评分升序，-score=评分降序 ，其他=默认顺序 |
| extraOrder |
number |
- |
手动添加数据的显示顺序：1=优先显示，其他=默认顺序 |
| showMyComment |
boolean |
false |
是否显示个人评论（仅支持bgm、anilist源） |
| skipNsfw |
boolean |
false |
是否显示nsfw内容（仅支持bangumi源） |
代理设置
| 参数名 |
类型 |
默认值 |
说明 |
| proxy.host |
string |
- |
代理服务器地址 |
| proxy.port |
number |
- |
代理服务器端口 |
扩展选项
| 参数名 |
类型 |
默认值 |
说明 |
| extra_options |
object |
- |
扩展配置，会被注入到Hexo的page变量中 |
| bgmInfoApi |
string |
‘bgmApi’ |
Bangumi信息源：bgmApi: Bangumi Api, bgmSub: Bangumi-Subject |
图片镜像服务
当遇到图片加载失败（403错误）或加载缓慢时，可以配置 coverMirror 使用镜像服务：
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/ # 雪花镜像
https://search.pstatic.net/common?src= # Naver镜像
🚀 使用方法
更新数据
在生成或部署博客之前，需要更新追番/追剧数据：
# 更新追番数据
hexo bangumi -u
# 使用 bili 源时显示追番进度（需要 SESSDATA）
hexo bangumi -u 'your_sessdata_here'
# 更新追剧数据
hexo cinema -u
# 更新游戏数据
hexo game -u
删除数据
# 删除追番数据
hexo bangumi -d
# 删除追剧数据
hexo cinema -d
# 删除游戏数据
hexo game -d
📝 手动添加数据
在 source/_data/ 目录下创建 extra_bangumis.json（追番）或 extra_cinemas.json（追剧）：
{
"watchedExtra": [
{
"title": "番剧标题",
"type": "番剧",
"area": "日本",
"cover": "封面图片链接",
"totalCount": "全12话",
"link": "https://example.com/xxx",
"des": "简介内容..."
}
]
}
可用数组名：
wantWatchExtra: 想看watchingExtra: 在看watchedExtra: 看过
🔍 获取用户 ID
哔哩哔哩 UID
- 登录 哔哩哔哩
- 访问 个人空间
- 网址最后的数字即为 UID
- 注意： 需要将追番列表设为公开
Bangumi 用户名
- 登录 Bangumi
- 打开控制台 (Ctrl + Shift + J)
- 输入：
document.getElementById('header').getElementsByTagName('a')[0].getAttribute('href').split('/').at(-1)
Bangumi 用户 ID
- 登录 Bangumi
- 打开控制台 (Ctrl + Shift + J)
- 输入：
CHOBITS_UID
AniList ID
- 登录 AniList
- 打开控制台 (Ctrl + Shift + J)
- 输入：
JSON.parse(window.localStorage.getItem('auth')).id
Simkl Token
- 登录 Simkl
- 创建一个App: https://simkl.com/settings/developer/new/
Name和Description随便填，Redirect URI填写127.0.0.1- 创建App后记住
Client ID和Client Secret
- 打开
https://simkl.com/oauth/authorize?response_type=code&client_id={your_client_id}&redirect_uri=http://127.0.0.1，注意把{your_client_id}改成你的Client ID
- 授权后会跳转到
127.0.0.1/?code=your_code，记住your_code
- 打开
https://simkl.docs.apiary.io/#reference/authentication-oauth-2.0/exchange-code-for-access_token?console=1，找到右侧的Body并点击。修改如下
{
"code" : "你的code",
"client_id" : "你的Client ID",
"client_secret" : "你的Client Secret",
"redirect_uri" : "127.0.0.1",
"grant_type" : "authorization_code"
}
- 修改后点击右下角的
Call Resource按钮，然后拉到最下面，右下角找到"access_token": "your_token",，记住your_token
vmid填入{your_client_id}-{your_token}，{your_client_id}替换为App的Client ID，{your_token}替换为上一步得到的your_token
🎨 主题适配
- Fork 本项目并克隆到本地
- 安装依赖：
npm install
- 在
src/lib/templates/theme/ 添加主题样式文件
- 运行
npm run build
- 提交 PR
📄 开源协议
Apache License 2.0
![dependabot[bot]](https://avatars.githubusercontent.com/in/29110?v=4)
![dependabot-preview[bot]](https://avatars.githubusercontent.com/in/2141?v=4)
评论