十轮改造，把手写站从「炫」做到「顺」

「首页够炫了。」有人看完这么说，「但点进文章，像换了一个网站。」

这话是对的。首页有入场幕、一间能拖的 3D 小屋、钉住的横向画廊；而文章页连个目录都没有，标题点不了，读完长文只能一路滚回顶部。皮和里子不在一个水平线上。

于是有了从 v32 到 v41 的十轮改造。这篇按层记下每一步学到了什么——比「改了什么」更重要的是「什么被测试网住了」。

#先把底色点亮

第一刀砍向「单调」。整页从上到下共用一块深底，其实每节早就配了自己的色相——靛蓝一路走到珊瑚——但那层环境光只有 27% 的透明度，几乎看不见。

把它点亮：每节两团光，位置交错、相位相反，四五十秒漂移一圈。滚动的时候像穿过一片一片的光。

然后掉帧了。无头浏览器里整站的动画卡成幻灯片，连不相干的跑马灯都卡。查下来是漂移动画里写了 scale：模糊是静态栅格，平移是整帧搬纹理，很便宜；缩放却会改变模糊的视觉半径，浏览器只好每帧重算那 64px 的高斯模糊。删掉 scale，光斑多大就把元素做多大，动画只留平移。

这件事让我确立了一条规矩：动画只动 transform，而且别碰带 filter 的东西。

#Ctrl+K：把全站装进一个输入框

第二层是导航。页面上有七个入口，博客里四篇文章、笔记里十几条，全靠翻。

现在全站任何页面按 Ctrl+K，一个输入框从顶部落下来：页面、作品、文章、笔记，加「切主题」「回顶部」两个动作，敲几个字回车就到。

有意思的是数据怎么来。生成文章的脚本顺手产出一个三 KB 的 JSON 索引，面板第一次打开才去取，之后走浏览器缓存——平时零开销。按钮和面板全部由脚本创建，没有脚本的浏览器里它们压根不出现，不留假开关。

#断网也能读

第三层是 Service Worker。策略分三种：页面「网络优先」，在线永远最新，断网回落缓存；带版本号的静态资源「缓存优先」，换版本即换键；索引和订阅源「先给缓存、后台更新」。预缓存只装骨架，文章访问到才进缓存——读过的都能离线看。

这层埋了一个我到现在都后怕的坑：网络优先的分支起初没检查响应状态码，服务器的 404 会被当成「最新版本」写进缓存。也就是说，一个不存在的页面，断网时会永远看到它。现在 404 原样透传，只有真正的网络失败才走兜底。

#质感是成批来的

后面的几轮开始成批处理：画廊卡片换上色相环描边和指针倾斜；RSS 带上全文，订阅器里直接读完；顺着分享链接落到某一节时，那节闪一下告诉你「就是这」；文章可以打印成 PDF，外链把地址印在纸面上；最长的笔记列表页加了页内索引，视口外的条目干脆跳过渲染。

这一批的共性是每一件都很小，但都在真实的使用场景里：分享出去的人、打印的人、用订阅器的人、滚到底想回头的人。

#测试是安全网

十轮下来，验收测试从 129 条涨到 181 条。比数量更重要的是它们抓到过的东西：

自动摘要里出现一个 \1，裸插进结构化数据，整个 JSON 块静默失效——生成一篇新笔记的当晚就被老测试拦下。浅色系统的访客首访被强塞深色主题，三行内联脚本之外还有一行启动逻辑会把系统跟随强行拍回深色——也是测试先说的。

这些错有一个共同点：肉眼看不出来。href="" 是合法的空字符串，浅色主题在别人电脑上，而我这边永远是深色。

两个教训写进了脚本注释。一是动画里 scale 和 blur 别放一起；二是正则替换串里的组引用会过好几道转义，一道错了就静默丢掉——后来一律改用回调函数拼，没有可丢的地方。

#还开着的事

评论和访问统计还在等账号侧的配置，入口都留好了。

比这更难的其实是内容。皮有 181 条测试守着，改坏了会红；内容没有测试，只有自己守着自己——写一篇是一篇，每篇都得值得别人花时间。

这个站到今天 40 多个版本。下一步大概还是老样子：看到一个问题，记下来，修掉，写一篇笔记。