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

---

ROADMAP

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.

---

REFERENCES (Update 2022/03/02)

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

Answer 2

This solution worked for me. Using the 'autogenerated' sidebar in Docusaurus v2.0.0-beta.15

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',
          },
        ],
      },

Your docs folder:

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