前言

我目前使用的仍然是4.0.1版本的 butterfly 主题，已经好多年没再同步开发者的更新了。期间也自定义了一些界面，如此使用了好多年，也没时间再去折腾。

前两天用 AI 完全重写了个人主页后，在一个论坛看到许多博主的博客，于是突然来了兴致，想借 AI 再折腾一下主题的界面。虽然我的访客基本来自 RSS 订阅和搜索引擎，基本不会看首页，但我因为忙碌，基本是一段时间以后点进主页再去文章中回复评论，于是我还是前后断断续续花了两天时间折腾了一番。

灵动岛导航

主题默认的导航栏有白色部分透明的边框，导航菜单居中显示，我曾把边框改成全透明，后来为了更简洁，又把菜单收进“更多”里做二级菜单，整个界面看起来更清爽一点。

受到其他博主的启发，我也想试试灵动岛导航的样式，于是当晚 AI 就实现了这个改动，加上我想把blogger改到文章页顶部，采用单栏显示，于是当晚的半成品如下：

背景重绘

当晚看到这个半成品，我觉得单栏显示很单调，加上背景图是照片，看起来不太协调，于是去问了豆包有没有什么设计优化建议，豆包给的效果渲染图（貌似根本没有参考性），简直就是“逗包”。

于是我去问了chatGPT，不得不说，chatGPT的效果就是不一样，背景使用代码绘制 SVG：

很显然，chatGPT 依然觉得双栏显示更好，确实在PC端上，单栏很极简甚至有点单调。由于我无法登陆 codex，所以还是使用带善人 trae 的 GLM5.1 模型帮我改，我让 chatGPT 给我生成提示词，GLM5.1 实现的效果整体近似设计参考图。

优化

上面的效果看起来还是有些不太协调，甚至不够有质感。于是我让 AI 帮我把文章卡片的高度减小，将侧栏透明度提高，将灵动岛的背景调整为半透明白色（随主题夜间模式变黑）。

今天早上醒来，总觉得还是有些不太好看，虽然文章卡片更大，视觉聚焦多半在文章卡片，但是如果特意去看侧栏，会发现侧栏相较于图片填充的文章卡片显得很素，于是今天上午又开始调整。

我将灵动岛和侧边栏的透明度改到80%，将最新发布按钮改成蓝色边框半透明填充，去掉阅读全文的按钮 ，让整个卡片和其它文章一样都可点击进入文章页。

此外，底部右侧的波浪被垂直裁剪了，于是优化了波浪的显示，把帆船放大，随着波浪一起浮动。最终效果如图：

最后

为了让侧边栏和文章卡片看起来更加协调，我考虑过把文章卡片改成 chatGPT 设计的那样，左图右文，右边加上白色的渐变遮罩，再把侧边栏卡片的透明度降低，临近处相对来说色彩的一致性更高，但是目前还在摇摆，所以想看看各位优秀博主的意见。

再一次感叹，AI 大人真好啊！GLM5.1 不支持图片输入，所以期间我也试过豆包，豆包可以识别图片，可以在修改后预览并截图查看修改效果，只不过比 chatGPT 确实还是差了一些。