71 lines
3.8 KiB
Markdown
71 lines
3.8 KiB
Markdown
---
|
|
title: 周末闲暇时间翻修了一下博客
|
|
date: 2026-02-03T09:00:00+08:00
|
|
draft: false
|
|
categories:
|
|
- 碎碎念
|
|
- 博客日记
|
|
tags:
|
|
- Hugo
|
|
- 体验优化
|
|
ai_comment: >-
|
|
趁着周末，博主对博客进行了一次细致的“大扫除”。从毛玻璃风格的视觉微调，到极简搜索框的重构，再到移动端布局和打字机特效的适配，每一处改动都透着对阅读体验的细腻考量。还顺手请来了“蕉太狼”坐镇，让这个技术小站多了一份生活的温度。
|
|
slug: 20260203
|
|
---
|
|
|
|
这周末不用加班，人闲下来了，打开电脑，chorme浏览器键入 usj.cc ，简单看了一下博客的样式，有几处我还不是很满意。
|
|
|
|
怎么说呢，虽然一直都在用，但总感觉在一些交互细节和视觉呈现上，还有提升的空间。既然发现了问题，那就趁着有空，把这些“边边角角”打磨一下。
|
|
|
|
为了避免毫无意义的折腾，这次我并没有什么大刀阔斧的重构，只是做了一些修修补补的工作，希望能让来访的朋友（包括我自己）看着更舒服一点。
|
|
|
|
毕竟新年新气象，博客作为心灵的镜子，也需要“翻新”一下。
|
|
|
|
## 视觉上的“透气感”
|
|
|
|
之前的界面设计，色块感比较强，看久了难免觉得有些沉闷。
|
|
|
|
最近留意到一种叫 **Glassmorphism（毛玻璃）** 的设计风格，通过背景模糊和透明度，能营造出一种层次感。于是尝试着给顶栏和文章卡片加上了这种效果。
|
|
|
|
调整后的界面，背景若隐若现，整体视觉上轻盈了不少。就像是给窗户擦去了灰尘，通透感出来了，心情也跟着明亮了一些。
|
|
|
|
## 首页搜索框的“改造”
|
|
|
|
之前的搜索框，一直放在右下角作为工具栏存在，思来想去，还是感觉和整体的极简风格不太搭。
|
|
|
|
于是在蹲坑的时候，奇思妙想，我为何不放到随笔上，这样既能保证风格的简约，又能增加一个搜索文章的入口
|
|
|
|
就是简单CSS的调整，然后把之前的搜索文章逻辑进行复用，于是就有了现在的效果，做完，还美美的欣赏了一遍，真别说，还不错！
|
|
|
|
## 一些贴心的小功能
|
|
|
|
除了视觉上的调整，也加了两个实用的小功能：
|
|
|
|
* **昼夜切换**：对于像我这样喜欢深夜阅读的人来说，刺眼的白底黑字简直是“视力杀手”。加上这个切换按钮，是对眼睛最基本的尊重，你可以点击头像进行切换，也可以在其他页面通过工具栏进行切换昼夜模式，这里听取了一个博友的建议，改了昼夜切换的逻辑，默认第一次获取访客的深色模式状态，后续再根据访客的操作进行切换。
|
|
|
|
* **蕉太狼温馨提示**：在首页右下角加了一个小小的“蕉太狼”挂件。它会在早晨问好，深夜催睡。虽然只是简单的几行代码逻辑，但让博客多了一点“人情味”。
|
|
|
|
* **丝滑的图片加载**：给文章里的图片加了个“懒加载”动画。以前图片是“刷”的一下出来的，现在是当你滑到它的时候，它会优雅地从下往上浮现出来，那种顺滑的感觉，就像是德芙巧克力一样（夸张了哈），反正我是盯着看了好几遍。
|
|
|
|
## 效果展示
|
|
|
|
旧样式
|
|
|
|
|
|
|
|
新样式
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
## 写在最后
|
|
|
|
其实做博客这么久，越来越觉得，**内容始终是核心，而样式只是容器**。
|
|
|
|
我们花时间去优化样式，不是无休止的折腾，而是为了让盛在里面的内容能以更优雅、更舒适的姿态呈现给读者。
|
|
|
|
这次的调整，算是一次小小的“大扫除”吧。看着焕然一新的小站，心里也觉得踏实了不少。希望你们也会喜欢这些细微的变化。
|