删掉的东西#

先说结论，这次删掉了：

• 阅读进度条（它只在长文里出现，而我已经知道自己读到哪了）
• 鼠标跟随的光晕效果（好看三秒，之后只觉得晃）
• 首页的滚动视差（移动端掉帧，桌面端分心）
• 每篇文章的封面图（我没有那么多好照片，AI 生成的又一眼假）
• 访问统计（我不需要知道有多少人没读完）
• 一个”猜你喜欢”的推荐模块（三篇文章的站点，推荐什么）

保留的只有：文字、日期、标签、目录、搜索、评论。

为什么封面图先被砍#

因为封面图会决定文章的”气质”，而我写的东西气质并不统一。

一篇讲 CSS 变量的文章，配一张抽象的渐变图，看起来很”科技”；下一篇写咖啡馆，配同一套模板的渐变图，就变成了敷衍。

当配图成为默认项，没有配图的文章就会显得”不完整”。这是一个由设计制造出来的焦虑。

所以现在的规则是：只有真的有合适的图，才放图。没有就不放。列表页也因此回到了最朴素的形态——日期在左，标题在右。

进度条的悖论#

阅读进度条的问题不是它难看，而是它假设了一种阅读方式：

它把文章当成一条要跑完的赛道，把读者当成需要被激励的人。但我自己读博客时，经常读到一半就去查别的东西，第二天再回来。进度条在这种真实场景里毫无意义。

相比之下，一个”预计阅读 8 分钟”的标注更有用——它帮读者决定”现在要不要开始”。

玻璃拟态的分寸#

这次用了不少玻璃效果，但有一条硬规则：正文区域绝不用玻璃。

原因很简单。玻璃的本质是”让人看见后面有什么”，它天生适合浮在内容之上的东西——导航栏、弹窗、卡片。一旦用在正文背景，文字和背后的内容会互相干扰，读三行就累。

所以我的用法是：

1. 导航栏：blur(20px) saturate(160%)，滚动时才显示边框
2. 卡片：blur(18px)，只在 hover 时出现背景，平时是透明的
3. 浮层：模糊更强，并且加一层半透明遮罩压暗背景

第三条尤其重要。浮层如果不压暗背景，玻璃就会变成”另一层内容”，而不是”当前要做的事”。

关于”零 JavaScript”#

这个站点的 JS 只做四件事：切主题、搜索、复制代码、加载评论。

其余全部是静态 HTML。这意味着：

• 首屏不需要等 hydration
• 关掉 JS 之后，文章仍然完整可读（只有搜索和评论不可用）
• 构建产物里没有框架运行时

代价是写交互时要用原生 DOM API，比 React 啰嗦。但一个博客的交互复杂度，还远远没到需要框架的程度。

删完之后#

删完之后我发现，页面反而变”重”了——因为剩下的每个元素都必须承担真实的功能，没有装饰可以躲。

标题的字重、段落的行高、日期的对齐方式，这些以前被花哨效果掩盖的细节，现在全都暴露在台面上。

这大概是重写博客唯一的意义：逼自己在一个没有借口的环境里，把基本功做对。