跳至內容
Fumadocs

文件頁面

您文件中的一個頁面

Page 是文件頁面的基本元素，其中包含目錄、 頁尾和 Breadcrumb。

Install via Fumadocs CLI

For advanced customization that supported options cannot suffice.

npx @fumadocs/cli@latest customize

使用方式

請根據您使用的版面配置匯入。

page.tsx
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>;

小提示

除了在 page.tsx 中使用 DocsTitle 算繪標題，您也可以直接將標題寫在 MDX 檔案中。 如此一來，標題就會在 MDX 內文中算繪。

頁面操作

顯示 GitHub 連結，以及開啟各 AI 工具的快捷連結。

import { DocsPage, ViewOptionsPopover } from 'fumadocs-ui/layouts/<layout>/page';

const githubUrl = `https://github.com/fuma-nama/fumadocs/blob/main/content/docs/${encodeURI(page.path)}`

<DocsPage>
  <ViewOptionsPopover githubUrl={githubUrl} />
</DocsPage>;

最後更新時間

顯示頁面的最後更新時間。

import { DocsPage, PageLastUpdate } from 'fumadocs-ui/layouts/<layout>/page';

const lastModifiedTime: Date | undefined;

<DocsPage>
  {/* 其他內容 */}
  {lastModifiedTime && <PageLastUpdate date={lastModifiedTime} />}
</DocsPage>;

至於 lastModifiedTime，您可以視情況改用 GitHub 或 CMS 等不同的版本控制來源。

您可以啟用 lastModified。

import { source } from '@/lib/source';
const page = source.getPage(['...']);

const lastModifiedTime = page.data.lastModified;

設定

全寬模式

若要讓頁面延展並填滿所有可用空間，請將 full 傳給頁面元件。 這會強制以彈出視窗的形式顯示目錄。

import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

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

目錄

列出文章中所有標題的總覽，需要傳入一個標題陣列。

對於 Markdown 和 MDX 文件，您可以使用 目錄工具取得。Fumadocs MDX 等內容來源已內建此功能。

import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

<DocsPage toc={headings}>...</DocsPage>;

您可以透過 tableOfContent 自訂目錄；在較小的裝置上，則可改用 tableOfContentPopover。

page.tsx
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

return (
  <DocsPage tableOfContent={options} tableOfContentPopover={options}>
    ...
  </DocsPage>
);

屬性

型別

樣式

為目錄選擇其他樣式：

Introduction

Installation

Configuration

Plugins

Usage

Components

Styling

FAQ

On this page

IntroductionInstallationConfigurationPluginsUsageComponentsStylingFAQ
import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

<DocsPage
  tableOfContent={{
    style: 'clerk',
  }}
>
  ...
</DocsPage>;

替換目錄

若要替換此元件：

import { TOCProvider, TOC, TOCPopover } from './my-toc';

return (
  <DocsPage
    slots={{
      toc: {
        provider: TOCProvider,
        main: TOC,
        popover: TOCPopover,
      },
    }}
  >
    ...
  </DocsPage>
);

您可以使用 Fumadocs CLI，以預設實作為基礎開始修改：

npx @fumadocs/cli add slots/docs/page/toc

頁尾是一種導覽元素，提供兩個按鈕，可跳至上一頁與下一頁。若未指定，則會顯示從頁面樹中找到的相鄰頁面。

您可以透過 footer prop 自訂頁尾：

import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

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

屬性

型別

若要替換此元件：

import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';
import { Footer } from './my-footer';

<DocsPage
  slots={{
    footer: Footer,
  }}
/>;

您可以使用 Fumadocs CLI，以預設實作為基礎開始修改：

npx @fumadocs/cli add slots/docs/page/footer

一種導覽元素，僅在使用者瀏覽資料夾內的頁面時顯示。

您可以透過 breadcrumb 選項自訂 Breadcrumb：

import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';

<DocsPage breadcrumb={options}>...</DocsPage>;

屬性

型別

替換 Breadcrumb

若要替換此元件：

import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';
import { Breadcrumb } from './my-breadcrumb';

<DocsPage
  slots={{
    breadcrumb: Breadcrumb,
  }}
/>;

您可以使用 Fumadocs CLI，以預設實作為基礎開始修改：

npx @fumadocs/cli add slots/docs/page/breadcrumb

容器

容器負責控制包覆 Breadcrumb、內文與頁尾的文章外層元素。

若要替換頁面容器：

import { DocsPage } from 'fumadocs-ui/layouts/<layout>/page';
import { Container } from './my-container';

<DocsPage
  slots={{
    container: Container,
  }}
/>;

您可以使用 Fumadocs CLI，以預設實作為基礎開始：

npx @fumadocs/cli add slots/docs/page/container

How is this guide?

最後更新於

本頁目錄

使用方式頁面操作最後更新時間設定全寬模式目錄樣式替換目錄頁尾替換頁尾Breadcrumb替換 Breadcrumb容器
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep