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不同。


欢迎点赞、关注~

你可能感兴趣的:(Docusaurus每个页面使用不同sidebar)