Docusaurus每个页面使用不同sidebar

image.png

Docusaurus可以用Markdown创建网站的工具，它基于ReactJs技术。类似的基于Vue的是VuePress。

这种东西的确是好东西，但其实也很烦人或者是很烂，因为既然是想让用户使用Markdown来方便撰写内容创建网站，但又需要很多Nodejs技术才能构建，这不够糟糕吗？

用Markdown的一定要学Nodejs网站开发吗？用户群根本就不对好吧，为什么不直接搞一个不需要build的Markdown网站呢？——当然不是技术问题，要么是舍不得SEO（不用nodejs build的网页对搜索很不友好，但也不是无解），要么就是程序员固有思维即把事情搞复杂以显得专业化（尽管项目的目的就是简单化，又怎样呢？我是程序员我得保持专业啊...)

回到正题，如何让Docusaurus的导航条拥有多个按钮，每个按钮打开的页面使用不同sidebar显示不同分类的文集，类似下面这个效果。

image.png

官方文档其实有说明，对于sidebar.js可以使用类似下面的配置：

module.exports = {
    articles: {
        '文章列表': ['articles/index', 'articles/template'],
    },
    cases: {
        '案例列表': ['cases/index', 'cases/template'],
    },
    sources: {
        '资源列表': ['sources/index', 'sources/template'],
    },
    helps: ['helps/index', 'helps/md-help'],
}

这样设置之后，articles/index地址页面的侧栏只显示['articles/index', 'articles/template']两个文章，cases/template地址页面侧栏只显示['cases/index', 'cases/template']两个文章，...

需要特别提起注意的是，这个的articles、case、sources、helps没有任何意义，你直接改成a、b、c、d毫无问题！

真正的解释是，页面A的侧栏只显示A所在方括号内的链接，上面这个配置实际是四个文集分别对应四个页面/docs/articles、docs/case、docs/sources、docs/helps，也是这四个文件夹，但不能直接访问，要后面加index访问index页面才行，比如/docs/articles/index。

要把这四个.../index添加到导航栏，需要修改docusaurus.config.js文件，照着改就可以，类似下面这种。

{
  to: 'docs/articles/index',
  activeBasePath: 'docs/articles/',
  label: '文集',
  position: 'left',
},

注意这个activeBasePath激活（按钮文字变彩色）与to不同。

---

欢迎点赞、关注~