バージョン: 3.5.2

インフラストラクチャの拡張

Docusaurusは、ホットリロード、CLI、swizzlingなど、外部プラグインによって拡張できるインフラストラクチャを備えています。

`getPathsToWatch()`

プラグインとテーマを監視するパスを指定します。パスは開発サーバーによって監視され、監視対象のパス内のコンテンツが変更されるとプラグインのライフサイクルがリロードされます。プラグインとテーマのモジュールは、最初にNodeから`context`と`options`で呼び出され、サイトに関する必要なディレクトリ情報を見つけるために使用できることに注意してください。

テーマファイルはWebpack開発サーバーによって自動的に監視されるため、サーバー側で使用されるファイルにはこれを使用してください。

例

docusaurus-plugin/src/index.js
import path from 'path';

export default function (context, options) {
  return {
    name: 'docusaurus-plugin',
    getPathsToWatch() {
      const contentPath = path.resolve(context.siteDir, options.path);
      return [`${contentPath}/**/*.{ts,tsx}`];
    },
  };
}

`extendCli(cli)`

DocusaurusのCLIを拡張するための追加コマンドを登録します。`cli`はcommanderオブジェクトです。

警告

commanderのバージョンが重要です！ Commander v5を使用しているので、使用可能なAPIについては正しいバージョンのドキュメントを参照してください。

例

docusaurus-plugin/src/index.js
export default function (context, options) {
  return {
    name: 'docusaurus-plugin',
    extendCli(cli) {
      cli
        .command('roll')
        .description('Roll a random number between 1 and 1000')
        .action(() => {
          console.log(Math.floor(Math.random() * 1000 + 1));
        });
    },
  };
}

`getThemePath()`

テーマコンポーネントが見つかるディレクトリへのパスを返します。ユーザーが`swizzle`を呼び出すと、`getThemePath`が呼び出され、返されたパスを使用してテーマコンポーネントが検索されます。相対パスは、エントリポイントを含むフォルダーに対して解決されます。

たとえば、`getThemePath`は次のようになります。

my-theme/src/index.js
export default function (context, options) {
  return {
    name: 'my-theme',
    getThemePath() {
      return './theme';
    },
  };
}

`getTypeScriptThemePath()`

`getThemePath()`と同様に、TypeScriptテーマコンポーネントのソースコードが見つかるディレクトリへのパスを返す必要があります。このパスは、TypeScriptテーマコンポーネントをswizzleするためだけのパスであり、このパス以下のテーマコンポーネントはWebpackによって**解決されません**。そのため、`getThemePath()`の代わりにはなりません。通常、`getTypeScriptThemePath()`によって返されるパスをソースディレクトリにし、`getThemePath()`によって返されるパスをコンパイルされたJavaScript出力にすることができます。

ヒント

TypeScriptテーマの作成者向け：コンパイルされた出力をできる限り人間が読めるようにすることを強くお勧めします。型注釈のみを削除し、構文はトランスパイルしないでください。ターゲットとするブラウザのバージョンに基づいてWebpackのBabelローダーによって処理されるためです。

また、これらのファイルをPrettierでフォーマットする必要があります。JSファイルはユーザーが直接使用できることを忘れないでください。

例

my-theme/src/index.js
export default function (context, options) {
  return {
    name: 'my-theme',
    getThemePath() {
      // Where compiled JavaScript output lives
      return '../lib/theme';
    },
    getTypeScriptThemePath() {
      // Where TypeScript source code lives
      return '../src/theme';
    },
  };
}

`getSwizzleComponentList()`

これは静的メソッドであり、プラグインインスタンスにはアタッチされていません。

swizzleしても安全と見なされる安定したコンポーネントのリストを返します。これらのコンポーネントは、`--danger`なしでswizzleできます。デフォルトでは、すべてのコンポーネントは不安定と見なされます。空の配列が返された場合、すべてのコンポーネントは不安定と見なされます。`undefined`が返された場合、すべてのコンポーネントは安定していると見なされます。

my-theme/src/index.js
export function getSwizzleComponentList() {
  return [
    'CodeBlock',
    'DocSidebar',
    'Footer',
    'NotFound',
    'SearchBar',
    'hooks/useTheme',
    'prism-include-languages',
  ];
}

getPathsToWatch()​

extendCli(cli)​

getThemePath()​

getTypeScriptThemePath()​

getSwizzleComponentList()​

`getPathsToWatch()`

`extendCli(cli)`

`getThemePath()`

`getTypeScriptThemePath()`

`getSwizzleComponentList()`