Docusaurus 设置重定向

有时候，你可能像修改网页的 URL 路径，但由于原来的 URL 已经被搜索引擎收录了，或者被其他网页引用了，你希望原来的这些 URL 依然能够工作。这时候，你就可以通过设置网页重定向来保证旧页面的可访问性（跳转到新页面）。Docusaurus 提供了重定向插件 @docusaurus/plugin-client-redirects，可以很方便地实现这一需求。

假设你将 blog 的 routeBasePath 修改改成 journal，那么 URL 路径会发生变化，例如：

https://luhuadong.com/blog/my-post --> https://luhuadong.com/journal/my-post

但是你想设置重定向，将旧的 blog 路径重定向到新的 journal 路径，这样旧链接仍然可以访问。

下面我们来看看该如何设置。

安装重定向插件

如果还未安装 @docusaurus/plugin-client-redirects 重定向插件，可以执行下面命令进行安装：

npm install @docusaurus/plugin-client-redirects

或者使用 Yarn：

yarn add @docusaurus/plugin-client-redirects

V3 版本以上的 Docusaurus 好像都是默认安装好的，你可以通过 package.json 配置文件确认。

$ grep -rn "redirects" package.json 
19:    "@docusaurus/plugin-client-redirects": "^3.6.3",

修改项目配置

接下来，你需要修改 docusaurus.config.js 或 docusaurus.config.ts 文件，添加 @docusaurus/plugin-client-redirects 插件配置，例如：

plugins: [
  [
    '@docusaurus/plugin-client-redirects',
    {
      redirects: [
        {
          to: '/journal',    // 新路径
          from: ['/blog'],   // 旧路径
        },
        {
          to: '/journal/my-post',
          from: ['/blog/my-post'],
        },
        // 如果你有很多文章，也可以使用 createRedirects 来自动处理，见下方进阶方式
      ],
    },
  ],
],

自动重定向所有子路径

如果你的博客文章较多，每个 URL 都要单独设置的话那实在是太不方便了。因此 Docusaurus 提供了 createRedirects 函数，你可以通过它来自动处理所有子路径。

例如：自动重定向 blog → journal 的所有子路径

plugins: [
  [
    '@docusaurus/plugin-client-redirects',
    {
      createRedirects: function (existingPath) {
        if (existingPath.startsWith('/journal')) {
          return [existingPath.replace(/^\/journal/, '/blog')];
        }
        return undefined;
      },
    },
  ],
],

这样配置之后：

• /journal/my-post 会自动生成 /blog/my-post 的重定向页面
• 访问旧的 /blog/my-post 会自动跳转到 /journal/my-post

重新构建网站

保存配置，重新构建 Docusaurus 网站：

npm run build

此时，你会看到 build 目录下生成了重定向页面的静态 HTML 页面。当你访问旧链接 /blog/xxx 时，浏览器会自动跳转到 /journal/xxx。

经过重定向设置，你的 Docusaurus 网站对搜索引擎和已有链接都友好！👏