站点前端改版：从旧模板到编辑杂志风

一、推倒重来的理由

这个站点跑了好几年，模板是早期随手挑的那套。功能上没什么毛病，文章能发、列表能翻、搜索能用——但每次打开自己的站点，总有一种「别人家的后台默认皮肤」的感觉。

问题不在功能，在阅读体验。技术博客的价值最终体现在「有人愿意把一篇文章读完」，而旧模板的排版基本是在劝退：标题和正文挤在一起没有层次、行距过密、配色是那种典型的蓝白后台风，看上十分钟眼睛就累。

于是这次改版定了一个方向：不做功能重构，只做视觉重构。目标是把站点从「一个能干活的模板」变成「一本能静下心读的杂志」。

整个过程围绕五件事展开：配色、字体、列表排版、响应式方案、以及配套页面的同步迁移。

二、配色：纸张米白 × 墨黑

改版最先定下来的是颜色，因为它决定了后面所有元素的基调。

传统技术站点的默认配色大多是「纯白底 + 纯黑字」或者「浅灰底 + 深灰字」。纯白底在显示器上偏亮，长时间阅读容易疲劳；而对比度压得太低又会让代码和正文糊在一起。

最终选定的方案是纸张米白（#FAF8F3）配正文墨黑（#1A1A1A）——不是纯白，也不是纯黑。

这套配色的几个考虑：

• 米白而非纯白——模仿纸质书的底色，降低屏幕反射的刺眼感，长时间阅读更舒服，也天然带一点「旧书」的温度
• 墨黑而非纯黑——纯黑（#000）在米白底上对比过强，边缘会产生视觉振颤；#1A1A1A 保留了足够的可读性，又不至于刺眼
• 点缀色只用一个——陶土红（#B05434）出现在编号、分隔线、小标签这些地方。整站只有一个强调色，视觉上不会乱
• 次级灰留给辅助信息——日期、标签、页脚这类内容用 #8A8A8A，自然地退到背景里

这里有一条经验：强调色越少，重点越突出。旧模板的问题是每个区块都想吸引注意力，结果哪个都没抓住。现在整站只有一种点缀色，读者扫一眼就知道哪里是重点。

三、字体：给标题一点「印刷感」

配色的搭档是字体。这次改版把标题和正文分成了两套：

• 标题走衬线体——衬线（Serif）字体的笔画末端带有装饰性收笔，在视觉上更有「印刷品」的质感，适合做标题这类需要气质的位置
• 正文保持无衬线——正文追求的是长时间阅读的清晰度，无衬线体在小字号下的辨识度更好，尤其是中文

「衬线标题 + 无衬线正文」是很成熟的搭配策略，纸质杂志和不少严肃出版物都是这么做的。它的好处是：标题负责气质，正文负责效率，两者各司其职。

不过中文衬线字体有个现实问题——网页可用的中文衬线字体很少。系统自带的中文字体（微软雅黑、苹方）基本都是无衬线，真正好看的中文衬线（宋体类）要么体积太大不适合做 Web Font，要么渲染效果参差不齐。

最终的取舍是：英文标题用衬线字体，中文标题用系统默认无衬线，通过字重和字号拉开层次，而不是死磕字体本身。宁可统一，也不要中英文衬线混排导致气质割裂。

四、列表页：用编号做视觉锚点

列表页是这次改动最直观的地方。

旧模板的列表就是「标题 + 摘要 + 日期的堆叠」，一屏能塞十几条，但每条都长得一样，读者只能逐条读标题，眼睛找不到落点。

新方案借鉴了杂志目录页的做法——给每条文章加一个醒目的编号：

具体是这么处理的：

• 编号用大字号衬线数字，颜色用陶土红，和正文形成明显区分
• 编号、标题、摘要三层纵向对齐，左侧留出固定的编号栏，右侧是内容区
• 每条之间用极细的分隔线（比背景略深一点点），既做了区隔又不抢视觉
• 摘要压缩到两行以内，不展开全文预览——列表页的职责是「让读者快速判断要不要点进去」，不是替代正文

这种编号排版除了好看，还有一个实际好处：编号本身就是位置标记。读者扫到「09」时大致知道自己在列表的哪个位置，比在无差别条目里滚动更容易建立方向感。这是纸质出版物沿用了上百年的排版技巧，搬到网页上同样成立。

五、响应式：一套样式表覆盖两端

移动端适配是很多技术博客的痛点——要么不管，手机上字号小得看不清；要么单独做一套移动模板，改一次要改两个地方，久而久之两边就不同步了。

这次的做法是只维护一套样式表，靠媒体查询在关键断点切换布局。核心思路是「移动优先 + 少量断点」：

/* 基础样式按移动端写 */
.article-list { padding: 16px; }
.entry { display: block; }

/* 断点只在布局真正需要变化的地方加 */
@media (min-width: 768px) {
  .article-list { max-width: 720px; margin: 0 auto; }
  .entry { display: grid; grid-template-columns: 64px 1fr; }
}

几个具体的决策：

• 不分两套模板——同一份 HTML，靠 CSS 决定呈现方式。改一次两端同时生效，不会漂移
• 断点只设一个——768px。断点越多维护成本越高，一个主断点覆盖「手机 → 平板及以上」已经足够这个规模的技术站
• 字号用相对单位——正文用 rem 而非固定 px，跟随用户浏览器的字号设置，兼顾可访问性
• 行高给足——中文正文行高设到 1.8 左右，比西文常用的 1.5 更宽松，这是中文阅读的实际情况决定的

六、搜索页与标签页同步迁移

改版最容易出问题的地方，往往不是首页，而是那些「不常打开」的页面。

首页和列表页改完之后，搜索页和标签页还是旧配色、旧字体——点进去像换了个站点。所以这次把这两个页面一起纳入了迁移范围。

同步迁移的价值不只是「好看」，还有一致性带来的信任感：

• 搜索页——沿用同一套配色和字体，搜索框、结果条目、空结果提示都按新版式重排
• 标签页——标签云和标签结果页统一编号式列表的样式，和主列表页保持同一套视觉语言

经验是：改版前先把所有页面清单列出来，标出哪些是「入口页」（用户会高频访问）、哪些是「角落页」（搜索、标签、归档、404）。角落页虽然流量低，但一旦风格不一致，破坏的是整站的专业感。

七、小结

这次改版没有动任何功能逻辑，纯粹是视觉层的重构。回头看，值得记下来的几条：

• 配色做减法——米白底 + 墨黑字 + 单一强调色，比堆十种颜色更耐看
• 字体按角色分工——标题管气质（衬线），正文管效率（无衬线）
• 排版要有锚点——编号、分隔线这类小元素，能显著降低列表页的阅读成本
• 响应式只维护一套——移动优先 + 少量断点，比两套模板可持续得多
• 别漏掉角落页——搜索页和标签页的迁移，决定了整站体验是否完整

视觉改版的价值不在于「看起来更高级」，而在于让读者把注意力留在内容上而不是界面上。当排版不再需要被注意到的时候，它就做对了。