Skip to main content

設定

情報

全てのオプションの一覧については、docusaurus.config.jsのAPIリファレンスを参照してください。

Docusaurusは、設定方法に独自の工夫をしています。 私たちは、サイトに関する情報を1つの場所に集めることをお勧めします。 私たちはこのファイルのフィールドを保護し、このデータオブジェクトがサイト全体でアクセスできるようにすることを促進します。

docusaurus.config.jsをきちんと管理することで、あなたや共著者、オープンソースの貢献者が、サイトをカスタマイズしながらもドキュメント作成に集中することができます。

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

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

  • 設定オブジェクト
  • 設定オブジェクトを生成する関数
情報

The docusaurus.config.js file supports:

制限事項

  • Required: use export default /* your config*/ (or module.exports) to export your Docusaurus config
  • 任意: Node.jsから、パッケージをインポートするには、import Lib from 'lib' (または require('lib')) を使用します。

Docusaurus gives us the ability to declare its configuration in various equivalent ways, and all the following config examples lead to the exact same result:

docusaurus.config.js
export default {
  title: 'Docusaurus',
  url: 'https://docusaurus.io',
  // your site config ...
};
docusaurus.config.js
module.exports = {
  title: 'Docusaurus',
  url: 'https://docusaurus.io',
  // your site config ...
};
docusaurus.config.ts
import type {Config} from '@docusaurus/types';

export default {
  title: 'Docusaurus',
  url: 'https://docusaurus.io',
  // your site config ...
} satisfies Config;
docusaurus.config.js
const config = {
  title: 'Docusaurus',
  url: 'https://docusaurus.io,
  // サイト設定 ...
};

export default config;
docusaurus.config.js
export default function configCreator() {
  return {
    title: 'Docusaurus',
    url: 'https://docusaurus.io',
    // your site config ...
  };
}
docusaurus.config.js
export default async function createConfigAsync() {
  return {
    title: 'Docusaurus',
    url: 'https://docusaurus.io',
    // 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.io',
    // rest of your site config...
  };
}

docusaurus.config.jsの中に含まれているもの​

サイトを制作する場合でも、docusaurus.config.jsを一から書く必要はないはずです。 すべてのテンプレートには、一般的なオプションの初期値を含むdocusaurus.config.jsが付属しています。

しかし、設定がどのように設計され、実装されているのかについて高い水準で理解しておくと役に立つことがあります。

Docusaurusの設定に関する高水準な概要は、以下のように分類されます。

サイトのメタデータ​

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

They are used in several places such as your site's title and headings, browser tab icon, social sharing (Facebook, X) information or even to generate the correct path to serve your static files.

デプロイの設定​

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 guards docusaurus.config.js from unknown fields. カスタムフィールドを追加するには、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 transpiles your site's source code using Babel by default. If you want to customize the Babel configuration, you can do so by creating a babel.config.js file in your project root.

To use the built-in preset as a base configuration, install the following package and use it

npm install --save @docusaurus/babel

Then use the preset in your babel.config.js file:

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

Most of the time, the default preset configuration will work just fine. Babelの設定をカスタマイズしたい場合（例：Flowのサポートを追加するなど）、このファイルを直接編集することができます。 変更を有効にするには、Docusaurusの開発サーバーを再起動する必要があります。