手動インストール
既存のWakuプロジェクトにFumadocsを追加します。
Fumadocs CLI を使って自動でセットアップすることもできます。
npx @fumadocs/cli init前提条件
先に進む前に、以下が設定済みであることを確認してください。
- Tailwind CSS 4
- Fumadocs MDX：Vite セットアップガイドに従って、
lib/source.tsなどの必須ファイルを作成してください。
補足
Fumadocs は、Content Collections やヘッドレス CMS など、ほかのコンテンツソースにも対応しています。
はじめに
パッケージをインストールします。
npm i fumadocs-core fumadocs-ui@npm:@fumadocs/base-uiテンプレートと同様に、このコマンドでは fumadocs-ui を、Fumadocs UI の Base UI 版である @fumadocs/base-ui のエイリアスとしてインストールします。Radix UI を使う場合は、エイリアスなしで fumadocs-ui をインストールしてください。
スタイル
Tailwind CSS ファイルに以下を追加します。
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';Root Provider
クライアントコンポーネント内で、アプリ全体を Root Provider でラップしてください。
'use client';
import type { ReactNode } from 'react';
import { RootProvider } from 'fumadocs-ui/provider/waku';
export function Provider({ children }: { children: ReactNode }) {
return <RootProvider>{children}</RootProvider>;
}
ルート
レイアウトで共有するオプションを1つのファイルにまとめます。
import type { BaseLayoutProps } from 'fumadocs-ui/layouts/shared';
import { appName, gitConfig } from './shared';
export function baseOptions(): BaseLayoutProps {
return {
nav: {
// JSX supported
title: appName,
},
githubUrl: `https://github.com/${gitConfig.user}/${gitConfig.repo}`,
};
}
次のファイルを作成します。
import defaultMdxComponents from 'fumadocs-ui/mdx';
import type { MDXComponents } from 'mdx/types';
export function getMDXComponents(components?: MDXComponents) {
return {
...defaultMdxComponents,
...components,
} satisfies MDXComponents;
}
export const useMDXComponents = getMDXComponents;
declare global {
type MDXProvidedComponents = ReturnType<typeof getMDXComponents>;
}
検索ルートでは ZBSearch を使用しています。設定方法についてはドキュメント検索を参照してください。
完了
開発サーバーを起動し、content/docs にドキュメントを作成してください。
---
title: Hello World
---
## Introduction
I love Fumadocs.How is this guide?
最終更新日
General Translation
Ferry Health
assistant-ui
Inkeep