博客系统更新报告 - 2026年6月2日

本次更新概览

本次更新主要包含以下内容：

​‌‌​‌‌​​​‌‌​‌‌‌‌​‌‌​​​‌‌​‌‌​​​​‌​‌‌​‌‌​​​‌‌​‌​​​​‌‌​‌‌‌‌​‌‌‌​​‌‌​‌‌‌​‌​​​‌‌‌‌‌​​​‌‌​​​​‌​​‌‌‌​‌​​​‌‌​​‌‌​​‌‌​​‌‌​‌‌‌‌‌​​​‌‌‌​‌​​​​‌‌‌​‌​​‌‌​‌‌​‌​‌‌‌​​‌‌​‌‌‌​‌‌​​‌‌​‌​​‌​‌‌​‌​‌‌​‌‌‌​‌​​​‌‌​​‌​‌​‌‌‌​‌​​

• 新增「实验」页面：展示博客正在实验中的功能 demo 和已上线的功能
• 性能优化：ISR 缓存、图片懒加载、骨架屏、虚拟列表、字体本地化
• Bug 修复：修复图片视频资源无法加载、白屏问题

一、新增「实验」页面

在侧边栏新增了「实验」入口，使用烧瓶图标作为标志。该页面展示：

• Demo 功能：正在开发中的实验性功能
• 已上线功能：已经正式发布的功能特性

每个功能卡片之间采用丝带链接和线性动画效果，营造高级质感。

技术实现

• 后端：新增 experiments 表，提供完整 CRUD API
• 前端：Vue 3 组件，支持卡片动画和交互
• 管理后台：支持实验项目的增删改查、排序等操作

二、性能优化

1. ISR 缓存（增量静态再生）

为只读 API 添加了服务端缓存，减少数据库查询：

• 文章列表：缓存 10 分钟
• 动态列表：缓存 5 分钟
• 项目列表：缓存 1 小时
• 媒体列表：缓存 5 分钟

缓存命中时响应头会返回 X-Cache: HIT。

2. 图片懒加载

新增 Vue 自定义指令 v-lazy 和 v-lazy-bg：

• 使用原生 IntersectionObserver API
• 图片进入视口前 100px 开始加载
• 加载过程带有淡入动画效果

3. 骨架屏组件

新增三个骨架屏组件：

• Skeleton：基础骨架屏，带 shimmer 动画
• SkeletonCard：卡片骨架屏
• SkeletonArticle：文章骨架屏

4. 虚拟列表组件

新增 VirtualList 组件，用于大数据量列表渲染：

• 只渲染可视区域内的元素
• 支持动态高度
• 大幅提升长列表性能

5. Nginx 静态资源缓存

优化了 Nginx 配置：

• JS/CSS/图片等静态资源：缓存 30 天
• 上传的图片视频：缓存 30 天
• HTML 文件：不缓存，确保更新及时生效

6. 字体本地化

将霞鹜文楷（LXGW WenKai）字体从 CDN 迁移到本地服务器：

• 问题：字体从 CDN 加载，每次刷新都需要跨域请求，加载较慢
• 方案：下载字体文件到服务器 /fonts 目录，利用 Nginx 缓存
• 效果：字体文件 30 天强缓存 + immutable 标记，浏览器不会重新验证

字体总大小约 2.6MB（47 个子集文件），按需加载。

三、Bug 修复

1. 图片视频资源无法加载

问题描述：所有图片和视频资源返回 404 错误。

原因分析：Nginx 配置中正则匹配优先级高于前缀匹配，导致图片请求被错误路由。

解决方案：使用 ^~ 修饰符提升前缀匹配优先级。

2. 白屏问题

问题描述：网站打开后显示白屏，侧边栏点击无反应。

原因分析：误将开发模式的 index.html 上传到服务器，引用的是 /src/main.js 而非打包后的 JS 文件。

解决方案：重新构建前端，确保使用正确的打包文件。

四、后续计划

• 继续优化前端性能
• 完善实验页面的功能展示
• 探索更多缓存策略

感谢您的关注！如有问题或建议，欢迎在评论区留言。