页面别名与页面结构

概览

🌐 Overview

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

🌐 Fumadocs generates page slugs and page tree (sidebar items) from your content directory using loader(), the routing functionality will be handled by your React framework.

你可以像基于文件系统的路由一样定义文件夹和页面。

🌐 You can define folders and pages similar to file-system based routing.

要进一步自定义其输出，你可以使用加载器插件。

🌐 To customise its output further, you may use Loader Plugins.

文件

🌐 File

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

🌐 For MDX & Markdown file, you can customise page information from frontmatter.

---
title: My Page
description: Best document ever
icon: HomeIcon
---

## Learn More

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

🌐 Fumadocs detects from the following properties to construct page trees.

别名

🌐 Slugs

页面的别名是根据其文件路径生成的。

🌐 The slugs of a page are generated from its file path.

文件夹

🌐 Folder

整理多个页面，你可以创建一个 Meta 文件 来自定义文件夹。

🌐 Organize multiple pages, you can create a Meta file to customise folders.

文件夹组

🌐 Folder Group

默认情况下，将文件放入文件夹会更改其别名。你可以将文件夹名称括在括号中，以避免影响子文件的别名。

🌐 By default, putting a file into folder will change its slugs. You can wrap the folder name in parentheses to avoid impacting the slugs of child files.

根文件夹

🌐 Root Folder

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

🌐 Marks the folder as a root folder, only items in the opened root folder will be visible.

{
  "title": "Name of Folder",
  "description": "The description of root folder (optional)",
  "root": true
}

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

🌐 For example, when you are opening root folder framework, the other folders (e.g. headless) are not shown on the sidebar and other navigation elements.

元

🌐 Meta

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

🌐 Customise folders by creating a meta.json file in the folder.

{
  "title": "Display Name",
  "icon": "MyIcon",
  "pages": ["index", "getting-started"],
  "defaultOpen": true
}

页面

🌐 Pages

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

🌐 Folder items are sorted alphabetically by default, you can add or control the order of items using pages.

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

{
  "pages": [
    "components",
    "---My Separator---",
    "...folder",
    "...",
    "!file",
    "!otherFolder",
    "[Vercel](https://vercel.com)",
    "[Triangle][Vercel](https://vercel.com)"
  ]
}

图标

🌐 Icons

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

🌐 Since Fumadocs doesn't include an icon library, you have to convert the icon names to JSX elements in runtime, and render it as a component.

你可以向 loader() 添加一个 icon 处理器。

🌐 You can add an icon handler to loader().

国际化路由

🌐 i18n Routing

你可以为国际化路由定义不同的样式。

🌐 You can define different style for i18n routing.

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

export const i18n: I18nConfig = {
  // default
  parser: 'dot',
  // or
  parser: 'dir',
};