拿到一套 HTML 模板后，大多数人会直接开改：换 logo、改文案、删区块、加表单……然后上线当天发现：
- 手机端断版
- 样式全局污染
- 导航锚点失效
- SEO 信息没配，收录慢
- 性能指标（LCP/CLS）爆炸
这篇给你一套可照抄的模板修改 Playbook：目标不是“改得快”，而是“改得稳、能上线、可回滚”。
结论先说：模板修改的本质是“改动隔离 + 验收标准”
你想要的不是把页面“改成你想要的样子”，而是：
- 改动可追踪（哪改了）
- 改动可隔离（不影响其他页面/区块）
- 改动可验证（有验收标准）
- 失败可回滚（回到可用版本）
准备阶段：先做 3 件事再开始改（10 分钟救命）
1) 明确交付范围（范围闸门）
把需求写成“必须交付 / 可选 / 不做”：
- 必须：首屏 + 产品卖点 + 证据 + FAQ + CTA
- 可选：动效、滚动特效、复杂轮播
- 不做：重写整套样式系统
如果你需要更系统的“从 0 到上线”流程：网页制作从 0 到上线
2) 建一个“安全工作副本”
最小化操作：
- 复制一份模板目录（如
template/→project/） - 先能本地跑起来，再改
3) 先跑一次基线检查
- 页面是否有 404 资源？
- 首屏是否有大图未压缩？
- 是否用了外链字体/脚本？
Playbook：从结构到样式到脚本的修改顺序
Step 1：先改内容结构（不要先改样式）
优先级：
- 文案与层级（H1/H2/H3）
- 区块顺序
- CTA 位置
原因：结构稳定后，样式改动会少很多。
Step 2：样式修改要“局部化”
最常见翻车：为了改一个按钮，改了全站按钮。
建议：
- 尽量给新增/改动区块加父级作用域（如
.landing-v1） - 把“模板默认样式”与“你的覆盖样式”分开文件
Step 3：脚本只做必要的（并且可关闭）
- 表单提交、埋点、基础交互
- 所有增强交互都要有开关（避免线上排障困难）
修改地图：哪些文件通常该改？哪些尽量别动？
通常需要改
index.html（结构、文案、SEO 元信息）assets/css/main.css（覆盖样式、响应式修正）assets/js/main.js（表单/追踪/轻交互）assets/img/*（图片替换与压缩）
尽量少动
- 第三方库（vendor）文件
- 大段复制来的插件代码
SEO/GEO 最小集：模板改完必须补齐
即使你不是做 SEO，这些也会直接影响“能不能被搜到、能不能被生成式引擎读懂”。
- Title/Description（每页唯一）
- H1（每页一个）
- 图片
alt（关键图要写） - 内链（至少 4 条，指向站内关键指南）
可参考：
失败案例复盘：为什么“改个模板”会越改越乱
案例：为了改首页配色，直接在 main.css 顶部覆盖 a { color: ... }。
后果：
- 页脚链接、导航链接、按钮链接全部被改
- 某些 hover 状态不可见
根因：
- 没有作用域
- 没有验收用例
修复策略：
- 把覆盖样式限制在页面容器下
- 建立 6 个验收截图点（桌面/平板/手机首屏、表单、FAQ、页脚）
验收标准（你可以拿这段当“上线门槛”）
- 视觉：桌面/手机不破版；关键按钮可点击
- 响应式：常见断点（320/375/768/1024）都 OK
- SEO：title/description/h1/alt 就位
- 性能：首屏大图已压缩；CLS 不明显跳动
- 可维护：覆盖样式与模板样式分离；改动可定位
- 回滚：有上一版备份（或版本）
Checklist：模板修改到上线（逐项打勾）
- 建立工作副本，保留原模板不动
- 明确范围闸门（必须/可选/不做）
- 先改结构与文案，再改样式
- 样式覆盖做作用域隔离
- 图片压缩并替换路径
- 加入 SEO 最小集（title/description/h1/alt/内链）
- 移动端断点逐一检查
- 表单/按钮交互可用
- 建立回滚入口（上一版可恢复）