把极简主题改造成一个开发者主页

大多数技术博客的模板都长得很像：一个标题、一张封面图、一堆卡片。它们没有错，但也谈不上记忆点。这次我想从一个已经很克制的基础主题出发，把它改造成一个真正属于写作者的主页。

先做减法，而不是加法

改造一个主题最容易犯的错误，是不断往导航栏里塞东西：搜索、标签、归档、画廊、友链、订阅、语言切换。每一项单看都有用，叠在一起就变成了收费站。

我的做法是先列出所有功能，然后问一个问题：

如果这一项消失，读者会不会读不到文章？

答案是否定的，就删掉。画廊、音效、彩蛋、终端模拟器都属于这一类——它们很酷，但它们服务于作者的自娱，而不是读者的阅读。

信息层级只保留三层

一个页面只需要回答三个问题，对应三种字号：

1. 这是谁的站点 —— 站点名，一次性、最大、最安静
2. 这里有什么 —— 最近的文章标题，重复出现、中等、可扫读
3. 细节是什么 —— 日期、时长、标签，小、灰、次要

只要这三层在视觉上不打架，页面就不会乱。具体到数值上，我用的比例大约是 1 : 0.36 : 0.24：

.hero h1      { font-size: clamp(2.5rem, 7vw, 4.35rem); letter-spacing: -0.042em; }
.post-title   { font-size: 1.015rem; letter-spacing: -0.012em; }
.post-row time { font-size: 0.755rem; letter-spacing: 0.02em; }

大标题用负字距收紧，小字用正字距放松。这是一个很小的细节，但它决定了版面是“松”还是“散”。

留白是节奏，不是空隙

新手常把留白理解成“空的地方”。实际上留白是节奏：它告诉眼睛在哪里停顿、在哪里加速。

我的规则是只允许一套间距刻度，比如 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96。任何两个元素之间的距离，必须落在这套刻度上。这样即使你随手调整，版面也不会失去秩序。

同样重要的是分组：相关的东西靠近，不相关的东西拉远。列表项的间距应该远小于区块之间的间距，否则读者无法判断哪里是边界。

动效只保留“确认感”

动效的价值不在于好看，而在于确认——确认你点到了、确认这里有东西。

所以我把动效限制在两类：

• 悬停时的位移，2px 以内，配 300ms 的缓出曲线
• 状态变化时的透明度，让元素淡入而不是跳出来

时长超过 400ms 的动画，在阅读场景里基本都是负资产。

.featured {
  transition: border-color 0.3s, transform 0.4s cubic-bezier(0.22, 0.8, 0.24, 1),
              box-shadow 0.3s;
}
.featured:hover {
  transform: translateY(-2px);
}

别忘了 prefers-reduced-motion。这不是可选项，是底线。

一份可以复用的检查清单

每次改版后，我会按这个顺序过一遍：

• 首屏能不能在 3 秒内说清“我是谁、我写什么”
• 正文行宽是否落在 32–40 个汉字之间
• 全站是否只有一个强调色
• 分隔线是否足够细（1px，且对比度低于正文）
• 关掉图片后，页面是否依然成立
• 键盘 Tab 一遍，焦点是否始终可见

如果这六条都过了，页面通常不会难看。剩下的，是写作本身的事。