页面路径与页面树
了解 Fumadocs 如何从内容目录生成页面路径和页面树
Fumadocs 使用 loader() API 从内容目录生成页面路径(slug)和页面树。本指南适用于 Fumadocs MDX 等内容源。你可以像基于文件系统的路由一样组织文件夹和页面。
Frontmatter 属性
MDX 和 Markdown 文件支持通过 frontmatter 自定义:
- title:页面标题
- description:页面描述
- icon:页面图标名称
页面路径
路径根据文件相对于内容文件夹的路径生成:
| 文件路径 | 生成的 Slugs |
|---|---|
./dir/page.mdx | ['dir', 'page'] |
./dir/index.mdx | ['dir'] |
文件夹组织
文件夹分组
用括号包裹文件夹名称可以阻止它们影响子文件的路径:
| 文件路径 | 生成的 Slugs |
|---|---|
./(group-name)/page.mdx | ['page'] |
根文件夹
可以通过 meta.json 将文件夹标记为根文件夹:
{
"title": "文件夹名称",
"description": "可选描述",
"root": true
}根文件夹会隔离其内容,在导航中隐藏其他文件夹。
Meta 文件
在文件夹中创建 meta.json 来自定义显示:
{
"title": "显示名称",
"icon": "MyIcon",
"pages": ["index", "getting-started"],
"defaultOpen": true
}| 属性 | 描述 |
|---|---|
title | 显示名称 |
icon | 图标名称 |
defaultOpen | 默认展开文件夹 |
collapsible | 文件夹可折叠性(默认:true) |
pages | 控制项目顺序 |
Pages 配置
使用特殊语法控制文件夹项目的顺序和结构:
| 类型 | 语法 | 用途 |
|---|---|---|
| 路径 | ./path/to/page | 链接到页面或文件夹 |
| 分隔符 | ---Label--- | 分区分隔线 |
| 链接 | [Text](url) | 插入外部链接 |
| 剩余 | ... | 按字母顺序包含剩余项 |
| 反向剩余 | z...a | 按反向字母顺序排列 |
| 提取 | ...folder | 提取文件夹项目 |
| 排除 | !item | 排除项目 |
图标
Fumadocs 需要通过 loader 配置中的 icon 处理器在运行时将图标名称转换为 JSX 元素。
国际化 (i18n) 路由
有两种解析器样式可用:
点解析器
在文件名后追加语言代码:
meta.json/meta.cn.jsonpage.mdx/page.cn.mdx
目录解析器
按语言文件夹分组文件:
content/docs/
├── en/
│ ├── meta.json
│ └── page.mdx
└── cn/
├── meta.json
└── page.mdx