EPUB エクスポート

はじめにアンカーリンクをコピー

EPUB 連携を使うと、Fumadocs のドキュメントを EPUB ファイルとしてエクスポートできます。読者はドキュメントをダウンロードして、電子書籍リーダーやタブレット、各種 EPUB 対応アプリで手軽に読めるようになります。

MDX コンテンツを HTML に変換し、画像を解決したうえで、目次付きの標準規格に準拠した EPUB を生成します。

セットアップアンカーリンクをコピー

Fumadocs CLI を使うと、自動でセットアップできます。CLI は EXPORT_SECRET で保護されたエクスポートルートを作成し、includeProcessedMarkdown を有効にします。

npx @fumadocs/cli feature epub

または、手動でインストールする場合：

インストールアンカーリンクをコピー

npm install fumadocs-epub

処理済み Markdown を有効にするアンカーリンクをコピー

EPUB エクスポートを使うには、docs コレクションの設定で includeProcessedMarkdown を有効にする必要があります。

import { defineDocs } from 'fumadocs-mdx/config';

export const docs = defineDocs({
  docs: {
    postprocess: {
      includeProcessedMarkdown: true,
    },
  },
});

エクスポートルートを作成するアンカーリンクをコピー

createEpubExportAPI はルートハンドラーを構築します。このルートは secret で保護されており、一致する Authorization: Bearer <secret> ヘッダーがないリクエストは拒否されます。また、シークレット自体が設定されていない場合、ルートは 503 を返します。

import type { Route } from './+types/export.epub';
import { source } from '@/lib/source';
import { createEpubExportAPI } from 'fumadocs-epub';

const api = createEpubExportAPI({
  source,
  title: 'My Documentation',
  secret: process.env.EXPORT_SECRET,
});

export function loader({ request }: Route.LoaderArgs) {
  return api.GET(request);
}

エンドポイントを公開する場合や、スクリプト内などでファイルを自前で生成する場合は、exportEpub() を直接呼び出してバッファーを返してください。

CLI を使用するアンカーリンクをコピー

Fumadocs CLI を使って EPUB をエクスポートすることもできます。

fumadocs export epub --framework react-router

ファイルはビルド出力からコピーされるため、事前にプロダクションビルドを実行してください。

オプションアンカーリンクをコピー

exportEpub と createEpubExportAPI はどちらも次のオプションを受け付けます。

createEpubExportAPI では、さらに 2 つのオプションを指定できます。secret (必須。ルートを保護します) と filename (ダウンロード時のファイル名。デフォルトは docs.epub) です。

カスタム CSSアンカーリンクをコピー

デフォルトの EPUB スタイルを上書きできます。

import { exportEpub, defaultEpubStyles } from 'fumadocs-epub';

const buffer = await exportEpub({
  source,
  title: 'My Docs',
  author: 'Me',
  css: `${defaultEpubStyles}
/* 独自のスタイルで上書き */
body { font-size: 1.1em; }
`,
});

ページのフィルタリングアンカーリンクをコピー

includePages と excludePages を使うと、エクスポートするドキュメントを指定できます。

const buffer = await exportEpub({
  source,
  title: 'My Docs',
  author: 'Me',
  // /docs/getting-started 配下のドキュメントのみを対象にする
  includePages: (page) => page.path.startsWith('getting-started'),
  // 特定のパスを除外する
  excludePages: (page) => page.path === 'changelog',
});

画像の解決アンカーリンクをコピー

MDX 内の画像は自動的に解決されます。

• 相対パス (例: ./image.png) ：ページファイルを基準に解決されます
• パブリックパス (例: /og.png) ：public ディレクトリを基準に解決されます
• リモート URL (例: https://...) ：そのまま埋め込まれます