博客主题是基于 Gyoza 逐渐引入我个人的想法、需求产生的,整体风格并没有大的改变,但很多需求化层面的东西也把这个博客主题引入了另行的方向。比如原作者并未引入的 Lucide ,因为我认为方便,便被我无耻的引入替换了原有 icon 方案;再比如作者放弃的 algolia 搜索方案,也被我无情的按照自己的意愿重新启用,又按照我的喜好,做了调整;再比如,我无理的引入了一套割裂项目的 AI 摘要解决方案,从静态博客硬生生掺合了边缘计算的逻辑……
所以,我还是介绍一下,这款看着外观相同,其实内在有不小差异的新项目 Gyoza。
变化
你可以对比本项目和原始项目的 Package.json ,关键框架都做了迁移, Astro 5、Tailwind CSS 4、React 19 是最大的调整。
主观上最大的变化,是主题色彩方案,原项目的动态变换的色彩方案,在我迁移 Tailwind CSS 4 上时,选择了放弃。虽然可以继续保留,但是就在迁移的时候,觉着完全拥护 Tailwind CSS 4 会是更好的选择。对于觉着原项目的动态色彩方案更讨喜的,这套方案可能并不符合你需求。
在这里,给大家道歉了!
对不起,我是一个喜新厌旧,但是会全情投入新感情,不过也会随时拥抱下一个的渣人。
巧思
首页首屏
中心区域左侧文字、右侧头像,文字部分的交互动效是比较直观的,但是右侧头像被我加入了点击破碎的效果,在头像后隐藏了一句话和一张图片。我是有够无聊的!
首屏下方的两行文字也做了动效,目前英文动效要好过中文动效。
具体调整,可以在配置文件的 Author 和 hero 子项中。
Footer
页脚做了整个重构,做了左右分栏,将 Dark 切换融合到了整体风格中,而且加了动效!
左侧文字,不是多少天,而是多少晨光、多少晴曛等,这些融合了天文学时间的概念,而且将网站作为一个生命个体看待,你就需要维护网站上线时的时间以及经纬度,之后根据访问者的本地时间进行计算到底是晨光还是别的。具体可以查看 RunningDays.tsx。
我确实忘了我当时怎么想的,所以我问了 Gemini:
这段代码首先读取配置,计算出网站从首发上线至今的累计运行天数。
接着,它将访客的本地时间转换为网站所在时区,并利用坐标推算出当前精确的天文学时间段(例如“破晓”或“暮光”)。
最后,它将天数与当前天文状态拼接在一起,在页面上渲染出类似于“100 次破晓”的动态文本。
再说右侧,右侧是手写字体的一句话和落款,可以多留几句,然后每次构建会选择其中一句进行构建,这个和右侧的动态文本逻辑不同。
解释下为何要这么做,在构思 footer 部分的时候,上方文章卡片和右侧分类是非对称设计,页面整体重心在左侧,原方案的居中方式的页脚,在我看来有些别扭,所以也做了左右拆分(也尝试过三栏、四栏方案),当左侧内容固定时,右侧就出现需要填充的内容,右下角天生就是一个落款角落,从单薄的名字、日期到一句话与名字的转化就逐渐成型。
Light/Dark 功能,随着页脚内容的调整,这个小功能的位置也就成了很大的问题,居中?居右?
右侧是返回顶部的区域,两个功能区不能很好的融合时,冲突感、误操作概率就会增加,选择居中位置,就会让一个简单的单次使用的轻量功能承载过重的重量,所以最后选择了左侧,前文、页脚交接的缝隙中。
还考虑过和顶部搜索组合成顶部功能区的方案,彻底摒弃 Footer 区域的占位。
配置项在 footer 部分。
照片墙
性能拉跨的瀑布流!
原本要设计成根据 EXIF 数据动态读取然后渲染信息的方式的,但是原生照片的大小、质量制约很大,所以就成了人力维护结构化信息,渲染结构化数据的方案。
这部分只有基础的页面数据维护,在 gallery 部分。剩余的是 Json 结构的数据维护。
评论系统
评论系统依然采用了外接的 waline,通知部分的 Bug 不知道修了没有,但是没有替换的想法,只是做了样式的适配,具体可以看 waline.css。就在我截图的时候,我发现,他搞了个突兀的 RSS 订阅的东西,抓狂!
我得把这个烦人的 RSS 干掉了。
总体上来说这些还是低侵入的调整,剩下两个比较麻烦的配置项在 Algolia 检索功能、AI 摘要,晚些补充。