侧边栏

侧边栏是文档的主要导航块。你可以在 themeConfig.sidebar 中配置侧边栏菜单。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' },
          ...
        ]
      }
    ]
  }
}

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Guide',
        items: [
          { text: 'Introduction', link: '/introduction' },
          { text: 'Getting Started', link: '/getting-started' },
          ...
        ]
      }
    ]
  }
}

基本用法

侧边栏菜单的最简单形式是传入一个链接数组。第一级项目定义侧边栏的“部分”。它应该包含作为小标题的 text 和作为实际导航链接的 items。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        items: [
          { text: 'Item A', link: '/item-a' },
          { text: 'Item B', link: '/item-b' },
          ...
        ]
      },
      {
        text: 'Section Title B',
        items: [
          { text: 'Item C', link: '/item-c' },
          { text: 'Item D', link: '/item-d' },
          ...
        ]
      }
    ]
  }
}

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        items: [
          { text: 'Item A', link: '/item-a' },
          { text: 'Item B', link: '/item-b' },
          ...
        ]
      },
      {
        text: 'Section Title B',
        items: [
          { text: 'Item C', link: '/item-c' },
          { text: 'Item D', link: '/item-d' },
          ...
        ]
      }
    ]
  }
}

每个 link 都应指定以 / 开头的实际文件的路径。如果在链接末尾添加斜杠，它将显示相应目录的 index.md。

export default {
	themeConfig: {
		sidebar: [
			{
				text: 'Guide',
				items: [
					// This shows `/guide/index.md` page.
					{ text: 'Introduction', link: '/guide/' },
				],
			},
		],
	},
}

export default {
	themeConfig: {
		sidebar: [
			{
				text: 'Guide',
				items: [
					// This shows `/guide/index.md` page.
					{ text: 'Introduction', link: '/guide/' },
				],
			},
		],
	},
}

你可以进一步将侧边栏项目嵌入到 6 级深度，从根级别上计数。请注意，深度超过 6 级嵌套物品被忽略，并且不会在侧边栏上显示。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Level 1',
        items: [
          {
            text: 'Level 2',
            items: [
              {
                text: 'Level 3',
                items: [
                  ...
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Level 1',
        items: [
          {
            text: 'Level 2',
            items: [
              {
                text: 'Level 3',
                items: [
                  ...
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

多侧边栏

你可能会根据页面路径显示不同的侧边栏。例如，如本网站所示，你可能希望在文档中创建单独的侧边栏，例如“指引”页面和“配置参考”页面。

为此，首先将你的页面组织到每个所需部分的目录中：

.
├─ guide/
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ config/
   ├─ index.md
   ├─ three.md
   └─ four.md

.
├─ guide/
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ config/
   ├─ index.md
   ├─ three.md
   └─ four.md

然后，更新你的配置以定义每个部分的侧边栏。这一次，你应该传递一个对象而不是数组。

export default {
	themeConfig: {
		sidebar: {
			// This sidebar gets displayed when a user
			// is on `guide` directory.
			'/guide/': [
				{
					text: 'Guide',
					items: [
						{ text: 'Index', link: '/guide/' },
						{ text: 'One', link: '/guide/one' },
						{ text: 'Two', link: '/guide/two' },
					],
				},
			],

			// This sidebar gets displayed when a user
			// is on `config` directory.
			'/config/': [
				{
					text: 'Config',
					items: [
						{ text: 'Index', link: '/config/' },
						{ text: 'Three', link: '/config/three' },
						{ text: 'Four', link: '/config/four' },
					],
				},
			],
		},
	},
}

export default {
	themeConfig: {
		sidebar: {
			// This sidebar gets displayed when a user
			// is on `guide` directory.
			'/guide/': [
				{
					text: 'Guide',
					items: [
						{ text: 'Index', link: '/guide/' },
						{ text: 'One', link: '/guide/one' },
						{ text: 'Two', link: '/guide/two' },
					],
				},
			],

			// This sidebar gets displayed when a user
			// is on `config` directory.
			'/config/': [
				{
					text: 'Config',
					items: [
						{ text: 'Index', link: '/config/' },
						{ text: 'Three', link: '/config/three' },
						{ text: 'Four', link: '/config/four' },
					],
				},
			],
		},
	},
}

通过向侧边栏组添加 collapsed 选项，它会显示一个切换按钮来隐藏/显示每个部分。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        collapsed: false,
        items: [...]
      }
    ]
  }
}

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        collapsed: false,
        items: [...]
      }
    ]
  }
}

默认情况下，所有部分都是“打开”的。如果你希望它们在初始页面加载时“关闭”，请将 collapsed 选项设置为 true。

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        collapsed: true,
        items: [...]
      }
    ]
  }
}

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        collapsed: true,
        items: [...]
      }
    ]
  }
}

侧边栏 ​

基本用法 ​

多侧边栏 ​

可折叠的侧边栏组 ​

基本用法

多侧边栏

可折叠的侧边栏组