黄果漫剧 · 交付说明文档

本文件面向站点运营与后续维护者，说明页面结构、SEO 配置、数据维护方式与交付自检结果。

一、站点定位与视觉规范

站点名称：黄果漫剧（全站统一使用完整名称，不做简写或标签拆分）

站点标题：黄果漫剧 - 都市AI短剧免费看，漫画短篇完整版作品推荐

定位：竖屏短剧聚合与追剧站点，主打「竖屏手机意象」的追剧体验。

配色：朱砂红（primary）／墨黑（foreground，用于头部与页脚）／宣纸米色（background，用于页面与卡片底）。
头部与页脚统一使用墨黑底色 + 宣纸米色文字，形成高对比且风格统一的「上下一色」框架；内容区使用米色底 + 墨黑文字。

字体：标题使用 Noto Serif SC（衬线，古典气质），正文与按钮使用 Noto Sans SC。

路径	页面	核心内容
`/`	首页	顶部导航（6 入口 + 搜索）、首屏轮播、分类内容区、热门分类、新剧速递、人气榜、追剧专题、下载APP引导、页脚
`/categories`	热门分类	题材筛选、关键词搜索、卡片列表、分类说明
`/new`	新剧速递	今日/昨日/本周新剧切换、上新时间表、明日预告
`/ranking`	人气榜	日榜/周榜/总榜切换、题材筛选、TOP20 排行
`/topics`	追剧专题	6 个编辑专题卡片、专题内短剧预览
`/app`	下载APP	安卓/iOS 下载、二维码、功能亮点、三步指引、常见问题
`/drama/:id`	短剧详情	封面、简介、导演/主演/集数/热度、选集、同题材推荐、全站热门
`/topic/:slug`	专题详情	专题介绍、按顺序连看的短剧列表、其他专题

全站共 8 类页面、36 部短剧详情、6 个专题详情，所有卡片均可点击进入独立详情页。

每个页面都由页面级 SEO 组件输出独立的 title、description、keywords、canonical， OG（og:title／og:description／og:url／og:image）与 TDK 严格一致，切换页面时自动更新。

位于站点根目录：/robots.txt、/sitemap.xml。sitemap 收录首页、5 个频道页、6 个专题详情页与 36 个短剧详情页，共 48 条 URL。

若正式域名不同，请同时修改 public/robots.txt、public/sitemap.xml 与 src/utils/drama.ts 中的 siteUrl。

顶部 H1：每个页面顶部都有一个 <h1>，首页 H1 为站点标志 + 完整站点名称「黄果漫剧」；内页 H1 为页面主标题，页面内其余区块标题均使用 h2/h3，保证单 H1 结构。
页脚双标签：页脚中站点名称「黄果漫剧」放在独立标签内，站点标题「黄果漫剧 - 都市AI短剧免费看，漫画短篇完整版作品推荐」放在另一个独立标签内，两者互不包含、不拆分。
可访问性：所有图片均有 alt 与 title；导航、轮播按钮、筛选按钮均带 aria-label／aria-selected／aria-pressed；提供面包屑 nav 与「面包屑导航」标签。

文件	用途
`src/mocks/dramas.ts`	36 部短剧数据：剧名、题材、竖版封面、简介、集数、更新时间、热度、标签、导演、主演
`src/mocks/categories.ts`	五大热门题材：名称、标语、介绍、在架数量、配图
`src/mocks/topics.ts`	6 个追剧专题：专题名、情绪标签、介绍、关联短剧
`src/mocks/heroSlides.ts`	首页首屏轮播 4 张主视觉
`src/mocks/site.ts`	站点名称/标题/简介、联系方式、备案号、社交入口、导航项

新增短剧时，在 dramas.ts 追加一条数据即可自动出现在分类、上新、人气榜与相关推荐中；同时建议在 sitemap.xml 补一条对应 URL。