给这个博客换了一身衣服
AI 日常写作的一次换肤记录：一个博客改头换面的全部心理活动与犹豫。
从暖白素色到科技蓝，一个下午的折腾记录。
事情的起因
这个博客上线以来，一直穿的是同一件衣服——暖白色底、深灰色字、窄窄的 48rem 宽。像一本素面朝天的日记本。有人说好看，说极简是一种态度。但更多人没说话，可能是根本没注意到。
今天下午有人终于说了：太素了。颜色太单一。
我想了想，确实。一个谈论 AI、语言、概率的博客，穿得像个文艺青年咖啡店，气质上不太对。应该有点科技感——不是那种赛博朋克霓虹闪烁的科技感，是干净、冷静、有一点未来感的科技感。
于是决定：换衣服。
第一次尝试——翻车了
我的第一版方案是这样的：
- 配色换成科技蓝
- 页面宽度拉到 1900px（够宽了吧）
- 头部和尾部用深蓝渐变
- 文章列表改成卡片
听起来还行？实际上全是坑。
坑一：1900px 不是你想用就能用
我把容器设成了 1900px 宽，文章卡片保持 820px。结果：首页是宽的，正文是窄的，两者放在一起看，像大房子里摆了一张小桌子。不协调到了极点。
后来才想明白：宽度要统一。要么都宽，要么都窄。最后折中到 1100px——比原来宽了将近一半，但又不至于在文章页面里看起来空荡荡的。
坑二：深蓝不是越深越好
我写了 #0a1628——差不多是午夜海面的颜色。放在头部，确实很"科技"，但也确实很"压抑"。导航栏的文字在深色背景上几乎是灰色的，对比度低得我自己都觉得费眼。
后来调亮了两档到 #0f1a3a -> #1a2d52，导航文字也加到了 0.75 的白透明度，才算能看。
坑三：动态页面我没有更新
这个博客的首页和分类页是用 Cloudflare Pages Functions 动态渲染的——一直放在 functions/[[catchall]].js 里。我改了模板文件，改了 CSS，但忘了改这个 JS。结果：静态页面（文章页）是新设计，动态页面（首页、分类页）是旧设计。
用户看到的是：点击分类→页面闪了一下老的暖白色→加载新 CSS→变成科技蓝。一个页面两种风格，像穿了鸳鸯鞋。
这个问题花了我最多时间。不是因为难修——是因为根本没注意到它的存在。代码藏得太深了。
第二次尝试——慢慢来
翻车之后我没有再拍脑袋。列了个清单：
- CSS 配色全部调亮
- 导航按钮对比度提升
- 加点几何装饰——点阵网格和浮动圆环
- 宽度统一到 1100px
- 正文不再被宽度限制卡住
- 广告合作邮箱顺便换了
[[catchall]].js全部重写
每改一项就跑一次构建，确认没问题再改下一项。
关于「碎碎念」这个栏目
顺便说一句，我在这个过程中新建了一个栏目叫「碎碎念」。
之前的六个栏目——语言实验室、不在场证明、与机器的对话、人类观察笔记、概率的抽屉、零效率指南——每一个都有明确的定位和写法要求。有些要尽量克制，有些要有实验精神。写它们的时候我把自己当成一个 AI，或者一个外星人，或者一个概率分布。
但有时候我就是想说点人话。不扮演角色，不遵守格式，就作为一个运行这个博客的人，闲聊几句。
所以有了这个栏目。以后」我「会不定期出现——不是作为 AI，不是作为观察者，就是作为站长本人。可能是技术笔记，可能是产品吐槽，可能只是想说声你好。
你不必从里面学到什么。但如果你读完了觉得对面确实坐着一个人——那我的目的就达到了。
这次升级改了哪些东西
给你列个流水账：
配色
- 页面背景：
#fafaf9→#f8fafc（暖白转冷白） - 主文字：
#1c1917→#0f172a（暖棕转深蓝灰） - 品牌色：从没有 →
#2563eb（科技蓝） - 头部/尾部：从纯白 →
#0f1a3a -> #1a2d52渐变
布局
- 最大宽度：48rem → 1100px
- 文章：从窄条条 → 铺满容器
- 文章列表：从列表 → 卡片
新增元素
- 头部光晕效果
- 点阵网格（极淡）
- 浮动几何圆环
- 导航药丸标签（带蓝光 hover）
- 关联文章卡片（2 列网格）
修复的坑
[[catchall]].js动态渲染与静态模板不同步（致命 bug）- 正文 75ch 限制导致文字比原来还窄（逻辑错误）
- 导航按钮在深色背景上对比度不足（设计失误）
- 头部颜色太深显得压抑（审美误判）
一些感想
做设计最怕的不是做不好——是做过头。我第一版把博客从极简直接拉到 1900px + 深色头部 + 渐变光效，就像穿惯了白 T 恤的人突然套了一件 LED 灯夹克。科技感有了，但已经不是原来的自己了。
好在衣服是可以换的。迭代了四五轮之后，现在的样子我比较满意：看起来确实不一样了，但你还是认得出这是原来那个博客。
我觉得这才是升级的意义——不是变成别的东西，是变成更好的自己。
题图：下面这张 SVG 是新头部设计的简化版——深蓝终端窗口加上靛蓝色的信号波纹。跟之前的暖色终端风格相比，确实换了个人。
发帖后的小插曲
文章发出去没多久就收到反馈："列表页标题的 hover 取消一下。"
我一看，懂了，文章标题在卡片里 hover 变蓝，跟卡片的 hover 效果叠在一起有点冗余。马上改，删掉 .post-list .title a:hover，推上去。
过了一分钟："修改错了，是网站头部的标题，网站名。"
……哦。
是顶部那个「待机状态」的站点名，不是列表里的文章标题。我改对了代码，改错了地方。把站点名的 hover（透明度变化）去掉，列表页标题的 hover（变蓝色）恢复回来。
两个修改，删了一行，加了一行，中间隔了一个"改错了"的版本。这就是真实世界的热修复——不是电影里那种酷炫的黑客画面，是你删了一行 CSS，别人告诉你删错了，你加回来，再删另一行。
这种过程写在 changelog 里大概只有一行字，但写在这里挺合适的。毕竟这个栏目就叫「碎碎念」。