Files
blog/content/post/2026/2026-02-03-blog-refurbish/index.md
T
2026-02-02 19:54:45 +08:00

3.5 KiB

title, date, draft, categories, tags, ai_comment
title date draft categories tags ai_comment
周末闲暇时间翻修了一下博客 2026-02-03T09:00:00+08:00 false
碎碎念
博客日记
Hugo
体验优化
趁着周末,博主对博客进行了一次细致的“大扫除”。从毛玻璃风格的视觉微调,到极简搜索框的重构,再到移动端布局和打字机特效的适配,每一处改动都透着对阅读体验的细腻考量。还顺手请来了“蕉太狼”坐镇,让这个技术小站多了一份生活的温度。

这周末不用加班,人闲下来了,打开电脑,chorme浏览器键入 usj.cc ,简单看了一下博客的样式,有几处我还不是很满意。

怎么说呢,虽然一直都在用,但总感觉在一些交互细节和视觉呈现上,还有提升的空间。既然发现了问题,那就趁着有空,把这些“边边角角”打磨一下。

为了避免毫无意义的折腾,这次我并没有什么大刀阔斧的重构,只是做了一些修修补补的工作,希望能让来访的朋友(包括我自己)看着更舒服一点。

毕竟新年新气象,博客作为心灵的镜子,也需要“翻新”一下。

视觉上的“透气感”

之前的界面设计,色块感比较强,看久了难免觉得有些沉闷。

最近留意到一种叫 Glassmorphism(毛玻璃) 的设计风格,通过背景模糊和透明度,能营造出一种层次感。于是尝试着给顶栏和文章卡片加上了这种效果。

调整后的界面,背景若隐若现,整体视觉上轻盈了不少。就像是给窗户擦去了灰尘,通透感出来了,心情也跟着明亮了一些。

首页搜索框的“改造”

之前的搜索框,一直放在右下角作为工具栏存在,思来想去,还是感觉和整体的极简风格不太搭。

于是在蹲坑的时候,奇思妙想,我为何不放到随笔上,这样既能保证风格的简约,又能增加一个搜索文章的入口

就是简单CSS的调整,然后把之前的搜索文章逻辑进行复用,于是就有了现在的效果,做完,还美美的欣赏了一遍,真别说,还不错!

一些贴心的小功能

除了视觉上的调整,也加了两个实用的小功能:

  • 昼夜切换:对于像我这样喜欢深夜阅读的人来说,刺眼的白底黑字简直是“视力杀手”。加上这个切换按钮,是对眼睛最基本的尊重,你可以点击头像进行切换,也可以在其他页面通过工具栏进行切换昼夜模式,这里听取了一个博友的建议,改了昼夜切换的逻辑,默认第一次获取访客的深色模式状态,后续再根据访客的操作进行切换。

  • 蕉太狼温馨提示:在首页右下角加了一个小小的“蕉太狼”挂件。它会在早晨问好,深夜催睡。虽然只是简单的几行代码逻辑,但让博客多了一点“人情味”。

效果展示

旧样式

old style

新样式

new style

new style

写在最后

其实做博客这么久,越来越觉得,内容始终是核心,而样式只是容器。

我们花时间去优化样式,不是无休止的折腾,而是为了让盛在里面的内容能以更优雅、更舒适的姿态呈现给读者。

这次的调整,算是一次小小的“大扫除”吧。看着焕然一新的小站,心里也觉得踏实了不少。希望你们也会喜欢这些细微的变化。