今天想聊聊自己做网站代码模板的事儿。一开始我也没想搞这么复杂，就是觉得每次建新网站都得从头写一堆重复代码，太麻烦了。

为啥想起做模板

上周接了个小活儿，给朋友弄个展示页。明明半年前刚做过类似的，结果打开旧项目一看，当时写得乱七八糟，根本没法直接用。光是调个导航栏样式就折腾了一下午，气得我直拍桌子。

后来蹲厕所刷手机时突然开窍了——既然总遇到重复劳动，不如把常用布局打包成模板。这样下次再用直接复制修改，省时省力。

动手整理基础框架

先翻出最近做的五个项目，把共同的部分挑出来：

• 响应式导航栏（带移动端折叠那种）
• 三栏式内容区布局
• 页脚联系方式模块
• 通用按钮样式库

结果发现每个项目的代码写法都不一样！有的用flex布局，有的用float，还有用grid的。干脆全部重写，统一成flex方案。

踩坑记录

最头疼的是移动端适配。测试时发现安卓手机的键盘弹出来之后，底部固定定位的按钮会乱飘。后来查到得用viewport-fit=cover配合CSS变量计算高度，折腾到凌晨三点才搞定。

还有IE兼容问题，本来想直接放弃，但客户清单里真有老政府单位。只能单独写个兼容脚本，用条件注释塞进去。

成品效果

现在这套模板包含三种首页布局、五套配色方案。最得意的是做了个可视化配置页面，勾勾选选就能生成定制代码。虽然界面丑得像十年前的作品，但实在懒得打磨了。

昨天用这个模板接了新单子，原本三天的活儿一下午就交付了。客户还夸我效率高，心里偷着乐——这模板以后还能反复用。