开发 3 · 换主题色与改首页

你现在在哪,这章解决什么

想给站换个配色、改改首页话术、或者给文章挂个新数据字段——这章是这三件事的固定套路。查询手册:需要哪件翻哪节。

需求一:换主题色(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 验证。铁律:字段只加不改名——改名等于废掉全站旧文章。加完字段,把字段规则写进产页提示词的【要求】段,AI 就会一直带上它。

卡住了怎么办

• 「换了颜色有些地方没变」:八成只换了 4 行没换 8 行,或漏了 .dark 那套。
• 「改了文案首页没变化」:确认改的是 home.* 段且保存了;跑 pnpm dev 刷新看看。
• 「文案一改布局就乱」:新文案太长了,让 AI 按原长度重写。

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

• ☐ 换主题色:亮/暗两种模式检查过,文字色没残留旧色
• ☐ 改文案:pnpm build 全绿,首页布局没被撑破

下一步

广告、评论、统计这些功能开关在哪、怎么开——开发 4 · 功能开关总表。