24/05/2026 170 BLOG

博客前端布局样式重构

叁七

原来此博客使用的是3-hexo主题,最初我对主题的修改大概只是改变字体元素样式,加几个工具,改变背景图。

最终博客外观是这样的:

3-hexo蒸汽波风格

配色貌似有点阴间,不过刚做出来我还觉得蛮炫酷的,那时候(虽然离现在并没有很长时间)沉迷复古未来主义,就连现在也很受影响。

在原主题基础上我头一次开始大规模的修改布局,然后逐渐添加各元素的hover和click动效——所以我仍只是门外汉,对一个博客前端的设计只会堆效果,整体却没有什么很强串联性,幸运的是我逐渐有这样的意识。

添加了折线图音乐播放可视化,这可能是为数不多的亮点了。

最终效果

虽然因为这个大块的heros区域,画面乍一看像游戏资源商店。

我是怎么设计布局的。

一开始,我一直很喜欢明日方舟的平面设计风格,想参考,就让gpt-image-2生成类明日方舟风格的博客图片,然后挑满意的图片交给gemini生成html单页,在这个单页基础上做调整直到其布局样式合适,将修整后的单页放到本地作为参照将修改布局的任务交给cli。

然后开始一轮轮的vibecoding,修复问题,优化效果,直到基本完成所有想要的效果。

< 上一篇:没有了
— R.I. —
下一篇:Unity URP 屏幕空间三 >
首页 相册 小说 AI