米饭团

自建站做到后期，几乎都会经历模板改造：设计稿画好了，要把它一比一变成网站页面。这个环节最容易出问题——不是做不出来，而是不知不觉丢了东西。分页条没输出、某个图标没跟上、meta 信息被简化，这类遗漏用户发现时往往已经上线很久了。这里分享一套我自己在用的转换流程，要点只有一个：把「完整性」当成硬指标。

一、先分析，后动手

拿到设计稿的第一步不是打开编辑器，而是把设计稿完整分析一遍，列出全部区块清单：头部导航、轮播、卡片列表、分页条、侧栏、页脚、每一个按钮和标签，逐项登记。这份清单就是接下来的转换目标。跳过这一步直接开工，是所有遗漏的根源——因为你的大脑会不自觉地「帮忙简化」设计稿。

二、按清单逐块转换

转换时严格按清单顺序推进，每完成一块就在清单上打勾。设计稿里的任何区块，包括看起来不起眼的次要信息，都不允许静默删除或重排；确实需要调整的，先记下来统一确认。缺数据的位置可以先用合理的测试数据填充展示，但结构必须完整——数据是动态的，结构丢了就很难补。

技术上有几个常踩的点值得注意：CSS 工具类要确认模板环境里真的存在，别假设某个 grid 或 flex 类名天然可用；列表页的分页变量要和控制器绑定名对上，比如框架要求用 pageinfo 就不要写 page；图标资源一律本地化，别依赖外链图床，哪天外链挂了页面就开天窗。

三、结构 diff 验收

转换完成后，做一次设计稿与成品的结构对照：数区块数量、对类名和 ID、核对每处输出变量。我把这份 diff 当成交付的一部分，差异清单主动列出来，而不是等用户肉眼去发现。实战里靠这个流程拦下过不止一次分页条丢失、meta 行缺失的问题。

四、上线前最后三件事

• 清一遍页面缓存，确认新版模板真的生效而不是旧缓存；
• 用移动端宽度过一遍所有页面，确认响应式没有塌；
• 给 CSS 和 JS 的引用加上版本号参数，避免老访客拿到旧文件。

模板改造考验的不是灵感而是纪律。把设计稿当成百分之百的规格，而不是参考，「成品=设计稿」才有可能成为常态。这份清单看着繁琐，但它省下的是上线后反复修补的时间和信任。