侧边栏

自动生成

实现：

sidebar.ts

import { sidebar } from "vuepress-theme-hope";

export default sidebar({
	"/": "structure",
	// sidebar: "structure",
});

或在 theme.ts 中配置

通过指定值为structure 来自动生成侧边栏

效果：

默认按照文件名进行排序

通过自动生成侧边栏的缺点：会显示根目录下所有的目录。
如果只想显示当前文件所在目录下的所有文件列表，可以：

import { sidebar } from "vuepress-theme-hope";

export default sidebar({
	"/": "structure",
	"/English" : "structure", 
});

效果：

问：怎么让所有的目录都按照当前目录 自动生成只包含当前路径下文件的侧边栏？
...这里的含义是不包含嵌套的子目录以及子目录下的文件吗？

控制顺序

在Frontmatter中设置order属性值
文件排列的顺序：

• 设置了order，且order值为正数的页面
  • order：1
  • order：2
  • order：999
• 未设置order的页面：按照标题排序
• 设置了order，且order值为负数
  • order：-999
  • order：-2
  • order：-1

实际用例：Learn web development/ Adding ...;Creating ... 四篇文章的顺序是通过order控制的

子目录的order默认为0（排在最后）

控制是否在侧边栏中显示当前页面

设置Frontmatter中的index属性

• true：显示
• false：不显示

手动配置

实现：

theme.ts

export default hopeTheme({
  sidebar: [
			{
			text: "英语",
			icon: "fa6-solid:wrench",
			link: "/English/",
			children: [
				"/English/Articles.md",
				"/English/Determiners.md",
			],
			}
		],

});

行号	功能	说明
5	分栏标题
7	点击标题跳转的链接	指定文件完整名称，如果只有Atricles 则链接到的文件是Atricles.html
8-11	分栏下的链接	绝对路径

效果：

使用相对路径

可以设置prefix，然后分栏内的链接就可以使用相对prefix的路径
实现：

theme.ts

  sidebar: [
			{
			text: "英语",
			icon: "fa6-solid:wrench",
			link: "/English/",
			prefix: "/English/", 
			children: [
				"Articles.md", 
				"Determiners.md", 
			],
			}
		],

嵌套

多级分层
实现：

theme.ts

  sidebar: [
			{
			text: "英语",
			icon: "fa6-solid:wrench",
			link: "/English/",
			prefix: "/English/",
			children: [
				"Articles.md",
				"Determiners.md",
				{
					text: "6 - Pronouns",
					prefix: "/English/",
					children: [
						"Personal Pron..md",
					],
				},
			],
			}
		],

行号	功能	说明
11		如果标题没有链接，那么就按照text显示。指定链接按照链接文章标题显示

效果：