astro-bangumi：为Astro博客添加追番页面

1
npm install astro-bangumi

1
import { defineConfig } from 'astro/config';
2
import bangumi from 'astro-bangumi';
3

4
export default defineConfig({
5
  integrations: [
6
    bangumi({
7
      vmid: '你的B站UID',  // 必填
8
      title: '追番列表',
9
      quote: '生命不息，追番不止！',
10
    })
11
  ]
12
});

1
---
2
import Bangumi from 'astro-bangumi/Bangumi';
3
import BaseLayout from '../layouts/BaseLayout.astro';
4
---
5

6
<BaseLayout title="追番列表">
7
  <Bangumi />
8
</BaseLayout>

1
bangumi({
2
  source: 'bili',
3
  vmid: '你的B站UID',  // 在B站个人主页URL中获取
4
  category: [1, 2],    // 1=番剧, 2=影视
5
})

1
bangumi({
2
  source: 'bgmv0',
3
  vmid: '你的Bangumi用户名',  // 支持用户名或用户ID
4
  showMyComment: true,        // 显示个人评论和评分
5
})

1
{
2
  "want": [
3
    {
4
      "id": "local_001",
5
      "title": "自定义番剧名称",
6
      "cover": "https://example.com/cover.jpg",
7
      "url": "https://bgm.tv/subject/12345",
8
      "status": 1,
9
      "total": 12,
10
      "progress": 0,
11
      "score": 8.5,
12
      "desc": "简介内容",
13
      "airDate": "2024-01-01",
14
      "type": "TV",
15
      "follow": 10000
16
    }
17
  ],
18
  "watching": [],
19
  "watched": []
20
}

1
bangumi({
2
  source: 'bgmv0',
3
  vmid: '你的Bangumi用户名',
4
  localDataPath: './bangumi-local.json',
5
  extraOrder: 1,  // 1=本地数据优先显示
6
})

1
bangumi({
2
  localDataPath: './bangumi-local.json',
3
  title: '我的追番列表',
4
  // 不配置 vmid，只使用本地数据
5
})

1
<Bangumi
2
  title="我的追番"
3
  quote="追番使我快乐"
4
  show={1}                    // 默认显示的标签页：0=想看, 1=在看, 2=看过
5
  categoryFilter="1"          // 分类筛选：'all'=全部, '1'=番剧, '2'=影视
6
  lazyload={true}             // 启用图片懒加载
7
  darkSelector="html.dark"    // 暗色模式选择器
8
/>

1
.bangumi-container {
2
  --bangumi-bg: #ffffff;
3
  --bangumi-bg-secondary: #f4f4f4;
4
  --bangumi-text: #333333;
5
  --bangumi-text-secondary: #666;
6
  --bangumi-primary: #00a1d6;
7
  --bangumi-border: #eeeeee;
8
  --bangumi-shadow: rgba(0,0,0,0.1);
9
}
10

11
/* 暗色模式 */
12
.bangumi-container.dark {
13
  --bangumi-bg: #1a1a1a;
14
  --bangumi-bg-secondary: #2a2a2a;
15
  --bangumi-text: #e0e0e0;
16
  --bangumi-primary: #00a1d6;
17
}

1
<!-- 当 html 元素没有 theme='dark' 属性时为暗色模式 -->
2
<Bangumi darkSelector="html:not([theme='dark'])" />
3

4
<!-- 当 html 元素包含 dark 类时为暗色模式 -->
5
<Bangumi darkSelector="html:not(.dark)" />

1
bangumi({
2
  coverMirror: 'https://your-image-proxy.com/?url='
3
})

1
bangumi({
2
  vmid: '你的B站UID',
3
  refreshEndpoint: '/api/my-refresh',  // 自定义路径
4
  // refreshEndpoint: false,           // 禁用刷新端点
5
})