前言

之前我的博客一直是基于安知鱼主题搭建的。老实说，这套主题本身已经很成熟了，页面丰富、功能也全，日常写博客其实完全够用。

不过最近在折腾团队博客的时候，我发现在 AI 辅助下，重新设计和重构一个个性化的博客还是蛮简单的。

这篇文章主要记录一下这一轮博客风格迁移的思路、过程，以及中间踩过的一些坑。

1. 为什么要迁移

这次迁移，最核心的原因其实很简单：我想多折腾折腾，搞一个属于自己风格的博客。

安知鱼主题是一个好看的主题：功能很多、完成度很高、开箱体验也不错。但用久了之后，我会越来越在意几个问题：

页面元素很多，信息密度高，但有些区域并不是我真正需要的
有很多其他人也用的是相同的博客主题，虽然都有个性化的配置，但是还是希望能够变成完全属于自己的博客。

2. 整体迁移思路

这次的工作流，不是“找主题 → 安装 → 改配置”，而是下面这种路线：

先明确自己想要的风格
把想法整理成 prompt
让 AI 生成适合 Stitch 使用的设计描述
根据设计描述出一版参考设计稿
再基于参考稿生成静态页面骨架
最后交给 Codex 结合 web-design skill 做结构化落地和持续微调

也就是说，这次真正先确定下来的不是代码，而是视觉方向和信息架构。

我一开始先把自己想要的感觉写得比较具体，比如：

暗色单主题
终端风 / 实验记录 / 技术文档感
直角、细边框、低装饰
窄阅读列
首页和聚合页可以更有“启动界面”氛围
文章正文页则尽量克制，优先保证阅读体验

然后把这些内容交给 GPT 整理成适合 Stitch 的提示词，再基于生成出来的设计稿去做下一步。

3. 不是继续魔改，而是直接接管主题

这次一个比较关键的决定是：不再继续深改旧主题，而是新建本地主题。

因为如果只是小修小补，覆盖一些 CSS 当然没问题；
但这次我想动的其实不只是颜色、圆角、阴影，而是这些更底层的东西：

首页结构
页头与导航逻辑
文章页信息排布
标签 / 分类 / 归档的组织方式
关于页、友链页、留言板等特化页面的呈现形式
一整套统一的视觉风格和组件语言

继续在原主题上补丁式修改，后面只会越来越难维护。
所以这次直接新建了一个本地主题，把视觉外壳和模板结构都单独抽出来接管。

简单说就是：

内容继续沿用原来的 Hexo 文章体系
页面视觉和模板逻辑改成自己维护
数据层尽量保持兼容，避免为了换风格而重写全部内容

这个思路后面证明是对的。因为一旦主题是本地可控的，后续很多细节就能直接改，而不用反复和原主题结构博弈。

4. 页面层做了什么

这一轮迁移，不是只改了首页，而是把整站的核心页面都一起重做了一遍。

目前主要覆盖了这些页面：

首页
文章详情页
归档页
分类页
标签页
关于页
短记页
相册页
友链页
留言板页

4.1 首页

首页是这次改动最大的一块。

我不太想让首页继续只是“文章列表 + 侧栏”的传统博客结构，所以这次把首页改成了更偏入口型的页面，重点放在几个区域：

顶部终端式 Hero
精选文章入口
近期内容流
标签 / 分类跳转
一些状态卡片

首页想做出来的感觉，不是那种花里胡哨的 landing page，而是更像一个个人研究站点的启动界面。
因此在这里我允许它比正文页更花哨一点，但不会把这种风格粗暴复制到整站所有页面里。

4.2 文章页

文章页是我刻意收着做的一页。因为首页可以承担风格表达，但文章页首先必须可读。

所以文章页的思路基本是：

视觉上沿用终端实验日志的整体风格
结构上更像一份能看的笔记
保留标题区、标签、时间等信息
正文使用更窄的阅读列
代码块、引用、分割线这些元素统一到新视觉系统里
动效尽量轻，不干扰阅读

这一页做完之后，整体阅读感比我预想里舒服很多。至少不会出现“首页很酷，正文像另一个站”的割裂感。

4.3 归档 / 分类 / 标签页

这些页面原来更多是“功能页”，但这次我希望它们也能成为博客结构的一部分，而不是单纯的跳转列表。

所以这几个页面的处理思路是：

归档页：偏终端索引 / 时间轴视图
分类页：更强调分类作为主题入口
标签页：让标签从辅助信息变成可用的检索入口

也正因为如此，这次首页和聚合页的风格会比正文更强一点，它们承担的是“入口”和“站点结构展示”的角色。

5. 数据层尽量不动，降低迁移成本

这次我比较在意的一点，是不要为了换主题而把原有内容全推倒重来。

毕竟博客最重要的还是文章本身。如果每次换风格都要顺带迁移内容结构，那成本太高，也容易把事情做复杂。

所以这次的原则是：

原有文章目录保留
原有 front-matter 尽量继续兼容
about.yml、essay.yml、album.yml、link.yml 这些数据文件继续使用
页面模板自己接管，但数据来源尽量不变
真要适配，也优先做一层数据归一化，而不是回头重写所有内容

这意味着这次迁移更像是“换外壳 + 重构视图”，不是“重建整个博客内容系统”。

从结果来看，这个策略也确实省了很多事。
特别是像 About、友链、相册、短记这类页面，如果数据格式还能继续复用，后面维护会轻松很多。

6. 视觉风格这次到底改了什么

如果要概括这次迁移的视觉方向，我觉得可以总结成一句话：

从“主题感”转向“终端实验日志感”。

具体一点说，大概是这些变化：

页面整体改成暗色单主题
主强调色偏终端绿，辅助色用冷青
大量减少原本偏柔和、偏圆润的装饰语言
卡片、按钮、标签统一成直角、细边框、低阴影
代码块采用更明显的终端窗口式结构
文章正文区域更窄、更安静
标题、导航、提示文本中适度加入终端语义

我其实并不想做成那种“赛博朋克特效站”（感觉有些糖哈哈哈哈），那样也很容易影响阅读体验。

7. 迁移过程中踩过的坑

这次并不是一把梭就做完了，中间还是踩了不少比较具体的问题。

7.1 评论区恢复

刚迁过去的时候，新主题没有把原来的评论挂载重新接起来。

后面把留言板和文章页评论区重新接回去之后，这块就恢复正常了。
而且留言板页面本身原来还有信封样式内容，所以最后不是简单塞个评论框进去，而是把原来的留言页逻辑一并保住了。

7.2 文章日期全部变成今天

迁移后我发现归档页里的文章时间全变成了部署当天，后来排查才发现：
部分文章并没有显式写 date:，Hexo 实际上是拿文件时间来推断日期的。

这在本地可能没问题，因为本地文件时间还保留着；
但一旦上传到服务器，文件重新创建，mtime 变了，Hexo 就会把它们全当成“今天的文章”。

这个问题最后的处理方式也很直接：

给原本缺失 date 的文章补上明确日期
同时调整配置，避免继续依赖 mtime

7.3 代码块样式

迁移以后，代码块相关的小问题也很多，比如：

没有语法高亮
toolbar 高度过高
行间距偏大
上下留白不协调

这些问题单看都不算大，但一旦文章里代码多，阅读体验就会明显变差。
后面这部分主要还是一点点修：

补全高亮 token 的颜色映射
压低代码块顶部工具条高度
调整 pre 的 padding
修正行高和内部结构带来的额外空白

改完之后，代码块就不会显得那么空荡荡了。

7.4 音乐播放器

一开始我还尝试过把原来博客里的音乐模块保留下来，但后来发现这部分在新风格里反而有点违和，而且跨域、嵌套 iframe、自动播放这些问题也比较烦。

最后想了想，直接去掉反而更干净。
有些功能原来存在，不代表新站一定还要保留；如果它已经不适合新的整体气质，那砍掉也是一种更好的整理方式。

8. 这次 AI 工作流里比较有意思的地方

大概体验下来，我觉得AI有几个特点：

8.1 它适合先搭骨架

无论是 Stitch 生成设计稿，还是 Codex 去接管页面模板，AI 最擅长的不是最后那种一像素一像素的抠细节，而是：

快速把抽象想法变成可见结构
先做出一版能看的骨架
把“完全空白的起点”变成“可以持续修改的版本”

这一点其实能大幅降低开始动手的门槛。

8.2 它不适合替你审美定稿

但反过来说，真正决定博客最后长什么样的，还是你自己不断提需求、不断否定、不断收敛。

AI 可以给你很多版本，
但哪个保留、哪个删掉、哪个地方应该更克制，最终还是人的判断。

我这次最大的感受就是：

AI 很适合把“不会写”变成“已经有东西可改”，但它不能替你完成审美判断。

8.3 它很适合处理脏活累活

像下面这些工作，交给 AI 其实效率很高：

按照统一风格重写模板
给页面补齐结构
调 CSS 直到样式接近预期
补评论区、修归档、调代码块
把页面逻辑改成更统一的形式

尤其是当你已经知道自己想要什么的时候，AI 更像是一个高执行力的实现助手。

9. 目前这次迁移的结果

迁完之后，现在这个博客终于更接近我想要的状态了：

风格统一了很多
首页不再只是普通文章流
文章页可读性保住了
About、归档、标签、友链、留言板这些页面都有了自己的结构
旧内容基本没丢，维护成本也还在可控范围里

当然，这并不代表它已经做完了，以后可能还会再进行改动。

10. 后续还想继续做什么

这轮迁移完成之后，我后面大概还会继续折腾这些方向：

继续打磨首页和聚合页的节奏感
让部分页面之间的视觉语言再统一一点
补更多适合自己博客的细节组件
继续整理文章、短记、相册之间的内容分工

结语

随着AI越来越强，搭一个能跑的网站已经不难；
真正有区别的，其实是页面结构、内容组织、视觉取向和长期维护方式。

对我来说，这次迁移算是一个新的起点。
后面这个博客大概率还会继续改、继续重构、继续加东西，但至少现在它已经开始更像我自己的博客了。

# 博客风格迁移记录

前言