写在前面
距离上次写博客搭建文章已经过了几个月了。这段时间里，我一直在用这个博客写文章、记录生活，但总觉得少了点什么——功能太单调了，读者体验也不够好。
于是趁着周末，我决定给博客来一次大升级。没想到这一改就停不下来了，最后做了 50+ 项改进，涉及 70+ 个文件，提交了 9 次 commit。
这篇文章记录一下这次升级的过程，包括做了什么、怎么做的、踩了哪些坑。
为什么要升级
说实话，之前的博客虽然能用，但有几个问题一直困扰我：
- 功能单调 — 除了写文章和评论，没有其他互动方式
- 搜索不够好 — kbar 搜索只能匹配标题，不能搜文章内容
- 分享不方便 — 想分享给朋友，只有几个国外平台的按钮
- 阅读体验一般 — 字体大小固定，没有专注模式
- MDX 组件太少 — 写技术文章时想用 Tabs、Steps 这些组件，但没有
- 有几个 Bug — 图片放大不了、一言不刷新、有测试数据残留
所以这次的目标很明确：让博客从"能用"变成"好用"。
这次做了什么
🐛 Bug 修复（4 项）
- 修复了
trusted-devices.json被意外提交到 Git 的安全问题 - 实现了一言（Hitokoto）30 秒自动刷新 + 淡入淡出动画
- 清理了 Moments 里的测试数据
- 移除了代码块的 Run 按钮（Sandpack 加载太不稳定了）
📦 MDX 组件库（15 个新组件）
这是这次升级最大的工作量。我一口气做了 15 个 MDX 组件：
| 组件 | 用途 |
|---|---|
| Callout | 提示框（info/tip/warning/error/success） |
| Tabs | 选项卡（多语言代码对比） |
| Steps | 步骤指南（带时间线） |
| Accordion | 折叠面板（FAQ） |
| ComparisonTable | 对比表格（✅/❌） |
| Timeline | 时间线 |
| FileTree | 文件目录树 |
| Terminal | 终端输出 |
| Kbd | 键盘按键 |
| GitHubCard | GitHub 仓库卡片 |
| BeforeAfter | 图片对比滑块 |
| Chart | SVG 图表 |
| Video | B站/YouTube 嵌入 |
| MathNumber | 公式编号 |
🔍 Pagefind 全文搜索
这是我最满意的功能之一。Pagefind 在构建时自动索引所有文章内容，支持中文分词，搜索速度极快。
📖 阅读体验增强（6 项）
- 字体大小控制（S/M/L 三档）
- 专注阅读模式（隐藏所有干扰）
- 阅读位置记忆（下次打开恢复位置）
- 文章语音朗读（Web Speech API）
- 文章难度标签
- 归档时间线页面
🔗 社交分享（7 渠道）
微信（二维码）、QQ、微博、X、Telegram、Reddit、复制链接。移动端优先使用系统原生分享。
🎨 视觉与动画
- 页面切换动画（View Transitions API）
- 终端风格 404 页面（打字机效果）
- 暗色模式切换动画（圆形扩散）
📱 移动端优化
- 左右滑动切换文章
- PWA 安装提示
- 下拉刷新动画
🔧 其他改进（15+ 项）
键盘导航 J/K、拼音搜索、KaTeX 公式复制、Mermaid 图表放大、TOC 折叠记忆、文章卡片入场动画、代码块增强（行号/文件名）等等。
技术亮点
Pagefind 全文搜索
Pagefind 的集成非常简单。只需要在 postbuild 脚本中加一行：
npx pagefind --site out --glob "**/*.html"它会自动扫描所有 HTML 页面，生成搜索索引。在文章内容区域加上 data-pagefind-body 属性，就能精确控制索引范围：
<div className="prose" data-pagefind-body>
{children}
</div>搜索结果支持中文分词，虽然不支持词干提取（stemming），但对于博客搜索来说完全够用了。
MDX 组件示例
有了这些组件，写技术文章方便多了。比如：
<Callout type="tip" title="小贴士">
使用 `pnpm` 比 `npm` 快很多，而且节省磁盘空间。
</Callout>
<Tabs items={['pnpm', 'npm', 'yarn']}>
<Tab value="pnpm">pnpm install next</Tab>
<Tab value="npm">npm install next</Tab>
<Tab value="yarn">yarn add next</Tab>
</Tabs>
<Steps>
<Step title="安装依赖">运行 pnpm install</Step>
<Step title="启动开发">运行 pnpm dev</Step>
<Step title="构建部署">运行 pnpm build</Step>
</Steps>液态玻璃设计统一
这次把所有组件都统一到了液态玻璃设计系统。四个层级：
liquid-glass— 标准卡片liquid-glass-elevated— 弹出层/模态框liquid-glass-subtle— 次要元素liquid-glass-input— 表单输入
所有新组件都遵循这个规范，确保视觉一致性。
View Transitions 页面动画
利用浏览器原生的 View Transitions API，实现了页面切换时的平滑过渡。不支持的浏览器会自动降级为普通跳转，不影响功能。
遇到的坑
1. Cloudflare Pages 不支持原生模块
一开始我想用 @xenova/transformers 在构建时跑本地 AI 模型来做语义搜索。结果发现 CF Pages 的构建环境不支持 onnxruntime-node（原生 C++ 模块）。
最后放弃了 AI 方案，改用 Pagefind + 标签权重算法。对于我目前不到 10 篇文章的规模，效果其实差不多。
2. Sandpack 加载不稳定
代码块的"Run"按钮用的是 CodeSandbox 的 Sandpack，但不管开不开加速器都经常加载失败，一直转圈。最后决定直接移除这个功能。
3. overflow-hidden 阻止图片缩放
react-medium-image-zoom 的放大效果被父容器的 overflow-hidden 给裁剪了。解决方法很简单——把 overflow-hidden 去掉就行。
4. Safari 隐私模式 localStorage 报错
Safari 的隐私浏览模式下，localStorage.setItem() 会直接抛异常。所有用到 localStorage 的地方都需要 try/catch 包裹。
数据统计
| 指标 | 数字 |
|---|---|
| 总改进项 | 50+ |
| 新增 MDX 组件 | 15 个 |
| Git 提交 | 9 次 |
| 涉及文件 | 70+ |
| 新增代码行 | ~3000 行 |
| 分享渠道 | 7 个 |
下一步
- 📝 继续写文章，记录学习和生活
- 🎓 准备高考（这才是正事！）
- 🔧 根据实际使用情况继续打磨细节
- 📊 观察 Pagefind 搜索的实际效果
总结
做博客就像种花——你不能指望种下去第二天就开花，需要持续浇水、施肥、修剪。每次升级都是一次"施肥"，让博客变得更好一点。
这次 v2.0 升级让我学到了很多：
- 不要过度工程化 — 一开始想用 AI 模型，后来发现简单算法就够用
- 用户体验很重要 — 小细节（如字体控制、位置记忆）能大幅提升阅读感受
- 保持一致性 — 液态玻璃设计系统让所有组件看起来是一个整体
- 渐进增强 — 新功能不支持就降级，不影响基本使用
好了，该去复习了。高考加油！💪
