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

Question

As I know, Docusaurus supports customized pages, but is there a way to have two docs in one Docusaurus project?

The original Navbar items have:

• Docs
• Blog
• ...

I want to have something like this:

• Docs 1
• Docs 2
• Blog
• ...

I know I can make many subfolders just in one doc, but for some reason, I want a two Docs structure, which gives me a cleaner way to access docs.

If Docusaurus cannot offer this feature currently, I want to ask is there other documentation frameworks offer this feature?

Answer 1

You need to use the plugin-content-docs.

First, create the other docs folder, like docs, docs-api, docs-system.

(1) In your docusaurus.config.js file, configure your "default" docs:

(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) Now, the magic!: in the same file, configure your other documents:

(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) Now you probably want these documents in your NavBar, right? So add then!

(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

---

IMPORTANT

Sometimes you will modify your docusaurus.config.js and will not "work", so close the docusaurus service (just Ctrl+C in your terminal/power shell) and restart it -- I could have saved a few hours if a had known this before.

If you don't have the plugin-content-docs plugin, just install it:

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

DISCLAIMER

I had a hard time figuring this out. What I did was download the whole docusaurus project, get the website part, trim everything that I did not need and this is what I got.