Skip to main content

設定

情報

Check the docusaurus.config.js API reference for an exhaustive list of options.

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

Keeping a well-maintained docusaurus.config.js helps you, your collaborators, and your open source contributors to be able to focus on documentation while still being able to customize the site.

Syntax to declare docusaurus.config.js​

The docusaurus.config.js file is run in Node.js and should export either:

  • a config object
  • a function that creates the config object
情報

The docusaurus.config.js file supports:

制限事項

  • Required: use export default /* your config*/ (or module.exports) to export your Docusaurus config
  • Optional: use import Lib from 'lib' (or require('lib')) to import Node.js packages

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',
  // your site config ...
};

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 ...
  };
}
Using ESM-only packages

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...
  };
}

What goes into a docusaurus.config.js? ​

You should not have to write your docusaurus.config.js from scratch even if you are developing your site. All templates come with a docusaurus.config.js that includes defaults for the common options.

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

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

サイトのメタデータ​

Site metadata contains the essential global metadata such as title, url, baseUrl, and 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.

デプロイの設定​

Deployment configurations such as projectName, organizationName, and optionally deploymentBranch are used when you deploy your site with the deploy command.

It is recommended to check the deployment docs for more information.

テーマ・プラグイン・プリセット設定​

List the themes, plugins, and presets for your site in the themes, plugins, and presets fields, respectively. これらは通常、以下に示す通りnpmパッケージです。

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

Docusaurus supports module shorthands, allowing you to simplify the above configuration as:

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',
  ],
};

To specify options for a plugin or theme that is bundled in a preset, pass the options through the presets field. In this example, docs refers to @docusaurus/plugin-content-docs and theme refers to @docusaurus/theme-classic.

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

The presets: [['classic', {...}]] shorthand works as well.

For further help configuring themes, plugins, and presets, see Using Plugins.

カスタム設定​

Docusaurus guards docusaurus.config.js from unknown fields. To add custom fields, define them in customFields.

例：

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

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

設定オブジェクトは、サイトのすべてのコンポーネントで利用できるようになります。 And you may access them via React context as siteConfig.

簡単な例：

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

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

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

If you just want to use those fields on the client side, you could create your own JS files and import them as ES6 modules, there is no need to put them in 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の開発サーバーを再起動する必要があります。