[开源] 重构博客：基于 Next.js 16 + Fumadocs

[occupy555]

从 xLog 回归自建，为了探索更极致的文档交互与开发者体验，我基于 Fumadocs 重构了个人博客。

使用 Next.js 16 (React 19) 和 Tailwind v4，引入了 Twoslash 静态类型检查，让技术文章拥有 IDE 般的阅读质感。

• GitHub： [ https://github.com/occupy5/blog ]
• Demo： [ https://shenn.xyz/posts/refactor_blog ]

核心特性

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: 本地全文索引（无外部依赖）

[occupy555]

博客地址： https://shenn.xyz