01mvp.com 网站设计思路

这篇文档记录了 01mvp.com 网站的设计思路，包括为什么选择 Fumadocs、为什么要拆分成三个独立区域，以及路径设计的考量。

技术选型：为什么选择 Fumadocs

核心需求

这个网站的核心是内容，主要包括：

AI 教程和指南（结构化、有层级）
博客文章（时间流、个人表达）
项目展示（作品集）

需要一个能够：

快速搭建文档站点
支持 MDX（可以在 Markdown 中使用 React 组件）
有良好的导航和搜索体验
易于维护和扩展

为什么是 Fumadocs

Fumadocs 是基于 Next.js 的文档框架，专门为技术文档设计。选择它的原因：

开箱即用的文档体验
- 自动生成侧边栏导航
- 内置搜索功能
- 响应式设计
- 暗色模式支持
灵活的内容组织
- 支持多个独立的 collection（docs、blog、projects）
- 每个 collection 可以有独立的配置和路由
- 通过 meta.json 控制导航顺序
强大的 MDX 支持
- 可以在 Markdown 中使用 React 组件
- 支持自定义组件（Callout、Card 等）
- 代码高亮、语法检查
基于 Next.js
- 可以自由扩展功能
- SSG/SSR 灵活选择
- 性能优秀
开发体验好
- TypeScript 支持
- 热更新
- 类型安全的路由

架构设计：为什么拆分成三个区域

最初的结构问题

最开始，所有内容都放在 /docs 下：

/docs/ai        - AI 教程
/docs/projects  - 项目展示
/docs/thoughts  - 随笔

这样做的问题：

语义不清晰：projects 和 thoughts 不是"文档"，放在 docs 下不合适
导航混乱：三种不同性质的内容混在一起，用户不知道该去哪里
扩展性差：未来想给 blog 加标签、归档等功能，会和 docs 的结构冲突

重构后的结构

/ai         - AI 教程和指南（结构化知识）
/blog       - 博客文章和随笔（时间流内容）
/projects   - 项目展示和作品集（作品集）

为什么这样拆分

1. 内容定位不同

AI 教程 (/ai)
- 性质：结构化知识、工具性内容
- 组织方式：按主题分类（basics、tools、mvp）
- 更新频率：相对稳定，持续完善
- 阅读方式：按需查找、系统学习
博客 (/blog)
- 性质：时间流内容、个人表达
- 组织方式：按时间倒序
- 更新频率：高频更新
- 阅读方式：浏览最新、按标签筛选
项目 (/projects)
- 性质：作品展示、项目复盘
- 组织方式：按项目独立展示
- 更新频率：项目完成时更新
- 阅读方式：浏览作品、了解经验

2. 用户心智模型

用户来到网站时，会有明确的目标：

"我想学 AI 编程" → 去 /ai
"我想看他最近在想什么" → 去 /blog
"我想看他做过什么项目" → 去 /projects

三个独立的区域，让用户一眼就知道该去哪里。

3. 技术实现的灵活性

每个区域是独立的 Fumadocs collection，可以：

有独立的配置（baseUrl、layout）
使用不同的组件和样式
实现不同的功能（blog 可以加标签、归档；projects 可以加技术栈展示）

技术实现

在 source.config.ts 中定义三个独立的 collection：

// AI 教程和指南
export const docs = defineDocs({
  dir: "content/ai",
  // ...
});

// 博客文章和随笔
export const blog = defineDocs({
  dir: "content/blog",
  // ...
});

// 项目展示和作品集
export const projects = defineDocs({
  dir: "content/projects",
  // ...
});

在 src/lib/source.ts 中创建三个独立的 source：

export const docsSource = loader({
  baseUrl: "/ai",
  source: docs.toFumadocsSource(),
});

export const blogSource = loader({
  baseUrl: "/blog",
  source: blog.toFumadocsSource(),
});

export const projectsSource = loader({
  baseUrl: "/projects",
  source: projects.toFumadocsSource(),
});

每个区域有独立的路由和布局：

src/app/
  ├── ai/[[...slug]]/          # AI 教程路由
  ├── blog/[[...slug]]/        # 博客路由
  └── projects/[[...slug]]/    # 项目路由

路径设计：为什么去掉 /docs 前缀

最初的路径

/docs/ai/xxx
/docs/projects/xxx
/docs/thoughts/xxx

重构后的路径

/ai/xxx
/blog/xxx
/projects/xxx

为什么去掉 /docs

语义更清晰
- /ai/basics 比 /docs/ai/basics 更直观
- 用户一看就知道这是 AI 相关内容
路径更短
- 更好记
- 更容易分享
- SEO 友好
避免混淆
- blog 和 projects 本来就不是"文档"
- 去掉 docs 前缀，让每个区域的定位更明确
扩展性更好
- 未来可以直接加 /tools、/resources 等新区域
- 不需要纠结"这个算不算 docs"

内容组织

AI 教程 (`content/ai/`)

content/ai/
  ├── index.mdx              # AI 教程首页
  ├── meta.json              # 导航配置
  ├── basics/                # 基础入门
  ├── tools/                 # 工具上手
  ├── mvp/                   # 01MVP 系列
  └── ChangeLog.mdx          # 更新日志

特点：

按主题分类
有明确的层级结构
通过 meta.json 控制导航顺序

博客 (`content/blog/`)

content/blog/
  ├── meta.json
  ├── 2026-04-09-why-i-make-ai-tutorials.mdx
  ├── 2026-04-07-my-ai-journey.mdx
  └── 2025-08-01-apple-ecosystem.mdx

特点：

文件名带日期前缀（YYYY-MM-DD-slug.mdx）
frontmatter 中有 date 字段
按时间倒序排列
未来可以加标签、分类

项目 (`content/projects/`)

content/projects/
  ├── meta.json
  ├── index.mdx
  ├── how-i-built-and-deployed-this-blog.mdx
  ├── mac-tool-100-users.mdx
  └── ai-meditation-website.mdx

特点：

每个项目一个文件
可以包含项目截图、技术栈、复盘等
未来可以做成卡片式展示

未来可以做的优化

博客功能增强

标签系统（按主题筛选）
归档页面（按年份/月份）
RSS 订阅
相关文章推荐

项目展示优化

卡片式布局（图片 + 简介）
技术栈标签
GitHub 链接、Demo 链接
项目时间线

搜索优化

全站搜索（目前只能搜索单个 collection）
搜索结果按区域分组
搜索建议

性能优化

图片优化（Next.js Image）
代码分割
预加载关键资源

总结

这个网站的设计思路是：

内容优先：选择 Fumadocs 是因为它专注于内容展示
清晰分区：三个独立区域，让用户一眼知道该去哪里
简洁路径：去掉 /docs 前缀，让路径更直观
灵活扩展：每个区域独立配置，未来可以自由扩展功能

核心原则是：让用户快速找到他们想要的内容。