大家好!
最近如果你经常访问我的博客,可能会发现它悄悄地“变脸”了!没错,在过去的一段时间里,我投入了不少精力对博客的前端界面进行了一次比较全面的美化和升级。目的很简单:提升阅读体验,让它看起来更现代、更舒服!
这次“美容手术”主要包含以下几个方面:
1. 移动端体验大优化 📱
我知道很多朋友习惯用手机浏览,所以移动端的优化是重中之重:
- 告别错位:修复了之前手机端首页头像有时会“乱跑”的问题。
- 导航助手:为文章页面添加了浮动目录按钮和回到顶部按钮。现在,即使是长篇大论,也能轻松定位和返回顶部啦!
- 布局适配:整体调整了边距、卡片样式和字体大小,使其在小屏幕上显示更加和谐。
2. 视觉风格全面革新 🎨
无论是桌面端还是移动端,整体视觉风格都进行了一次升级:
- 更柔和的观感:采用了带有透明度和模糊效果的背景与卡片设计(类似毛玻璃效果),增加了页面的层次感。
- 精致的细节:优化了圆角、阴影和边框,让元素看起来更加细腻。列表项、标签、按钮等都添加了更平滑的悬停效果和过渡动画。
- 现代感字体与排版:微调了字体、行高和段落间距,力求更佳的阅读舒适度。文章标题也更加醒目。
3. 性能优化:定制懒加载 🚀
考虑到网站图片基本都使用了 jsDelivr CDN,为了进一步提升加载速度:
- 懒加载上线:我编写并部署了一个定制的图片懒加载脚本。现在,页面中的图片(除了头像和部分小图标)只有在即将滚动到视口时才会加载,这对于图片较多的文章页面效果尤其明显,可以有效减少初始加载时间。
- 告别第三方库:替换掉了之前尝试使用的第三方懒加载库,现在这个功能完全由我们自己掌控,更贴合博客的实际需求。
4. 侧边栏信息卡片 📊
如果你在桌面端访问,应该能看到页面左侧(或特定位置)新增了一个信息统计卡片,展示了网站运行天数、访问量等数据,增添了一点小小的“仪式感”。
这次改动主要涉及大量的 CSS 样式调整和一些 JavaScript 脚本的优化与编写。虽然过程有点繁琐(尤其是调试各种细节😂),但看到最终的效果,感觉还是挺值得的。
欢迎大家到处点点看,体验一下新界面! 如果在浏览过程中发现任何显示异常、样式错乱,或者有任何改进建议,请务必通过评论告诉我,我会尽快修复和完善!
感谢大家的关注和支持!