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

Answer 3

I tried this way and it's working.

[Edit 1] : But when I select API then both API and Docs in Navbar becomes green. Can you tell us what's the reason behind this @Yangshun Tay and can you suggest the edit for that?

[Edit 2] : I read the documentation, it's written in @docusaurus/theme-classic , if we set activeBasePath property then links with that common path ( docs in this case) will have active attribute.

sidebar.js

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

docusaurus.config.js

The navbar links are like this -

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

Folder structure of docs folder is like this -

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

Answer 4

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

Answer 5

You need to use the doc type in docusaurus config. I think the "to" type is for pages not docs.

To make the sidebar correct, you need to also set the activeSidebarClassName value in the config to let it know which sidebar (among those you exported in the sidebars.js) you want to use for this doc.

activeSidebarClassName: 'navbar__link--active',

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

Answer 6

Setting up Docusaurus to be multi-instance spans changes across many files. To make it easier to set up, I've created a base install with all the necessary changes to go multi-instance, and have released it as a GitHub template.

Fork it here:
mg0716/docusaurus-multi

Many of the changes in this repo were a result from @d-kastier 's original comment .

Very open to feedback and pull requests, so feel free to give it a shot!

Answer 7

on my test, you MUST Include path " docs-xxxxxxxxx " ! do not create another name such "education" you will get page crash !