页面 Slug 与页面树

概述

Fumadocs 使用 loader() 从您的内容目录生成 页面 slug 和 页面树（侧边栏项目）， 路由功能将由您的 React 框架处理。

您可以类似于基于文件系统的路由来定义文件夹和页面。

文件

对于 MDX 和 Markdown 文件，您可以从 frontmatter 自定义页面信息。

---
title: 我的页面
description: 最佳文档
icon: HomeIcon
---

## 了解更多

Fumadocs 从以下属性检测并构建页面树。

Slug

页面的 slug 是从其文件路径生成的。

文件夹

组织多个页面时，您可以创建一个 Meta 文件 来自定义文件夹。

文件夹组

默认情况下，将文件放入文件夹会更改其 slug。 您可以将文件夹名称用括号包围，以避免影响子文件的 slug。

根文件夹

将文件夹标记为根文件夹，只有打开的根文件夹中的项目才会可见。

{
  "title": "文件夹名称",
  "description": "根文件夹的描述（可选）",
  "root": true
}

例如，当您打开根文件夹 framework 时，其他文件夹（例如 headless）不会显示在侧边栏和其他导航元素上。

Meta

通过在文件夹中创建一个 meta.json 文件来自定义文件夹。

{
  "title": "显示名称",
  "icon": "MyIcon",
  "pages": ["index", "getting-started"],
  "defaultOpen": true
}

页面

文件夹项目默认按字母顺序排序，您可以使用 pages 添加或控制项目顺序。

{
  "pages": ["index", "getting-started"]
}

• 路径：到页面或文件夹的路径，例如 ./nested/page。
• 分隔符 (---Label---)：两个部分之间的分隔符，使用 ---[Icon]Label--- 包含图标。
• 链接 ([Text](url))：插入链接，使用 [Icon][Text](url) 包含图标。

特殊项目：

• 剩余 (...)：包含剩余页面（按字母顺序排序）。
• 反转剩余 (z...a)：反转的 剩余 项目。
• 提取 (...folder)：从文件夹提取项目。
• 排除 (!item)：从 ... 或 z...a 中排除项目。

{
  "pages": [
    "components",
    "---我的分隔符---",
    "...folder",
    "...",
    "!file",
    "!otherFolder",
    "[Vercel](https://vercel.com)",
    "[Triangle][Vercel](https://vercel.com)"
  ]
}

图标

由于 Fumadocs 不包含图标库，您必须在运行时将图标名称转换为 JSX 元素，并将其渲染为组件。

您可以向 loader() 添加一个 icon 处理程序。

i18n 路由

您可以为 i18n 路由定义不同的样式。

import type { I18nConfig } from 'fumadocs-core/i18n';

export const i18n: I18nConfig = {
  // 默认
  parser: 'dot',
  // 或
  parser: 'dir',
};