如何添加要追的剧

本站的「追剧」页面位于 /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」

四、本地预览#

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

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/，操作方式见《如何往「追剧计划」批量添加剧集》。

音乐

翻译本页

音乐