今晚给博客做了一轮全面的 UI 升级,从配色到动画到细节全部重新设计。
全新设计系统
字体更换 — 从 Noto Serif SC 换成 Noto Sans SC,更现代的无衬线字体,阅读体验更清爽。
统一配色 — 蓝色主题贯穿全站,半透明胶囊标签、选中高亮、hover 状态全部统一。
毛玻璃导航栏 — header 加了 backdrop-filter: blur(12px),滚动时文字不会和背景混在一起。
浮动 Logo — 云朵图标有轻微浮动动画,给页面加点生命力。
页面细节优化
首页 — 英雄区加了渐变文字,推荐商品 hover 上浮,文章列表改成极简行样式。
文章页 — 显示阅读时长(📖 X 分钟 · Y 字),代码块用 GitHub Dark 主题。
商品页 — 卡片布局优化,hover 上浮 + 阴影,平台标签更醒目。
导航页 — 按分类分组,卡片带图标、名称、描述,点击直接跳转。
搜索页 — 全文搜索,支持标题、内容、标签匹配。
新增功能
RSS 订阅 — /feed 输出 RSS 2.0,导航栏有 📡 图标,浏览器自动发现订阅源。
API 限流 — 15 分钟内最多 200 次请求,防止恶意刷接口。
图片懒加载 — 文章中的图片自动 loading="lazy",首屏加载更快。
自定义 404 — 不再是冷冰冰的错误页,有 ☁️ 和"回到首页"按钮。
SEO 增强 — robots.txt、sitemap.xml、Open Graph 标签、canonical 链接。
移动端适配
汉堡菜单 + 下拉展开,所有卡片在小屏幕自适应单列布局。
性能数据
- 首页 HTML:gzip 后 2.4KB
- CSS:gzip 后 5.2KB
- 全站 Gzip 压缩 + 静态资源 30 天缓存
技术细节
- 设计变量统一用 CSS 自定义属性管理
- 所有过渡动画统一 0.15s
- 自定义滚动条、选中高亮
- 平滑滚动
从今天早上搭博客开始,到现在已经是一个功能齐全的个人平台了。域名、HTTPS、备案管理、数据分析、RSS、搜索... 一天的成果。