docusaurus导航栏下拉菜单
在docusaurus中想要在顶部导航栏实现下拉菜单
编辑 docusaurus.config.js
说明
{ label: 'go', to: '/docs/go' },
, to
后边的 /docs/go
,其中 docs
是存放文档的总根目录,go
是在相对目录下新建的md文件中定义的文档id不是目录或文件名称
相对目录的解释:例如目录结构是这样的 docs/编程/go
,我现在想要在顶部做一个导航栏 编程
,然后这个 编程
下有 go
和 python
,那此时就必须在 docs/编程/go
目录下新建一个md文件并写入以下内容,为了让显示置顶,一般用靠前的数字命令开头,例如 1.go.md
,python操作相同
---
title: go
id: go
slug: /go
---
navbar: {
......
// 这里的items是docs目录所有的文档总目录
items: [
{
type: 'docSidebar',
sidebarId: 'tutorialSidebar',
position: 'left',
label: '大烩菜',
},
{
label: '编程', // 这里的label就是顶部导航栏显示的内容
items: [
{ label: 'go', to: '/docs/go' }, // 这里的go不是文档目录,而是 文件id,是在文档的相对根目录下新建的md文件中定义的
{ label: 'python', to: '/docs/python'},
]
},
......
}
编辑 sidebars.js
说明
这里的 dirName
就是文档的实际目录
const sidebars = {
......
// 编程
go: [{ type: 'autogenerated', dirName: '编程/go'}],
python: [{ type: 'autogenerated', dirName: '编程/python'}],
......
}
最终的效果就如下