从 xLog 回归自建,为了探索更极致的文档交互与开发者体验,我基于 Fumadocs 重构了个人博客。
使用 Next.js 16 (React 19) 和 Tailwind v4,引入了 Twoslash 静态类型检查,让技术文章拥有 IDE 般的阅读质感。
核心特性
1. 沉浸式代码阅读体验
- IDE 级交互:集成 Twoslash ,支持代码块内的静态类型检查。鼠标悬停变量即可查看 TypeScript 类型定义。
- 智能高亮:基于 Shiki 的构建时渲染,支持 diff 、focus 等丰富的代码块修饰。
2. 代码驱动的内容创作
- Mermaid / KaTeX:原生支持流程图绘制与复杂数学公式渲染。
- MDX 驱动:组件化写作,灵活嵌入 React 组件。
3. 极简设计
- 排版:正文 Geist Sans + 代码 JetBrains Mono ,几何无衬线与等宽字体的舒适组合。
- 深色模式:基于 Tailwind CSS v4 的语义化配置,丝滑切换。
- 移动优先:完美的移动端适配。
技术栈
- Framework: Next.js 16 (App Router) + React 19
- Runtime: Bun (极速依赖安装与冷启动)
- Linter: Biome (替代 ESLint/Prettier ,秒级格式化)
- Search: 本地全文索引(无外部依赖)