コンテンツへスキップ
Fumadocs

手動インストール

既存のAstroプロジェクトにFumadocsを追加します。

Fumadocs CLI を使って自動でセットアップすることもできます。

npx @fumadocs/cli init

前提条件

先に進む前に、以下が設定済みであることを確認してください。

  • Node.js 22.23.4 以降(Astro の要件)
  • Tailwind CSS 4

このガイドでは、コンテンツソースとして Astro の content collections を使用します。@fumadocs/astro は content collections を Fumadocs でコンパイルし、その MDX を React アイランドとしてレンダリングします。

はじめに

パッケージをインストールします。

npm i fumadocs-core fumadocs-ui@npm:@fumadocs/base-ui @fumadocs/astro @astrojs/react react react-dom @types/mdx

テンプレートと同様に、このコマンドでは 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';

インテグレーション

Astro の設定に Fumadocs インテグレーションを追加します。

astro.config.mjs
import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import fumadocs from '@fumadocs/astro';

export default defineConfig({
  integrations: [fumadocs({ components: './src/components/mdx.tsx' })],
  vite: {
    plugins: [tailwindcss()],
  },
});

コンテンツコレクション

コンテンツコレクションを定義します。

src/content.config.ts
import { defineCollection } from 'astro:content';
import { metaLoader, pageLoader } from '@fumadocs/astro/loaders';

export const collections = {
  docs: defineCollection({ loader: pageLoader() }),
  meta: defineCollection({ loader: metaLoader() }),
};

コレクションから Fumadocs のソースを作成します。

src/lib/source.ts
import { getCollection } from 'astro:content';
import { loader } from 'fumadocs-core/source';
import { toFumadocsSource } from '@fumadocs/astro/source';

export const source = loader({
  source: toFumadocsSource(await getCollection('docs'), await getCollection('meta')),
  baseUrl: '/docs',
});

1つの loader() で他のソースと組み合わせる場合は、toFumadocsSource() の第3引数に { baseDir } を渡すと、そのファイルを特定のディレクトリ配下に配置できます。

ルート

次のファイルを作成します。

import defaultMdxComponents from 'fumadocs-ui/mdx';
import { DocsBody } from 'fumadocs-ui/layouts/docs/page';
import type { MDXComponents } from 'mdx/types';

export function getMDXComponents(components?: MDXComponents) {
  return {
    ...defaultMdxComponents,
    ...components,
  } satisfies MDXComponents;
}

// for the Fumadocs integration, `wrapper` gives the content its prose styles
export default getMDXComponents({ wrapper: DocsBody });

検索ルートでは ZBSearch を使用しています。設定方法についてはドキュメント検索を参照してください。

完了

開発サーバーを起動し、content/docs にドキュメントを作成してください。

content/docs/index.mdx
---
title: Hello World
---

## Introduction

I love Fumadocs.

How is this guide?

最終更新日

このページの内容

前提条件はじめにスタイルインテグレーションコンテンツコレクションルート完了
Sponsors
General TranslationGeneral TranslationFerry HealthFerry Healthassistant-uiassistant-uiInkeepInkeep