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

page.tsx で DocsTitle を使用してタイトルをレンダリングする代わりに、タイトルを MDX ファイルに入れることができます。これにより、MDX 本文にタイトルがレンダリングされます。

ボディ

Typography スタイルを適用し、コンテンツを内側にラップします。

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

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

Cカテゴリ

オプションで、(ページツリー) フォルダー内の他のページをカードにリンクします。

このコンポーネントは <DocsPage /> なしでも使用できます。

page.tsx

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

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

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

デモ:

構成

フルモード

ページを拡張して利用可能なスペースをすべて埋めるには、full をページコンポーネントに渡します。これにより、目次が強制的にポップオーバーとして表示されます。

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 のスキーマ type を更新することを忘れないでください。

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}`,
  }}
/>;

フッター

フッターは、次のページと前のページにジャンプする 2 つのボタンがあるナビゲーション要素です。指定しない場合は、ページツリーから見つかった隣接ページを表示します。

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

ボディ

Typography スタイルを適用し、コンテンツを内側にラップします。

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

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

Cカテゴリ

オプションで、(ページツリー) フォルダー内の他のページをカードにリンクします。

このコンポーネントは <DocsPage /> なしでも使用できます。

page.tsx

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

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

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

デモ:

構成

フルモード

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

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

最終更新時間

ページの最終更新時刻を表示します。

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

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

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

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 を使用したページが作成されます。

ドキュメントページ

使用状況

ボディ

Cカテゴリ

構成

フルモード

目次

スタイル

ポップオーバーモード

最終更新時間

GitHub で編集

フッター

ブレッドクラム

MDX ページ

目次

ドキュメントページ

使用状況

ボディ

Cカテゴリ

構成

フルモード

目次

スタイル

ポップオーバーモード

最終更新時間

GitHub で編集

フッター

ブレッドクラム

MDX ページ

目次