如何在Docusaurus中为多产品配置独立文档路径与侧边栏？

你可以通过配置多个@docusaurus/plugin-content-docs实例来实现需求，每个产品对应一个独立的文档插件实例，单独控制URL路径、文档目录和侧边栏，无需启用版本化。具体步骤如下：

1. 规整文档目录结构 #

将各产品的文档统一放到项目的docs目录下（也可保留你现有根目录结构，后续配置时指定对应路径即可），示例结构：

docs/
├─ product-1/
│  ├─ feature-1/
│  │  ├─ doc1.md
│  │  ├─ doc2.md
│  ├─ feature-2/
│     ├─ doc3.md
│     ├─ doc4.md
├─ product-2/
│  ├─ feature-1/
│  │  ├─ doc1.md
│  │  ├─ doc2.md
│  ├─ feature-2/
│     ├─ doc3.md
│     ├─ doc4.md
# 剩余3个产品目录结构同上

2. 配置多文档插件实例 #

修改项目根目录的docusaurus.config.js，为每个产品添加独立的@docusaurus/plugin-content-docs配置。关键参数说明：

• id：每个实例的唯一标识，不能重复
• path：该产品文档所在的本地目录路径
• routeBasePath：对应URL访问路径（即mysite.com/product-1/中的product-1）
• sidebarPath：该产品专属的侧边栏配置文件路径
• disableVersioning：关闭版本化，满足你的需求

示例配置代码：

module.exports = {
  // 保留原有站点基础配置（如title、tagline等）
  plugins: [
    // Product 1 文档插件配置
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'product-1',
        path: './docs/product-1',
        routeBasePath: 'product-1',
        sidebarPath: require.resolve('./sidebars/product-1.js'),
        disableVersioning: true,
        // 可选：配置编辑链接（按需调整）
        editUrl: 'https://your-repo-url/edit/main/docs/product-1/',
      },
    ],
    // Product 2 文档插件配置
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'product-2',
        path: './docs/product-2',
        routeBasePath: 'product-2',
        sidebarPath: require.resolve('./sidebars/product-2.js'),
        disableVersioning: true,
        editUrl: 'https://your-repo-url/edit/main/docs/product-2/',
      },
    ],
    // 依次添加剩余3个产品的配置，格式与上述一致
  ],
  // 其他配置（如themeConfig等）
};

3. 创建产品专属侧边栏 #

在项目根目录新建sidebars文件夹，为每个产品创建独立的侧边栏配置文件（如product-1.js、product-2.js）。侧边栏配置需对应产品的文档目录结构，示例product-1.js代码：

module.exports = {
  'product-1-sidebar': [
    {
      type: 'category',
      label: 'Feature 1',
      items: [
        'feature-1/doc1',
        'feature-1/doc2',
      ],
    },
    {
      type: 'category',
      label: 'Feature 2',
      items: [
        'feature-2/doc3',
        'feature-2/doc4',
      ],
    },
  ],
};

注意：items中的路径是相对于该产品文档目录（如docs/product-1/）的相对路径，无需加前缀。

4. 添加导航栏入口（可选） #

如果需要在站点导航栏快速切换各产品文档，修改docusaurus.config.js中的themeConfig.navbar.items，添加对应产品的导航链接：

themeConfig: {
  navbar: {
    title: 'My Docs Site',
    items: [
      {
        label: 'Product 1',
        to: '/product-1/',
        position: 'left',
      },
      {
        label: 'Product 2',
        to: '/product-2/',
        position: 'left',
      },
      // 剩余产品的导航项
    ],
  },
},

5. 验证效果 #

运行npm run start启动本地开发服务器，访问http://localhost:3000/product-1/、http://localhost:3000/product-2/等路径，即可看到对应产品的文档和专属侧边栏，URL路径完全符合需求。

内容的提问来源于stack exchange，提问作者Bar Code