主题与门面:换色的规矩和首页文案

先看一个真实场景

上一课的换皮命令已经按你给的色号把整站上了一遍色。什么时候还需要这一课:用了一周觉得颜色不对味、想调首页某句文案、或者好奇「为什么改个颜色要动 8 行」。这一课是选修——不感兴趣就直接去下一课写内容,站照常赚钱。

需求一:再换个主题色(5 分钟)

只改 src/styles/globals.css 顶部的 8 行(4 个变量 × 亮/暗两套):

:root { --brand: hsl(...); --brand-light: hsl(...); --brand-h: ...; --brand-s: ...%; }
.dark { --brand: hsl(...); --brand-light: hsl(...); --brand-h: ...; --brand-s: ...%; }

为什么必须 8 行一起换:文字安全色 --brand-text 是用 --brand-h(色相)和 --brand-s(饱和度)自动算出来的——只换前两个变量,文字色会残留旧色相,整站看起来「脏」。十六进制色号不会转 HSL?把色号丢给 AI 让它转,或重跑 pnpm apply-template 的换色步骤(8 行全自动)。改完亮色、暗色两种模式各看一眼对比度。

需求二:改首页文案

首页每一块文字(大标题、快速入口、精选、问答、更新日志)都住在语言 JSON 的 home.* 段——改文案不动任何组件代码。让 AI 出稿(整段复制,<> 换成你的):

改写首页文案。游戏:<游戏名>;卖点:<一句话>;目标玩家:<描述>。
只改 src/locales/ 的站点/首页文案字段(site.ts 与 home.*),不动组件代码;
每条给 3 个版本供我选,长度与现字段相近(避免破坏布局)。
选定后替换并运行 pnpm build 验证,全绿才算完成。

「长度相近」这条是故意的:首页排版按现有文字长度设计,文案突然翻倍会把布局撑破。

进阶:想给文章挂新的数据字段(比如新属性卡)?流程:src/content.config.ts 加 Zod 字段 → 组件消费 → pnpm build 验证。铁律:字段只加不改名——改名等于废掉全站旧文章。这条线走深了就进入开发手册的领域,等你有定制需求再翻。

三个经典错误(提前替你踩)

• 只换 4 行没换 8 行,或漏了 .dark 那套:部分页面颜色不对、暗色模式露旧色,八成是这个。
• 文案一改布局就乱:新文案太长。让 AI 按原长度重写,别手改。
• 顺手改了组件代码:首页文字全部来自语言 JSON,没有一句写在组件里——想改字却去改 .astro 文件,只会改坏。改字 = 改 JSON。

本课新词(就 3 个)

• CSS 变量:全站颜色共用的「色号插座」,--brand 一处改、整站生效。
• HSL:用色相(H)、饱和度(S)、亮度(L)描述颜色的写法——模板的自动文字色靠它计算。
• 亮/暗两套:同一个变量在 :root(亮色)和 .dark(暗色)各有一份,改色必须成对。

✅ 验收(按你做的需求勾选)

• ☐ 换主题色:亮/暗两种模式都检查过,文字色没残留旧色
• ☐ 改首页文案:pnpm build 全绿,布局没被撑破
• ☐ 或者:你决定跳过本课,直接去写内容(完全没问题)

阶段二毕业 + 下一课

到这里,阶段二完成:一个跑着的、完全属于你的站。选品(阶段一)、建站(阶段二)都是准备动作——下一站开始做这门生意真正的引擎:让 AI 帮你一天写出 10 篇能过质检的攻略页。去第 13 课 · 第一篇:玩一小时,写一篇能过质检的攻略