有没有办法在 Docusaurus 2 中拥有两个文档？

Question

据我所知，Docusaurus 支持自定义页面，但是有没有办法在一个 Docusaurus 项目中有两个文档？

原始导航栏项目有：

文档
博客
...

我想要这样的东西：

文档 1
文档 2
博客
...

我知道我可以在一个文档中创建多个子文件夹，但出于某种原因，我想要一个包含两个文档的结构，这为我提供了一种更简洁的访问文档的方式。

如果Docusaurus目前不能提供这个功能，请问有没有其他的文档框架提供这个功能？

Answer 1

无论您使用的是 v1 还是 v2，sidebars.js 配置都可以包含 multiple keys，每个都有自己的边栏。

Answer 2

我试过这种方法，效果很好。

[编辑 1]：但是当我 select API 时，导航栏中的 API 和文档都变为绿色。你能告诉我们这个 @Yangshun Tay 背后的原因是什么吗？你能为此提出修改建议吗？

[编辑 2]：我阅读了文档，它写在 @docusaurus/theme-classic 中，如果我们设置 activeBasePath 属性然后链接该公共路径（在本例中为 docs）将具有活动属性。

sidebar.js

module.exports = {
    someSidebar: {
        Docusaurus: ['doc1', 'doc2'],
        Features: ['doc3']
    },
    someOtherSidebar: {
        Test: ['mdx']
    }
};

docusaurus.config.js

导航栏链接是这样的-

links: [
    {
        to: 'docs/doc1',
        // activeBasePath: 'docs', // [Edit 3]
        label: 'Docs',
        position: 'left'
    },
    {
        to: 'docs/mdx',
        label: 'API',
        position: 'left'
    },
]

docs文件夹的文件夹结构是这样的-

docs
├── docs1.md
├── mdx.md

Answer 3

您需要在 docusaurus 配置中使用 doc 类型。我认为“to”类型适用于页面而不是文档。

为了使侧边栏正确，您还需要在配置中设置 activeSidebarClassName 值，以让它知道您要将哪个侧边栏（在您在 sidebars.js 中导出的侧边栏中）用于此文档。

activeSidebarClassName: 'navbar__link--active',

https://docusaurus.io/docs/api/themes/configuration#navbar-doc-link

Answer 4

您需要使用plugin-content-docs。

首先，创建另一个 docs 文件夹，例如 docs、docs-api、docs-system。

(1) 在您的 docusaurus.config.js 文件中，配置您的“默认”文档：

(module.exports = { // start of the module.export declaration
[…]

    presets: [
        [
          '@docusaurus/preset-classic',
          {
            docs: {
              routeBasePath: 'docs',
              path: 'docs',
              sidebarPath: require.resolve('./sidebars.js'),
              lastVersion: 'current',
              onlyIncludeVersions: ['current'],
            },
            theme: {
              customCss: require.resolve('./src/css/custom.css'),
            },
          },
        ],
      ],

[…] 
}); // end of the module-export declaration

(2) 现在，魔术！：在同一个文件中，配置您的其他文件：

(module.exports = { // start of the module.export declaration
[…]

plugins: [
    […]
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'docs-api',
        path: 'docs-api',
        routeBasePath: 'docs-api',
        sidebarPath: require.resolve('./sidebars.js'),
      }, 
    ],
    [
      '@docusaurus/plugin-content-docs',
      {
        id: 'docs-system',
        path: 'docs-system',
        routeBasePath: 'docs-system',
        sidebarPath: require.resolve('./sidebars.js'),
      }, 
    ],
],

[…]
}); // end of the module-export declaration

(3) 现在您可能希望在导航栏中显示这些文档，对吧？那就加吧！

(module.exports = { // start of the module.export declaration
[…]

navbar: {
  hideOnScroll: true,
  title: 'your title',
  logo: {
    alt: '',
    src: 'img/favicon.ico',
  },
  items: [
    {
      to: '/docs/Intro',    // ./docs/Intro.md
      label: 'Docs Title',
      position: 'left',
      activeBaseRegex: `/docs/`,
    },
    {
      to: '/docs-api/Intro',    // ./docs-api/Intro.md
      label: 'API',
      position: 'left',
      activeBaseRegex: `/docs-api/`,
    },
    {
      to: '/docs-system/Introducao',  // ./docs-system/Intro.md
      label: 'My System',
      position: 'left',
      activeBaseRegex: `/docs-system/`,
    },
  ],
},

[…]
}); // end of the module-export declaration

重要

有时你会修改你的 docusaurus.config.js 而不会“工作”，所以关闭 docusaurus service（只需在你的 terminal/power shell 中按 Ctrl+C）和重新启动它——如果早知道这一点，我本可以节省几个小时的时间。

如果您没有 plugin-content-docs 插件，只需安装它：

npm install --save @docusaurus/plugin-content-docs

路线图

我很难弄明白这一点。我所做的是下载整个 docusaurus 项目，获取网站部分，trim 我不需要的一切，这就是我得到的。

参考文献（更新 2022/03/02）

https://docusaurus.io/docs/docs-multi-instance

Answer 5

这个解决方案对我有用。在 Docusaurus v2.0.0-beta.15

中使用 'autogenerated' 侧边栏

sidebars.js

/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */

const sidebars = {

  // tutorialSidebar: [{type: 'autogenerated', dirName: '.'}],
  newone: [{type: 'autogenerated', dirName: 'newone'}],  // foldername
  newtwo: [{type: 'autogenerated', dirName: 'newtwo'}],  // foldername

};

module.exports = sidebars;

docusaurus.config.js

      navbar: {
        title: 'My Site',
        logo: {
          alt: 'My Site Logo',
          src: 'img/logo.svg',
        },
        items: [
          // {
          //   type: 'doc',
          //   docId: 'intro',
          //   position: 'left',
          //   label: 'Tutorials',
          // },

          {
            type: 'docSidebar',  // docSidebar
            position: 'left',
            sidebarId: 'newone', // foldername
            label: 'NEWONE',     // navbar title
          },
          {
            type: 'docSidebar',  // docSidebar
            position: 'left',
            sidebarId: 'newtwo', // foldername
            label: 'NEWTWO',     // navbar title
          },

          {to: '/blog', label: 'Blog', position: 'left'},
          {
            href: 'https://github.com/facebook/docusaurus',
            label: 'GitHub',
            position: 'right',
          },
        ],
      },

您的文档文件夹：

docs/
    newone/
        intro.md
    newtwo/
        intro.md

Answer 6

将 Docusaurus 设置为 multi-instance 跨多个文件进行更改。为了更容易设置，我创建了一个基本安装，其中包含所有必要的更改以进行 multi-instance，并将其作为 GitHub 模板发布。

在这里分叉：
mg0716/docusaurus-multi

此回购协议中的许多更改是 @d-kastier's original 的结果。

非常乐于接受反馈和拉取请求，所以请随时试一试！

Answer 7

在我的测试中，你必须包含路径“docs-xxxxxxxxx”！不要创建另一个名称，例如 "education"，否则页面会崩溃！

有没有办法在 Docusaurus 2 中拥有两个文档？

Is there a way to have two docs in Docusaurus 2?

javascript

documentation

docusaurus