📦 plugin-client-redirects

クライアントサイドリダイレクトを生成するためのDocusaurusプラグイン。

このプラグインは、JavaScriptを使用して既存のDocusaurusページにユーザーをリダイレクトする追加のHTMLページを静的サイトに書き込みます。

本番環境のみ

このプラグインは、ビルド出力で動作するため、開発環境では常に非アクティブで、本番環境でのみアクティブになります。

警告

可能な限り、サーバーサイドリダイレクトを使用することをお勧めします。

このプラグインを使用する前に、ホスティングプロバイダーがこの機能を提供していないかどうかを確認する必要があります。

インストール

npm

npm install --save @docusaurus/plugin-client-redirects

Yarn

yarn add @docusaurus/plugin-client-redirects

pnpm

pnpm add @docusaurus/plugin-client-redirects

設定

受け入れられるフィールド

オプション	タイプ	デフォルト	説明
fromExtensions	string[]	[]	リダイレクト後にルートから削除される拡張子。
toExtensions	string[]	[]	リダイレクト後にルートに追加される拡張子。
redirects	RedirectRule[]	[]	リダイレクトルールのリスト。
createRedirects	CreateRedirectsFn	undefined	リダイレクトルールを作成するためのコールバック。Docusaurusは、作成したすべてのパスに対してこのコールバックを照会し、その戻り値を使用してより多くのパスを出力します。

注記

このプラグインは、siteConfig.onDuplicateRoutes設定も読み取り、複数のファイルが同じ場所に配置される場合のログレベルを調整します。

型

RedirectRule

type RedirectRule = {
  to: string;
  from: string | string[];
};

注記

このプラグインの中心となるのは、「from」と「to」の概念です。「from」は*作成*したいパス、つまり書き込まれる追加のHTMLファイルを意味します。「to」は*リダイレクト先*のパスを意味し、通常はDocusaurusがすでに知っているルートです。

そのため、同じ「to」に対して複数の「from」を持つことができます。すべて同じ宛先にリダイレクトされる複数のHTMLファイルが作成されます。一方、1つの「from」は複数の「to」を持つことはできません。書き込まれたHTMLファイルは、決定された宛先を持つ必要があるためです。

CreateRedirectsFn

// The parameter `path` is a route that Docusaurus has already created. It can
// be seen as the "to", and your return value is the "from". Returning a falsy
// value will not create any redirect pages for this particular path.
type CreateRedirectsFn = (path: string) => string[] | string | null | undefined;

設定例

設定例を以下に示します。

docusaurus.config.js

export default {
  plugins: [
    [
      '@docusaurus/plugin-client-redirects',
      {
        fromExtensions: ['html', 'htm'], // /myPage.html -> /myPage
        toExtensions: ['exe', 'zip'], // /myAsset -> /myAsset.zip (if latter exists)
        redirects: [
          // /docs/oldDoc -> /docs/newDoc
          {
            to: '/docs/newDoc',
            from: '/docs/oldDoc',
          },
          // Redirect from multiple old paths to the new path
          {
            to: '/docs/newDoc2',
            from: ['/docs/oldDocFrom2019', '/docs/legacyDocFrom2016'],
          },
        ],
        createRedirects(existingPath) {
          if (existingPath.includes('/community')) {
            // Redirect from /docs/team/X to /community/X and /docs/support/X to /community/X
            return [
              existingPath.replace('/community', '/docs/team'),
              existingPath.replace('/community', '/docs/support'),
            ];
          }
          return undefined; // Return a falsy value: no redirect created
        },
      },
    ],
  ],
};