文档页面
你文档中的一页
页面是文档的基础元素，它包括目录、页脚和面包屑导航。
🌐 Page is the base element of a documentation, it includes Table of contents, Footer, and Breadcrumb.
Install via Fumadocs CLI
For advanced customisation that supported options cannot suffice.
npx @fumadocs/cli@latest customise使用
🌐 Usage
根据你的布局导入它。
🌐 Import it according to your layout.
import { DocsPage, DocsDescription, DocsTitle, DocsBody } from 'fumadocs-ui/layouts/docs/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>;知道了
你可以把标题放入 MDX 文件，而不是使用 page.tsx 中的 DocsTitle 来渲染标题。这将在 MDX 正文中渲染标题。
🌐 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 上编辑
🌐 Edit on GitHub
链接到包含你组件的原始 GitHub 文件。
🌐 Link to the original GitHub file with your component.
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
<DocsPage>
<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>
</DocsPage>;最后更新时间
🌐 Last Updated Time
显示页面的最后更新时间。
🌐 Display last updated time of the page.
// docs layout:
import { DocsPage, PageLastUpdate } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage, PageLastUpdate } from 'fumadocs-ui/layouts/notebook/page';
const lastModifiedTime: Date | undefined;
<DocsPage>
{lastModifiedTime && <PageLastUpdate date={lastModifiedTime} />}
</DocsPage>;对于 lastModifiedTime，你可以使用不同的版本控制工具，比如 Github 或 CMS。
🌐 For lastModifiedTime, you can possibly use different version controls like Github or a CMS.
你可以启用 lastModified。
🌐 You can enable lastModified.
import { source } from '@/lib/source';
const page = source.getPage(['...']);
const lastModifiedTime = page.data.lastModified;对于托管在 Github 上的文档，你可以使用 getGithubLastEdit 工具。
🌐 For Github hosted documents, you can use
the getGithubLastEdit utility.
import { getGithubLastEdit } from 'fumadocs-core/content/github';
const lastModifiedTime = await getGithubLastEdit({
owner: 'fuma-nama',
repo: 'fumadocs',
// file path in Git
path: `content/docs/${page.path}`,
});配置
🌐 Configurations
全模式
🌐 Full Mode
要将页面扩展以填满所有可用空间，将 full 传递给页面组件。这将强制 TOC 以弹出窗口的形式显示。
🌐 To extend the page to fill up all available space, pass full to the page component.
This will force TOC to be shown as a popover.
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
<DocsPage full>...</DocsPage>;目录
🌐 Table of Contents
你的文章中所有标题的概览，需要一个标题数组。
🌐 An overview of all the headings in your article, it requires an array of headings.
对于 Markdown 和 MDX 文档，你可以使用 TOC Utility 来获取它。像 Fumadocs MDX 这样的内容源已经开箱即用地提供了这个功能。
🌐 For Markdown and MDX documents, You can obtain it using the TOC Utility. Content sources like Fumadocs MDX offer this out-of-the-box.
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
<DocsPage toc={headings}>...</DocsPage>;你可以使用 tableOfContent 选项自定义或禁用它，或者在较小的设备上使用 tableOfContentPopover。
🌐 You can customise or disable it with the tableOfContent option, or with tableOfContentPopover on smaller devices.
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
<DocsPage tableOfContent={options} tableOfContentPopover={options}>
...
</DocsPage>;Prop
Type
样式
🌐 Style
你可以为目录选择另一种样式，例如受 https://clerk.com 启发的 clerk：
🌐 You can choose another style for TOC, like clerk inspired by https://clerk.com:
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
<DocsPage
tableOfContent={{
style: 'clerk',
}}
>
...
</DocsPage>;你也可以使用 toc-title ID 来设置目录标题的样式。
🌐 You can also style the TOC title with the toc-title ID.
页脚
🌐 Footer
页脚是一个导航元素，包含两个按钮用于跳转到上一页和下一页。如果未指定，它会显示从页面树中找到的相邻页面。
🌐 Footer is a navigation element that has two buttons to jump to the next and previous pages. When not specified, it shows the neighbour pages found from page tree.
使用 footer 选项自定义页脚。
🌐 Customise the footer with the footer option.
// docs layout:
import { DocsPage } from 'fumadocs-ui/layouts/docs/page';
// notebook layout:
import { DocsPage } from 'fumadocs-ui/layouts/notebook/page';
<DocsPage footer={options}>...</DocsPage>;Prop
Type
面包屑
🌐 Breadcrumb
一个导航元素，仅在用户浏览文件夹时显示。
🌐 A navigation element, shown only when user is navigating in folders.
Prop
Type
Last updated on