把官网拆成可复用积木：组件化改版的六步落地清单

前置条件

动手前先确认三件事。第一，站点后台用的是支持自定义字段或区块的 CMS，而不是纯 HTML 写死每一页；纯写死的站做组件化成本极高，不如直接重做。第二，手里有一份现网页面清单，至少列清栏目数、每栏页面数、共多少套版式。第三，设计和前端达成共识：颜色、圆角、间距先用变量，不写死数值。我们接手过一家站，前端直接把色值写进每个页面，后来换主色要改四十多个文件，这种就是没满足前置条件。网页制作要进入组件化，前提是结构和样式已经解耦，否则后面每一步都会踩回旧的坑。

第一步 盘点现有版式

把全站页面按「长得像」分组，归出不超过八套版式。比如首页一套、产品列表一套、产品详情一套、新闻列表一套、新闻详情一套、关于我们一套、联系我们一套、专题页一套。校验方法：随机抽十页，能套进这八套里的，说明归类成立；套不进的单独记一笔。常见报错是「明明两套长得一样却被当成四种」，原因是历史运营每次都复制整页再改，积累出很多变体。处理办法是强制合并，宁可暂时牺牲一点差异，先统一骨架再说。

第二步 抽公共组件

从每套版式里抽出反复出现的块：顶部导航、面包屑、卡片、表格、图文混排、表单、页脚。每个块定义输入项和样式，单独建文件或区块。校验方法：拿一个新产品页，只用这些块拼，不写新代码就能搭出来，说明抽得够。报错常是「抽完发现还差一个特殊块」，那就补一个，但总数控制在十五个以内，再多就失去组件意义。网页制作的效率，差不多就卡在「公共块够不够用」这一关，块齐了，加页面只是拼装。

第三步 定设计 token

把颜色、字号、间距、圆角、阴影全部变成命名变量，写进一份全局表。主色叫 primary，间距基准是八像素，圆角统一四或八。校验：新建页面时设计师不再写具体色值，只引用变量名。报错是「变量表和实际页面对不上」，多半是有人图快直接硬编码，处理是搜一遍仓库，把散落的色值替换回变量。这一步做完，后面换肤、做深色模式都只是改一张表，不用动任何页面结构。

第四步 建模板与实例分离

模板只管结构和占位，具体内容走数据。比如产品详情模板固定几个槽位：标题、主图、参数表、正文，填充时只换数据不碰结构。校验：运营在后台改一篇文案，前台样式纹丝不动，说明分离成功。报错是「改文案把排版搞乱了」，根因是内容和结构混在一个大文本框，处理是回到第二步，把那块拆成独立字段。网页制作里最该早点做的，就是别让内容把结构撑变形，否则每次更新都是一次冒险。

第五步 留改版开关

给每套版式留一个版本号或开关，新改版先开给内部 IP，确认无误再全量。校验：内部能看到新样式、外部还是旧的，说明开关生效。报错是「一改全站瞬间变样，出问题来不及回退」，处理是补一个一键回滚到上一版的能力。我们给客户做的版本开关，最值钱的一次是上线当天发现移动端错位，十分钟切回旧版，避免了大半天故障。改版能不能放心推，往往就看这一道闸有没有。

常见报错汇总与处理

报错一：组件更新后旧页面崩了。处理：旧页面引用的是旧版块，建组件时保留向后兼容或给旧页单独锁定版本。报错二：两人同时改一个组件，互相覆盖。处理：组件改动作走审核，重大改动先在复制环境验。报错三：token 改了，某页还是旧色。处理：那页有硬编码，按第三步搜替换。网页制作的协作坑，九成出在「改一个地方以为全站都变，其实有漏网之鱼」，所以每次改动后都要回到校验清单过一遍。

上线前自查项

逐条勾：版式是否归到八套以内；公共块是否十五个以内且能拼出新页；token 表是否覆盖全部颜色间距；内容是否与结构分离；是否每个版式有版本开关和回滚；旧页面是否在组件更新后仍然正常。六条全过，再批量切流量。这套清单我们每次改版前都过一遍，平均能把返工轮次从四轮压到一轮以内，省下的全是真金白银的时间。