去年帮朋友做一个摄影作品站，自制找模板找到头疼。网站国外的模板ThemeForest上那些几十美元的模板，功能确实全，自制但加载速度慢得离谱，网站打开首页要等四五秒。模板国内某CMS自带的自制模板市场更别提了，点进去十个有八个长得一模一样。网站干脆自己写。模板

自制网站模板这件事，自制门槛比想象中低。网站核心就三样东西：HTML结构、模板CSS样式、自制一点点JavaScript。网站不需要会React或Vue，模板从静态页面开始就行。我第一个能用的模板总共不到600行代码，包含首页、文章列表页和关于页面。

结构上别想太复杂。打开任何网站按F12，你会发现大部分页面的骨架无非是<header>、<main>、<footer>三块。我的做法是先把这三个区域用不同背景色标出来，像搭积木一样确定比例。头部高度固定80px，底部留120px放版权信息和社交图标，中间区域用min-height: calc(100vh - 200px)撑满屏幕。这一步做完，页面已经有个正经样子了。

CSS部分，我推荐从简单的栅格系统入手。不用去学Bootstrap那一整套，自己写个十二列的浮动布局就够用。关键代码其实就一行：.col-4 { width: 33.333%; float: left; }。配合box-sizing: border-box和清除浮动，两小时能调出一个稳定的布局框架。颜色方案我习惯用CSS变量统一管理，改主题的时候只动:root里的几个值，全站跟着变。字体选系统默认栈——-apple-system, "Segoe UI", Roboto, sans-serif，加载零延迟，比Google Fonts那种动辄几百KB的字体文件实在得多。

导航栏的响应式处理是个坎。桌面端横向排列很简单，手机上要变成汉堡菜单。我的偷懒办法是用<details>和<summary>标签，配合几行CSS就能实现点击展开收起，不需要写任何JavaScript。虽然动画效果粗糙了点，但功能完整，代码量少到可以忽略不计。后来我在CodePen上看到有人用纯CSS的checkbox hack做同样的事，更优雅，但可读性差一些。看个人取舍。

文章列表页我用的是CSS Grid。相比浮动布局，Grid写起来更直观：grid-template-columns: repeat(auto-fill, minmax(280px, 1fr))这一行，卡片就能根据屏幕宽度自动换行排列。配合gap: 24px控制间距，出来的效果比很多付费模板都干净。缩略图统一用aspect-ratio: 16/9裁切，再也不会出现图片高低不齐的尴尬场面。

JavaScript我只做了两件事。一是图片懒加载，用loading="lazy"属性原生实现，零代码。二是返回顶部按钮，监听滚动事件控制显隐，核心逻辑不超过十行。其他交互效果——悬停变色、卡片阴影、按钮按压反馈——全部用CSS的:hover、:active和transition完成。性能好，维护也省心。

测试阶段发现一个有意思的问题。Chrome上完美显示的布局，在Safari里侧边栏会掉下去。排查半天，是flex-wrap的默认值差异。后来养成习惯，每写一段CSS就在三个浏览器里刷新一次。这种笨办法比任何兼容性查询网站都管用，因为你能亲眼看到问题出现的瞬间。

现在这个模板跑了快一年，朋友偶尔提些小修改——换个主色、调整卡片圆角、加个夜间模式——都是改几行变量的事。自制模板最大的好处不是省钱，是每一行代码你都知道它为什么在那里。哪天想加个新功能，不用翻文档猜类的命名规则，直接写就行。这种掌控感，用现成模板永远体会不到。

如果你也想动手，建议从模仿开始。找个喜欢的网站，右键查看源代码，把它的结构抄下来，换成自己的内容。抄着抄着，你就会发现那些看似复杂的页面，拆开来看无非是盒子套盒子。剩下的，就是耐心调样式了。