也就没想到，给一个静态博客换主题，能整出这么多幺蛾子。

事情的起因很简单——NexT 主题用了好几年，审美疲劳了，想换个新鲜。刚好最近被 vibe coding 这套说法洗脑，想着要不就实践一把，用”氛围感”驱动开发，快速迭代，边写边看。

结果？

vibe 是 vibe 了，coding 是 coding 了，就是中间翻车的过程不太 vibe。

动手前：先保命

这次倒没上头直接开干。毕竟博客写了这么多年，真搞丢了也挺心疼的。

先做了三件事：

  1. 整站备份，内容和主题全塞进 backup/2026-02-25-next-migration/
  2. git status + diff，把之前的本地改动全部导出
  3. 手写了一份历史魔改清单，哪些文件动过、为什么动、动了哪里

这一步倒是挺 vibe 的——你可以快，但不能莽。备份完心里踏实了，开搞。

迁移中：从”能跑”到”能看”

框架升级

Hexo 升到 8.1.1，Butterfly 主题上 5.5.4，补齐了一堆渲染器依赖。构建链路一通，本地能跑起来，第一步算成了。

主题切换

从 NexT 切到 Butterfly，重新整了一份主题配置。迁移了评论（Valine）、本地搜索、站点统计、社交链接这些关键能力。

视觉重构

用户要的风格是白底黑字、灰阶渐变。我照这思路整了一套：

  • 全站白底黑字
  • 卡片白底 + 灰边框 + 轻阴影
  • 页头页脚用灰阶渐变
  • 深色模式直接禁了，省得样式打架

看起来挺简单对吧？

翻车了

真正的问题在细节。

本地跑完一看，首页卡片黑底黑字，文字完全看不见；侧栏 Recent Posts 标题没了；Footer 文字发白，对比度稀烂；头像还在那儿旋转，公告区一抖一抖的，看得我头晕。

这时候 vibe coding 的精髓来了——别纠结原理，先对症下药，能跑就行。

  • 黑底黑字？强制覆盖关键选择器，先让它显出来
  • 标题看不见？改颜色、加权重
  • 动效太烦？直接关掉

改完一轮，能看了。但代码里一堆临时补丁，乱七八糟的。

收敛

vibe coding 不是说改完就完，而是得把临时方案收敛成能维护的东西。

我把散落的样式补丁整理进统一的主题变量，按组件归类，去掉重复的定义。最后虽然不算完美，但至少是个能长期维护的状态。

这次用到的 vibe coding 心法

整趟下来，我觉得这套方法对我最有用的是节奏感。

  • 先保底：备份、列回滚点，再动手
  • 拆任务：按可见结果拆 3-5 步，每步结束都能验证
  • 先治标：样式冲突就强制覆盖，别一上来就重构全局
  • 再治本：临时补丁整完后，统一收敛成规范

最后

这次迁移说简单也简单，说折腾也折腾。最大的收获不是换了新主题，而是验证了 vibe coding 在我这儿能跑通——不是不讲工程，而是把节奏和体验塞进了工程里。

博客现在长这样，白底黑字，清清爽爽。如果你也在看这篇文章，说明至少它还能正常显示。

那就这样吧，能跑就行。

顺便，这篇 blog 也是 vibe 出来的，笑死。