バージョン: 3.5.2

設定

情報

オプションの完全なリストについては、docusaurus.config.js API リファレンス を確認してください。

Docusaurus は設定に対して独自のアプローチを採用しています。サイトに関する情報を一箇所に集約することを推奨しています。このファイルのフィールドを保護し、このデータオブジェクトをサイト全体でアクセスできるようにします。

適切にメンテナンスされた docusaurus.config.js を維持することで、あなた、共同作業者、そしてオープンソースの貢献者が、サイトのカスタマイズをしながらもドキュメント作成に集中できるようになります。

`docusaurus.config.js` を宣言するための構文

docusaurus.config.js ファイルは Node.js で実行され、以下のいずれかをエクスポートする必要があります。

設定オブジェクト
設定オブジェクトを作成する関数

情報

docusaurus.config.js ファイルは以下をサポートしています。

制約

必須: export default /* 設定 */ (または module.exports) を使用して Docusaurus 設定をエクスポートします。
オプション: import Lib from 'lib' (または require('lib')) を使用して Node.js パッケージをインポートします。

Docusaurus は、設定をさまざまな同等の方法で宣言する機能を提供しており、以下のすべての設定例はまったく同じ結果になります。

docusaurus.config.js
export default {
  title: 'Docusaurus',
  url: 'https://docusaurus.dokyumento.jp',
  // your site config ...
};

docusaurus.config.js
module.exports = {
  title: 'Docusaurus',
  url: 'https://docusaurus.dokyumento.jp',
  // your site config ...
};

docusaurus.config.ts
import type {Config} from '@docusaurus/types';

export default {
  title: 'Docusaurus',
  url: 'https://docusaurus.dokyumento.jp',
  // your site config ...
} satisfies Config;

docusaurus.config.js
const config = {
  title: 'Docusaurus',
  url: 'https://docusaurus.dokyumento.jp',
  // your site config ...
};

export default config;

docusaurus.config.js
export default function configCreator() {
  return {
    title: 'Docusaurus',
    url: 'https://docusaurus.dokyumento.jp',
    // your site config ...
  };
}

docusaurus.config.js
export default async function createConfigAsync() {
  return {
    title: 'Docusaurus',
    url: 'https://docusaurus.dokyumento.jp',
    // your site config ...
  };
}

ESM 専用パッケージの使用

非同期設定クリエーターを使用すると、ESM 専用モジュール（特にほとんどの Remark プラグイン）をインポートするのに役立ちます。動的インポートのおかげで、そのようなモジュールをインポートすることが可能です。

docusaurus.config.js
export default async function createConfigAsync() {
  // Use a dynamic import instead of require('esm-lib')
  const lib = await import('lib');

  return {
    title: 'Docusaurus',
    url: 'https://docusaurus.dokyumento.jp',
    // rest of your site config...
  };
}

`docusaurus.config.js` には何が含まれますか？

サイトを開発している場合でも、docusaurus.config.js を最初から書く必要はありません。すべてのテンプレートには、一般的なオプションのデフォルト値を含む docusaurus.config.js が付属しています。

ただし、設定がどのように設計および実装されているかについて、概要を理解しておくと役立ちます。

Docusaurus 設定の概要は、以下のカテゴリに分類できます。

サイトメタデータ
デプロイ設定
テーマ、プラグイン、およびプリセット設定
カスタム設定

サイトメタデータ

サイトメタデータには、title、url、baseUrl、favicon などの重要なグローバルメタデータが含まれています。

これらは、サイトのタイトルや見出し、ブラウザタブのアイコン、ソーシャルシェア（Facebook、Twitter）情報、さらには静的ファイルを提供するための正しいパスの生成など、さまざまな場所で使用されます。

デプロイ設定

projectName、organizationName、およびオプションで deploymentBranch などのデプロイ設定は、deploy コマンドでサイトをデプロイするときに使用されます。

詳しくは、デプロイメントドキュメントをご確認ください。

テーマ、プラグイン、およびプリセット設定

サイトのテーマ、プラグイン、およびプリセットを、それぞれ themes、plugins、および presets フィールドにリストします。これらは通常 npm パッケージです。

docusaurus.config.js
export default {
  // ...
  plugins: [
    '@docusaurus/plugin-content-blog',
    '@docusaurus/plugin-content-pages',
  ],
  themes: ['@docusaurus/theme-classic'],
};

ヒント

Docusaurus はモジュール省略形をサポートしており、上記の設定を以下のように簡略化できます。

docusaurus.config.js
export default {
  // ...
  plugins: ['content-blog', 'content-pages'],
  themes: ['classic'],
};

ローカルディレクトリからロードすることもできます。

docusaurus.config.js
import path from 'path';

export default {
  // ...
  themes: [path.resolve(__dirname, '/path/to/docusaurus-local-theme')],
};

プラグインまたはテーマのオプションを指定するには、設定ファイルのプラグインまたはテーマの名前を、名前とオプションオブジェクトを含む配列に置き換えます。

docusaurus.config.js
export default {
  // ...
  plugins: [
    [
      'content-blog',
      {
        path: 'blog',
        routeBasePath: 'blog',
        include: ['*.md', '*.mdx'],
        // ...
      },
    ],
    'content-pages',
  ],
};

プリセットにバンドルされているプラグインまたはテーマのオプションを指定するには、presets フィールドを介してオプションを渡します。この例では、docs は @docusaurus/plugin-content-docs を、theme は @docusaurus/theme-classic を参照します。

docusaurus.config.js
export default {
  // ...
  presets: [
    [
      '@docusaurus/preset-classic',
      {
        docs: {
          sidebarPath: './sidebars.js',
        },
        theme: {
          customCss: ['./src/css/custom.css'],
        },
      },
    ],
  ],
};

ヒント

presets: [['classic', {...}]] 省略形も同様に機能します。

テーマ、プラグイン、およびプリセットの設定の詳細については、プラグインの使用を参照してください。

カスタム設定

Docusaurus は、docusaurus.config.js を不明なフィールドから保護します。カスタムフィールドを追加するには、customFields で定義します。

例

docusaurus.config.js
export default {
  // ...
  customFields: {
    image: '',
    keywords: [],
  },
  // ...
};

コンポーネントから設定にアクセスする

設定オブジェクトは、サイトのすべてのコンポーネントで使用できるようになります。React コンテキストを介して siteConfig としてアクセスできます。

基本的な例

import React from 'react';
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';

const Hello = () => {
  const {siteConfig} = useDocusaurusContext();
  const {title, tagline} = siteConfig;

  return <div>{`${title} · ${tagline}`}</div>;
};

ヒント

クライアント側でこれらのフィールドを使用したいだけの場合は、独自の JS ファイルを作成し、ES6 モジュールとしてインポートできます。docusaurus.config.js に配置する必要はありません。

Babel 設定のカスタマイズ

新しい Docusaurus プロジェクトの場合、プロジェクトルートに babel.config.js が自動的に生成されます。

babel.config.js
export default {
  presets: ['@docusaurus/core/lib/babel/preset'],
};

ほとんどの場合、この設定で問題ありません。Babel 設定をカスタマイズする場合（たとえば、Flow のサポートを追加する場合）、このファイルを直接編集できます。変更を有効にするには、Docusaurus 開発サーバーを再起動する必要があります。

docusaurus.config.js を宣言するための構文​

docusaurus.config.js には何が含まれますか？​

サイトメタデータ​

デプロイ設定​

テーマ、プラグイン、およびプリセット設定​

カスタム設定​

コンポーネントから設定にアクセスする​

Babel 設定のカスタマイズ​