📦 plugin-client-redirects

Docusaurus 外掛用於產生用戶端重新導向。

此外掛會將額外的 HTML 頁面寫入您的靜態網站，使用 JavaScript 將使用者重新導向至您現有的 Docusaurus 頁面。

僅限於製作環境

此外掛在開發中始終都是僅限於製作環境，因為它會作業於製作輸出。

警告

建議盡可能使用伺服器端重新導向。

在使用此外掛程式之前，您應該先查看您的 hosting 供應商是否沒有提供此功能。

安裝

npm

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

Yarn

yarn add @docusaurus/plugin-client-redirects

pnpm

pnpm add @docusaurus/plugin-client-redirects

設定

已接受的欄位

選項	類型	預設	說明
fromExtensions	字串陣列	[]	重新導向後要從路徑中移除的副檔名。
toExtensions	字串陣列	[]	重新導向後要附加至路徑的副檔名。
redirects	RedirectRule[]	[]	重新導向規則清單。
createRedirects	CreateRedirectsFn	未定義	建立重新導向規則的回呼函式。Docusaurus 對其建立的每條路徑查詢此回呼函式，並使用其傳回值來輸出更多路徑。

備註

此外掛程式也會讀取siteConfig.onDuplicateRoutes設定，以便在多個檔案傳輸至同一位置時調整記錄層級。

類型

RedirectRule

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

備註

「起源」與「目標」的概念是此外掛程式中最重要的。「起源」表示您要建立的路徑，也就是將寫入的額外 HTML 檔；「目標」表示您要重新導引至的路徑，通常是 Docusaurus 已知道的路徑。

這就是為什麼您對相同的「目標」可以有多個「起源」：我們將建立多個 HTML 檔，這些 HTML 檔全部重新導向至同一個目的地。反之，「起源」永遠不會只有一個「目標」：已寫入的 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
        },
      },
    ],
  ],
};