docsblog-app 的目录结构和路由设计
项目架构
顶层目录结构
docsblog-app/
├── content/ # 内容数据(博客、文档、导航项目等)
├── src/ # 应用源码
├── scripts/ # 工具脚本
├── public/ # 静态资源
├── config.json # 站点全局配置
├── wrangler.jsonc # Cloudflare Workers 部署配置
├── source.config.ts # fumadocs 内容源配置
├── open-next.config.ts # OpenNext 适配配置
└── ...src/ 内部结构
src/
├── app/
│ └── [locale]/ # i18n 路由层
│ ├── blog/ # 博客列表和文章详情
│ ├── docs/ # 文档(fumadocs 驱动)
│ ├── twitter/ # Twitter 账号列表
│ ├── youtube/ # YouTube 频道列表
│ ├── nav-group/ # 导航分组页
│ ├── item/ # 导航工具详情
│ ├── author/ # 作者列表
│ ├── categories/ # 分类页
│ ├── search/ # 搜索页
│ ├── admin/ # 后台管理
│ └── layout.tsx # 全局布局
├── config/ # 模块化配置
│ ├── authors.ts # 作者注册表
│ ├── branding.ts # 品牌配置(logo、站点名)
│ ├── navigation.ts # 固定导航项配置
│ ├── categories/ # 分类注册表
│ ├── nav/ # 导航菜单注册表
│ ├── twitter/ # Twitter 分类配置
│ └── youtube/ # YouTube 分类配置
├── lib/ # 核心工具模块
│ ├── twitter-data.ts # Twitter 数据加载
│ ├── youtube-data.ts # YouTube 数据加载
│ ├── dev-cache.ts # 缓存工具
│ ├── metadata.ts # SEO 元数据工具
│ └── sitemap-utils.ts # Sitemap 生成工具
├── libs/
│ └── source.ts # fumadocs 博客/文档数据源
└── components/ # React 组件
├── ui/ # 基础 UI 组件(shadcn/ui 风格)
├── blog/ # 博客相关组件
├── docs/ # 文档相关组件
└── admin/ # 后台管理组件content/ 内容目录
content/
├── blog/
│ ├── en/ # 英文博客文章(MDX)
│ └── zh-hans/ # 中文博客文章(MDX)
├── docs/
│ ├── en/ # 英文文档(MDX)
│ └── zh-hans/ # 中文文档(MDX)
├── items/ # 导航工具卡片(JSON)
├── twitters/ # Twitter 账号数据(JSON)
└── youtubes/ # YouTube 频道数据(JSON)路由结构
| 路径 | 说明 |
|---|---|
/blog | 博客文章列表 |
/blog/[...slug] | 博客文章详情 |
/docs | 文档首页 |
/docs/[...slug] | 文档页面 |
/twitter | Twitter 账号列表 |
/youtube | YouTube 频道列表 |
/author | 作者列表 |
/categories | 分类页 |
/nav-group/[slug] | 导航分组页 |
/item/[slug] | 导航工具详情 |
/search | 搜索页 |
/admin | 后台管理(需启用) |
i18n 国际化机制
项目支持英文(en)和简体中文(zh-hans)双语。
- 英文为默认语言,URL 中不显示语言前缀。例如:
/blog、/docs - 中文需要
/zh-hans/前缀。例如:/zh-hans/blog、/zh-hans/docs
路由层通过 [locale] 动态段实现语言切换,所有页面组件共享同一套代码,根据 locale 参数加载对应语言的内容和翻译。