如何往「追剧计划」批量添加剧集

本站的「追剧计划」页面位于 /bangumi/，是一个多卡片列表：顶部是分类标签栏（全部 / 电视剧 / 电影 / 动漫，带数量），下方是状态筛选行（全部 / 看过 / 在看 / 想看），主体是剧集卡片网格。
所有剧集数据来自文件 src/pages/bangumi.astro 顶部脚本里的 dramaList 数组。要「添加剧集」，本质就是往这个数组里追加对象。分类数量和状态数量的角标会自动计算，无需手动维护。

一、了解数据在哪里#

打开 src/pages/bangumi.astro，在 --- 脚本区找到 dramaList 数组（就在 interface DramaItem 定义之后）：

1
const dramaList: DramaItem[] = [
2
  {
3
    id: "1",
4
    title: "妻子的浪漫旅行 2026",
5
    cover: "https://static.iyf.tv/upload/video/202604091112181251873.jpg",
6
    year: 2026,
7
    rating: 0,
8
    status: "watching",
9
    category: "tv",
10
    tags: ["综艺", "真人秀"],
11
    url: "https://www.iyf.tv/play/YbbTMTCTNL7",
12
  },
13
  // 继续添加更多剧集...
14
];

二、每个字段的含义#

每部剧是一个 DramaItem 对象，字段如下：

字段	类型	说明	可选值
`id`	`string`	唯一标识，不能重复	任意字符串，如 `"1"`、`"2"`
`title`	`string`	剧名，显示在封面底部	—
`cover`	`string`	封面图 URL	建议用 iyf.tv 的 `static.iyf.tv/...` 地址
`year`	`number`	年份，显示在卡片下方	如 `2026`
`rating`	`number`	评分 0–10	设为 `0` 则不显示评分星
`status`	`string`	观看状态，决定左上角标签颜色和文案	`wish` / `watching` / `watched`
`category`	`string`	所属分类，决定归入哪个分类标签	`tv` / `movie` / `anime`
`tags`	`string[]`	类型标签数组，显示在卡片底部	如 `["纯爱", "校园"]`
`url`	`string`	点击卡片跳转的链接	iyf.tv 播放页或其他

状态 → 标签颜色 / 文案对照#

`status`	左上角标签	颜色
`"wish"`	想看	蓝色 `bg-blue-500`
`"watching"`	在看	黄色 `bg-yellow-500`
`"watched"`	看过	绿色 `bg-green-500`

分类 → 标签对照#

`category`	分类标签
`"tv"`	电视剧
`"movie"`	电影
`"anime"`	动漫

三、获取封面图地址#

打开 iyf.tv 找到目标剧，进入播放页：

方法 A（DevTools）：F12 → Elements 面板 → 找封面 <img>（类名常含 ng-star-inserted）→ 复制 src（形如 https://static.iyf.tv/upload/video/...jpg）
方法 B（og）：抓页面 HTML 头部 <meta property="og:image"> 的值，即为标准封面地址

详细步骤见《如何添加要追的剧》。

四、添加单部剧集#

在 dramaList 数组里，在最后一个对象之后加一个逗号，然后追加新对象：

1
{
2
  id: "2",
3
  title: "示例动漫",
4
  cover: "https://static.iyf.tv/upload/video/示例.jpg",
5
  year: 2025,
6
  rating: 8.3,
7
  status: "wish",      // 想看（蓝标）
8
  category: "anime",   // 动漫
9
  tags: ["纯爱", "校园", "恋爱"],
10
  url: "https://www.iyf.tv/play/示例ID",
11
},

保存后，分类标签和状态筛选的角标会自动重新统计——例如新增一部 category: "anime" 的剧，「动漫」标签数量 +1；status: "wish" 的剧会让「想看」筛选数量 +1。无需手动改任何计数代码。

五、批量添加多部剧集#

直接一次往数组里追加多个对象即可，例如：

1
const dramaList: DramaItem[] = [
2
  {
3
    id: "1",
4
    title: "妻子的浪漫旅行 2026",
5
    cover: "https://static.iyf.tv/upload/video/202604091112181251873.jpg",
6
    year: 2026,
7
    rating: 0,
8
    status: "watching",
9
    category: "tv",
10
    tags: ["综艺", "真人秀"],
11
    url: "https://www.iyf.tv/play/YbbTMTCTNL7",
12
  },
13
  {
14
    id: "2",
15
    title: "繁花",
16
    cover: "https://static.iyf.tv/upload/video/flower.jpg",
17
    year: 2024,
18
    rating: 8.5,
19
    status: "watched",
20
    category: "tv",
21
    tags: ["剧情", "年代"],
22
    url: "https://www.iyf.tv/play/xxx2",
23
  },
24
  {
25
    id: "3",
26
    title: "你的名字。",
27
    cover: "https://static.iyf.tv/upload/video/kiminona.jpg",
28
    year: 2016,
29
    rating: 9.0,
30
    status: "watched",
31
    category: "anime",
32
    tags: ["治愈", "恋爱", "奇幻"],
33
    url: "https://www.iyf.tv/play/xxx3",
34
  },
35
  {
36
    id: "4",
37
    title: "星际穿越",
38
    cover: "https://static.iyf.tv/upload/video/interstellar.jpg",
39
    year: 2014,
40
    rating: 9.4,
41
    status: "wish",
42
    category: "movie",
43
    tags: ["科幻", "剧情"],
44
    url: "https://www.iyf.tv/play/xxx4",
45
  },
46
];

提示：

id 保持唯一即可，不要求连续。

不需要的剧直接删掉整个 { ... } 对象（连同后面的逗号），计数会自动减少。

想隐藏某部剧但不删除，可临时把它的 status 改成不常用的状态，或注释掉该对象（注意 Ts 数组语法）。

六、本地预览#

改完后在项目根目录执行：

1
pnpm build && pnpm preview --port 4321

浏览器打开 http://localhost:4321/bangumi/（强制刷新 Cmd + Shift + R），确认：

卡片封面、标题、年份、类型标签显示正常
顶部分类标签数量与状态筛选数量已自动更新
点击分类 / 状态按钮，卡片能正确过滤

若只想快速看草稿效果，可用 astro dev（默认 4321 端口，开发模式）热更新更方便。

七、发布上线（腾讯云宝塔 Linux 面板）#

本站是纯静态站点（pnpm build 的产物在 dist/ 目录），部署到宝塔只需上传 dist/ 到网站根目录。

准备#

宝塔面板已创建站点（如 你的域名），记下根目录（通常 /www/wwwroot/你的域名/）
站点已绑定域名，Web 服务由宝塔自动处理

方式 A：手动上传#

本地构建：pnpm build
宝塔 → 文件 → 进入网站根目录
清空旧文件（保留 .user.ini 等宝塔配置），把本地 dist/ 全部内容上传进去
访问域名即生效

方式 B：宝塔 Git + WebHook 自动部署#

宝塔安装「宝塔 WebHook」插件
服务器 git clone 仓库，执行 pnpm install && pnpm build
配置 WebHook 脚本：git pull && pnpm install && pnpm build 并把 dist/ 复制到根目录
本地 git push 后宝塔自动拉取并重建上线

小结#

复制 iyf.tv 播放页链接 → 填进 url
抓取 static.iyf.tv 封面图 URL → 填进 cover
在 src/pages/bangumi.astro 的 dramaList 数组追加一个 DramaItem 对象
设置 status（wish/watching/watched）与 category（tv/movie/anime）
pnpm build && pnpm preview 本地验证，确认计数自动更新
将 dist/ 上传宝塔根目录（手动或 Git 自动部署）上线

分类与状态的角标数量由代码在构建时自动统计，你只管往数组里加对象，不用碰计数逻辑。

音乐

翻译本页

音乐