X (Twitter)

页面是文档的基本元素，它包括目录，页脚和面包屑。

用法

page.tsx

import {
  DocsPage,
  DocsDescription,
  DocsTitle,
  DocsBody,
} from 'fumadocs-ui/page';

<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>...</DocsBody>
</DocsPage>;

Good to know

您可以将标题放入 MDX 文件中，而不是在 page.tsx 中使用 DocsTitle 渲染标题。这将在 MDX 正文中呈现标题。

本体

它应用 Typography 样式，将您的内容包裹在里面。

import { DocsBody } from 'fumadocs-ui/page';

<DocsBody>
  <h1>This heading looks good!</h1>
</DocsBody>;

类别

可选，使用卡片链接其（页面树）文件夹中的其他页面。

您可以在没有<DocsPage />的情况下使用该组件。

page.tsx

import { source } from '@/lib/source';
import { DocsCategory } from 'fumadocs-ui/page';

const page = source.getPage(['...']);

<DocsCategory page={page} from={source} />;

演示：

配置

完整模式

要扩展页面以填充所有可用空间，请将 full 传递给页面组件。这将强制 TOC 显示为弹出窗口。

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage full>...</DocsPage>;

最后更新时间

显示页面的最后更新时间。

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage lastUpdate={new Date(lastModifiedTime)} />;

因为你可能有不同的版本控制（例如 Github）或者它来自像 Sanity、Fumadocs UI 这样的远程源不会显示最后更新时间默认。

对于 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.file.path}`,
});

<DocsPage lastUpdate={new Date(time)} />;

Note

您还可以指定文档的最后更新时间（例如使用 frontmatter）。不要忘记首先更新 Fumadocs MDX 上的架构类型。

在 GitHub 上编辑

在页面中添加“在 GitHub 上编辑”按钮。

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage
  editOnGithub={{
    owner: 'fuma-nama',
    repo: 'fumadocs',
    sha: 'main',
    // file path, make sure it's valid
    path: `content/docs/${page.file.path}`,
  }}
/>;

页脚

页脚是一个导航元素，有两个按钮可跳转到下一页和上一页。如果未指定，则显示从页面树中找到的邻居页面。

使用 footer 选项自定义页脚。

import { DocsPage, DocsBody } from 'fumadocs-ui/page';

<DocsPage footer={options}>
  <DocsBody>...</DocsBody>
</DocsPage>;

面包屑

导航元素，仅当用户在文件夹中导航时显示。

MDX 页

结合 Fumadocs MDX，您可以创建一个 page.mdx 文件并添加以下内容。

export { withArticle as default } from 'fumadocs-ui/page';

## Hello World

这将使用 MDX 创建一个页面，并应用适当的排版样式。

页面是文档的基本元素，它包括目录，页脚和面包屑。

用法

page.tsx

import {
  DocsPage,
  DocsDescription,
  DocsTitle,
  DocsBody,
} from 'fumadocs-ui/page';

<DocsPage>
  <DocsTitle>title</DocsTitle>
  <DocsDescription>description</DocsDescription>
  <DocsBody>...</DocsBody>
</DocsPage>;

Good to know

您可以将标题放入 MDX 文件中，而不是在 page.tsx 中使用 DocsTitle 渲染标题。这将在 MDX 正文中呈现标题。

本体

它应用 Typography 样式，将您的内容包裹在里面。

import { DocsBody } from 'fumadocs-ui/page';

<DocsBody>
  <h1>This heading looks good!</h1>
</DocsBody>;

类别

可选，使用卡片链接其（页面树）文件夹中的其他页面。

您可以在没有<DocsPage />的情况下使用该组件。

page.tsx

import { source } from '@/lib/source';
import { DocsCategory } from 'fumadocs-ui/page';

const page = source.getPage(['...']);

<DocsCategory page={page} from={source} />;

演示：

配置

完整模式

要扩展页面以填充所有可用空间，请将 full 传递给页面组件。这将强制 TOC 显示为弹出窗口。

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage full>...</DocsPage>;

最后更新时间

显示页面的最后更新时间。

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage lastUpdate={new Date(lastModifiedTime)} />;

因为你可能有不同的版本控制（例如 Github）或者它来自像 Sanity、Fumadocs UI 这样的远程源不会显示最后更新时间默认。

对于 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.file.path}`,
});

<DocsPage lastUpdate={new Date(time)} />;

Note

您还可以指定文档的最后更新时间（例如使用 frontmatter）。不要忘记首先更新 Fumadocs MDX 上的架构类型。

在 GitHub 上编辑

在页面中添加“在 GitHub 上编辑”按钮。

import { DocsPage } from 'fumadocs-ui/page';

<DocsPage
  editOnGithub={{
    owner: 'fuma-nama',
    repo: 'fumadocs',
    sha: 'main',
    // file path, make sure it's valid
    path: `content/docs/${page.file.path}`,
  }}
/>;

页脚

页脚是一个导航元素，有两个按钮可跳转到下一页和上一页。如果未指定，则显示从页面树中找到的邻居页面。

使用 footer 选项自定义页脚。

import { DocsPage, DocsBody } from 'fumadocs-ui/page';

<DocsPage footer={options}>
  <DocsBody>...</DocsBody>
</DocsPage>;

面包屑

导航元素，仅当用户在文件夹中导航时显示。

MDX 页

结合 Fumadocs MDX，您可以创建一个 page.mdx 文件并添加以下内容。

export { withArticle as default } from 'fumadocs-ui/page';

## Hello World

这将使用 MDX 创建一个页面，并应用适当的排版样式。

文档页面

用法

本体

类别

配置

完整模式

目录

款式

弹出模式

最后更新时间

在 GitHub 上编辑

页脚

面包屑

MDX 页

目录

文档页面

用法

本体

类别

配置

完整模式

目录

款式

弹出模式

最后更新时间

在 GitHub 上编辑

页脚

面包屑

MDX 页

目录