独自に構築する

ページツリーアンカーリンクをコピー

ページツリーはハードコードすることも、コードを書いて生成することもできます。 詳しくはページツリーの定義を参照してください。

Docs レイアウトで、ページツリーを DocsLayout に渡します。

import { DocsLayout } from 'fumadocs-ui/layouts/docs';
import type { ReactNode } from 'react';

export default function Layout({ children }: { children: ReactNode }) {
  return (
    <DocsLayout
      tree={
        {
          // 独自のページツリー
        }
      }
    >
      {children}
    </DocsLayout>
  );
}

ページツリーは、より高機能な「サイドバー項目」のようなもので、ページのフッターなど、UI 内のさまざまなナビゲーション要素から参照されます。

ページコンテンツアンカーリンクをコピー

ドキュメントページも同じ考え方です。

• パスパラメータ (slugs) を定義します。
• パスパラメータをもとにページコンテンツを取得します。
• DocsPage コンポーネント内でコンテンツをレンダリングします。

必要に応じて目次も用意してください。目次は自前で生成することも、getTableOfContents ユーティリティ (Markdown/MDX のみ対応) で生成することもできます。

使用しているフレームワークのドキュメント用ルートでレンダリングします。

import { DocsPage, DocsBody } from 'fumadocs-ui/layouts/docs/page';
import { getPage } from './my-content-source';

export function Page({ slugs }: { slugs: string[] }) {
  const page = getPage(slugs);
  // フレームワークの API を使って 404 を返す
  if (!page) return null;

  return (
    <DocsPage toc={page.tableOfContents}>
      <DocsBody>{page.render()}</DocsBody>
    </DocsPage>
  );
}

プリレンダリングアンカーリンクをコピー

初回の読み込み時間を短縮するため、ページ、特にアクセス頻度の高いページをプリレンダリングします。

ページの getStaticPaths() から params を返します。

リモートのソースからページをプリレンダリングする場合は、ビルド時に同じデータを繰り返し読み込まないよう最適化してください。 たとえば GitHub API 経由でコンテンツを取得している場合は、リポジトリのコンテンツをローカルにクローンしてからプリレンダリングすることをおすすめします。

/docs/* -> GET github.com
/docs/introduction -> GET github.com
/docs/my-page -> GET github.com
Error: API Ratelimit

ドキュメント検索アンカーリンクをコピー

コンテンツが必ずしも Markdown/MDX とは限らないため、検索の実装は難しくなる場合があります。 Markdown と MDX であれば、組み込みの Search API と検索インデックスを使うだけで、ほとんどのユースケースに対応できます。 それ以外の場合は、独自に実装する必要があります。

Orama や Algolia Search などのサードパーティ製ソリューションをおすすめします。これらは組み込みの Search API よりも柔軟性が高く、リモートのソースとも簡単に統合できます。 Fumadocs では、さまざまな検索インテグレーションを提供しています。