Evin

如何添加要追的剧

Mon, 13 Jul 2026 00:00:00 GMT

本站的「追剧」页面位于 /anime/，目前是一个单卡片入口：展示一部推荐剧集（封面、标题、来源标签），点击整张卡片即跳转到 iyf.tv 对应的播放页。
卡片内容由文件 src/pages/anime.astro 顶部脚本里的 featuredDrama 对象决定。要「添加/更换要追的剧」，本质就是改这个对象。

一、你需要准备的两个信息#

信息	说明	示例
剧集链接 (`cover`)	iyf.tv 上该电视剧的播放页地址	`https://www.iyf.tv/play/YbbTMTCTNL7`
封面图地址 (`coverImage`)	iyf.tv 上该剧海报图片的完整 URL	`https://static.iyf.tv/upload/video/202604091112181251873.jpg`

二、获取这两个信息#

1. 剧集链接#

打开 iyf.tv，搜索你要追的剧，进入它的播放页，复制浏览器地址栏里的 URL 即可（形如 https://www.iyf.tv/play/XXXX）。

2. 封面图地址（两种方法）#

方法 A：浏览器开发者工具（适合本地调试）

在播放页按 F12 打开 DevTools → 切换到 Elements（元素） 面板
找到封面图所在的 <img> 标签（类名通常含 ng-star-inserted）
复制它的 src 属性值，即为封面图完整地址（https://static.iyf.tv/... 开头）

方法 B：抓取 og（无需手动找）

直接抓取页面 HTML 头部的 <meta property="og:image"> 标签，它记录的就是标准封面图地址。例如用任意网页抓取工具请求播放页，取 og:image 的值即可：

1
https://static.iyf.tv/upload/video/202604091112181251873.jpg

三、修改配置文件#

打开 src/pages/anime.astro，定位到顶部 featuredDrama 对象，按如下字段修改：

1
const featuredDrama = {
2
  title: "妻子的浪漫旅行 2026",                          // 卡片标题
3
  subtitle: "综艺 / 2026",                               // 标题下方的副信息
4
  cover: "https://www.iyf.tv/play/YbbTMTCTNL7",          // 点击卡片跳转的链接
5
  coverImage: "https://static.iyf.tv/upload/video/202604091112181251873.jpg", // 封面图
6
  tag: "追剧",                                            // 左上角标签文字
7
  rating: null,                                           // 右上角评分（留 null 不显示）
8
  source: "iyf.tv",                                       // 左下角来源标签
9
};

字段	作用	备注
`title`	卡片主标题	直接显示
`subtitle`	标题下方小字	如 `综艺 / 2026`
`cover`	整张卡片的跳转链接	新标签页打开
`coverImage`	封面图 URL	必须是 `static.iyf.tv` 的完整地址
`tag`	左上角标签	默认「追剧」
`rating`	右上角评分	设为数字（如 `8.5`）才显示，否则 `null`
`source`	左下角来源标签	默认「iyf.tv」

四、本地预览#

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

Terminal window

1
pnpm build && pnpm preview --port 4321

浏览器打开 http://localhost:4321/anime/（强制刷新 Cmd + Shift + R），确认封面、标题、链接都正确。

提示：/anime/ 是生产构建预览（astro preview 直接服务 dist/），和线上部署效果一致。若只想快速看草稿效果，可用 astro dev（默认 4321 端口，开发模式）。

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

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

准备#

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

方式 A：手动上传（适合偶尔更新）#

本地构建，生成 dist/：
Terminal window
```
1
pnpm build
```
宝塔面板 → 文件，进入网站根目录 /www/wwwroot/你的域名/
清空旧文件（注意保留宝塔生成的 .user.ini 等配置文件），把本地 dist/ 内全部内容（含子目录、404.html 等）上传进去
浏览器访问域名即看到更新

方式 B：宝塔 Git + WebHook 自动部署（适合频繁更新）#

宝塔安装「宝塔 WebHook」插件（或在「计划任务」里用 Shell 脚本定时/触发拉取）
服务器上 git clone 仓库，进入目录执行 pnpm install && pnpm build
配置 WebHook 脚本：收到 push 后自动 git pull && pnpm install && pnpm build，并把 dist/ 复制/软链到网站根目录
站点运行目录指向 dist/（或软链目标）
本地 git push 后，宝塔自动拉取并重新构建上线

提示：Astro 默认 base 为 /，可直接放站点根目录；若部署到子目录，需同步配置 astro.config.mjs 的 base。

小结#

复制 iyf.tv 播放页链接 → cover
抓取 static.iyf.tv 封面图 URL → coverImage
改 src/pages/anime.astro 的 featuredDrama
pnpm build && pnpm preview 本地验证
将 dist/ 上传到宝塔网站根目录（手动上传或宝塔 Git 自动部署）上线

目前页面只展示单部推荐剧集（/anime/）。若想维护一个多部剧集的列表页（分类标签 + 状态筛选 + 卡片网格），请改用「追剧计划」页面 /bangumi/，操作方式见《如何往「追剧计划」批量添加剧集》。

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

Mon, 13 Jul 2026 00:00:00 GMT

本站的「追剧计划」页面位于 /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 数组语法）。

六、本地预览#

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

Terminal window

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 自动部署）上线

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

文章模板（复制此文件开始写作）

Mon, 13 Jul 2026 00:00:00 GMT

这是一篇模板文章。复制本文件、修改顶部 --- 之间的 frontmatter 与下方正文，即可开始写作。写完确认无误后，把 draft 改为 false 即可发布到线上。详细说明见仓库 docs/如何发布文章.md。

标题示例#

正文使用标准 Markdown 语法。下面是本站常用的几种写法。

代码块（带语法高亮）#

1
// Unity 中获取组件示例
2
using UnityEngine;
3

4
public class Hello : MonoBehaviour
5
{
6
    void Start()
7
    {
8
        Debug.Log("Hello from Evin's blog!");
9
    }
10
}

图片#

把图片放到与本文件同级的 images/ 目录，然后这样引用（image 封面图同理）：

1
![示意图](./images/你的图.avif)

注意：上面的写法只是示例语法，并不会真的渲染图片（本模板未附带图片文件）。你现在看到的这段文字就是用来演示「如何写图片引用」的。

列表与引用#

支持无序列表
支持加粗与斜体

这是一段引用。

表格#

字段	必填	说明
title	是	文章标题
published	是	发布日期，格式 `YYYY-MM-DD`

发布流程与格式要求请参考 docs/如何发布文章.md。