プラグイン

プラグインは、Docusaurusサイトの機能の構成要素です。各プラグインは、それぞれの個別の機能を処理します。プラグインは、プリセットを介してバンドルの一部として動作し、配布される場合があります。

プラグインの作成

プラグインは、context と options の2つのパラメータを受け取る関数です。プラグインインスタンスオブジェクト（またはPromise）を返します。プラグインは、関数またはモジュールとして作成できます。詳細については、プラグインメソッドリファレンスセクションを参照してください。

関数定義

Docusaurus設定ファイルに直接含まれる関数としてプラグインを使用できます

docusaurus.config.js

export default {
  // ...
  plugins: [
    async function myPlugin(context, options) {
      // ...
      return {
        name: 'my-plugin',
        async loadContent() {
          // ...
        },
        async contentLoaded({content, actions}) {
          // ...
        },
        /* other lifecycle API */
      };
    },
  ],
};

モジュール定義

別のファイルまたはnpmパッケージを参照するモジュールパスとしてプラグインを使用できます

docusaurus.config.js

export default {
  // ...
  plugins: [
    // without options:
    './my-plugin',
    // or with options:
    ['./my-plugin', options],
  ],
};

次に、my-plugin フォルダに、次のような index.js を作成できます

my-plugin/index.js

export default async function myPlugin(context, options) {
  // ...
  return {
    name: 'my-plugin',
    async loadContent() {
      /* ... */
    },
    async contentLoaded({content, actions}) {
      /* ... */
    },
    /* other lifecycle API */
  };
}

---

デバッグプラグインのメタデータパネルを使用して、サイトにインストールされているすべてのプラグインを表示できます。

プラグインにはいくつかの種類があります

• package: インストールした外部パッケージ
• project: プロジェクトで作成し、ローカルファイルパスとしてDocusaurusに渡したプラグイン
• local: 関数定義を使用して作成されたプラグイン
• synthetic: Docusaurusが内部的に作成した「疑似プラグイン」であり、モジュールアーキテクチャを活用し、コアに特別な作業をさせないようにします。実装の詳細であるため、メタデータには表示されません。

クライアント側では、useDocusaurusContext().siteMetadata.pluginVersions でアクセスできます。

プラグイン設計

Docusaurusのプラグインシステムの実装により、ウェブサイトのライフサイクルに接続して、開発/ビルド中の動作を変更する便利な方法が提供されます。これには、webpack設定の拡張、ロードされるデータの変更、ページで使用される新しいコンポーネントの作成などが含まれます（ただし、これらに限定されません）。

テーマ設計

プラグインがコンテンツをロードすると、createData + addRoute や setGlobalData などのアクションを通じて、クライアント側でデータが利用可能になります。プラグインとテーマは異なる環境で実行されるため、このデータはプレーンな文字列に*シリアライズ*する必要があります。データがクライアント側に到着すると、残りはReact開発者にとって使い慣れたものになります。データはコンポーネントに渡され、コンポーネントはWebpackでバンドルされ、ReactDOM.render を介してウィンドウにレンダリングされます...

**テーマは、コンテンツをレンダリングするための一連のUIコンポーネントを提供します。** ほとんどのコンテンツプラグインは、実際に役立つためにはテーマとペアにする必要があります。UIはデータスキーマとは別のレイヤーであるため、デザインの入れ替えが容易になります。

たとえば、Docusaurusブログは、ブログプラグインとブログテーマで構成されている場合があります。

注

これは、実際には@docusaurus/theme-classicがドキュメント、ブログ、レイアウトのテーマを提供しているため、人為的な例です。

docusaurus.config.js

export default {
  themes: ['theme-blog'],
  plugins: ['plugin-content-blog'],
};

Bootstrapスタイルを使用する場合は、テーマをtheme-blog-bootstrap（架空のテーマ）に置き換えることができます

docusaurus.config.js

export default {
  themes: ['theme-blog-bootstrap'],
  plugins: ['plugin-content-blog'],
};

これで、テーマはプラグインから同じデータを受け取りますが、テーマがUIとしてデータを*レンダリング*する方法を選択する方法は大きく異なる可能性があります。

テーマはプラグインとまったく同じライフサイクルメソッドを共有しますが、テーマの設計目的によっては、テーマの実装はプラグインの実装と大きく異なる場合があります。

テーマは、Docusaurusサイトの構築を完了し、サイト、プラグイン、およびテーマ自体で使用されるコンポーネントを提供するように設計されています。テーマは依然としてプラグインのように動作し、いくつかのライフサイクルメソッドを公開しますが、プラグインからのデータのみを受け取り、データ自体を生成しないため、loadContentを使用しない可能性が高くなります。テーマには通常、多数のコンポーネントを含むsrc/themeディレクトリが付属しており、getThemePathライフサイクルを通じてコアに認識されます。

要約すると

• テーマはプラグインと同じライフサイクルメソッドを共有します
• テーマは、既存のすべてのプラグインの後に実行されます
• テーマは、getThemePathを提供することにより、コンポーネントエイリアスを追加します。