← 全部文章

博客美化升级:全新设计系统和功能优化

📖 2 分钟 · 846 字

今晚给博客做了一轮全面的 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、搜索... 一天的成果。