toMedia

页面路径与页面树

了解 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.json
  • page.mdx / page.cn.mdx

目录解析器

按语言文件夹分组文件:

content/docs/
  ├── en/
  │   ├── meta.json
  │   └── page.mdx
  └── cn/
      ├── meta.json
      └── page.mdx

On this page