コンテンツへスキップ
Fumadocs

ドキュメントページ

ドキュメント内の 1 ページ

Page はドキュメントの基本となる要素で、目次、 フッター、パンくずリストが含まれます。

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

フッターは、前後のページへ移動する2つのボタンを備えたナビゲーション要素です。指定しない場合は、ページツリーから取得した隣接ページが表示されます。

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 オプションでパンくずリストをカスタマイズできます。

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

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

プロパティ

型

パンくずリストを置き換える

コンポーネントを置き換えるには、次のようにします。

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

Container

Container は、パンくずリスト、本文、フッターを囲む記事のラッパーを制御します。

ページのコンテナを置き換えるには、次のようにします。

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?

最終更新日

このページの内容

使い方ページアクション最終更新日時設定フルモード目次スタイル目次の置き換えフッターフッターを置き換えるパンくずリストパンくずリストを置き換えるContainer
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep