文档页面
您文档中的一个页面
Install via Fumadocs CLI
For advanced customisation that supported options cannot suffice.
npx @fumadocs/cli@latest customise页面是文档的基本元素，它包括目录、页脚和面包屑导航。
使用
import {
DocsPage,
DocsDescription,
DocsTitle,
DocsBody,
} from 'fumadocs-ui/page';
<DocsPage>
<DocsTitle>title</DocsTitle>
<DocsDescription>description</DocsDescription>
<DocsBody>
<h2>This heading looks good!</h2>
It applies the Typography styles, wrap your content here.
</DocsBody>
</DocsPage>;Good to know
Instead of rendering the title with DocsTitle in page.tsx, you can put the title into MDX file.
This will render the title in the MDX body.
在 GitHub 上编辑
您也可以添加自己的组件。
import { DocsBody } from 'fumadocs-ui/page';
<DocsBody>
<a
href={`https://github.com/fuma-nama/fumadocs/blob/main/content/docs/${page.path}`}
rel="noreferrer noopener"
target="_blank"
className="w-fit border rounded-xl p-2 font-medium text-sm text-fd-secondary-foreground bg-fd-secondary transition-colors hover:text-fd-accent-foreground hover:bg-fd-accent"
>
Edit on GitHub
</a>
</DocsBody>;配置
全模式
要将页面扩展以填充所有可用空间，请将 full 传递给页面组件。
这将强制目录以浮窗形式显示。
import { DocsPage } from 'fumadocs-ui/page';
<DocsPage full>...</DocsPage>;目录
文章中所有标题的概述，它需要一个标题数组。
对于 Markdown 和 MDX 文档，您可以使用 TOC 实用工具 来获取它。像 Fumadocs MDX 这样的内容源默认提供此功能。
import { DocsPage } from 'fumadocs-ui/page';
<DocsPage toc={headings}>...</DocsPage>;您可以使用 tableOfContent 选项自定义或禁用它，或者在较小设备上使用 tableOfContentPopover。
import { DocsPage } from 'fumadocs-ui/page';
<DocsPage tableOfContent={options} tableOfContentPopover={options}>
...
</DocsPage>;Prop
Type
样式
您可以为目录选择另一种样式，例如受 https://clerk.com 启发的 clerk：
import { DocsPage } from 'fumadocs-ui/page';
<DocsPage
tableOfContent={{
style: 'clerk',
}}
>
...
</DocsPage>;最后更新时间
显示页面的最后更新时间。
import { DocsPage } from 'fumadocs-ui/page';
<DocsPage lastUpdate={new Date(lastModifiedTime)} />;由于您可能使用不同的版本控制系统（例如 GitHub）或 CMS（如 Sanity），Fumadocs UI 默认不显示最后更新时间。
您可以启用 lastModifiedTime。
import { DocsPage } from 'fumadocs-ui/page';
import { source } from '@/lib/source';
const page = source.getPage(['...']);
<DocsPage lastUpdate={new Date(page.data.lastModified)} />;对于托管在 GitHub 上的文档，您可以使用
getGithubLastEdit 实用工具。
import { DocsPage } from 'fumadocs-ui/page';
import { getGithubLastEdit } from 'fumadocs-core/server';
const time = await getGithubLastEdit({
owner: 'fuma-nama',
repo: 'fumadocs',
path: `content/docs/${page.path}`,
});
<DocsPage lastUpdate={new Date(time)} />;页脚
页脚是一个导航元素，具有两个按钮，用于跳转到下一页和上一页。如果未指定，它将显示从页面树中找到的相邻页面。
使用 footer 选项自定义页脚。
import { DocsPage, DocsBody } from 'fumadocs-ui/page';
<DocsPage footer={options}>
<DocsBody>...</DocsBody>
</DocsPage>;Prop
Type
面包屑导航
一个导航元素，仅在用户在文件夹中导航时显示。
Prop
Type
How is this guide?
Last updated on