B
目录页配置
目录页配置
目录页说明
警告
注意
目录页数据需要依赖于结构化的侧边栏数据，就是说你需要在
config.js配置sidebar:'structuring'或sidebar:{mode:'structuring',collapsable:false}才能实现目录页数据的获取。
- 目录页文件(
.md文件)可以放置在二级目录、三级目录和四级目录。（级别说明）- 如果你不想在侧边栏显示目录页，你可以在
一级目录中单独创建一个文件夹放置你的目录页(.md文件)，并在front matter中设置sidebar:false。- 如果你想让目录页和其他页面一起出现在侧边栏，你可以和其他页面共同放置在相应的文件夹。(不要设置
sidebar:false)- 参照下面的示例配置好front matter，然后就可以在导航栏或首页添加目录页链接了。
示例：
yaml
---pageComponent:# 使用页面组件name:Catalogue# 组件名：Catalogue =>目录页组件data:# 组件所需数据path:01.学习笔记/01.前端# 设置为`docs/`下面的某个文件夹相对路径，如‘01.学习笔记/01.前端’ 或 ’01.学习笔记‘ (有序号的要带序号)imgUrl:/img/web.png# 目录页内的图片description:JavaScript、ES6、Vue框架等前端技术# 目录描述（可加入a标签）title:前端# 页面标题date:2020-01-12 11:51:53# 创建日期permalink:/note/javascript# 永久链接sidebar:false# 不显示侧边栏article:false# 不是文章页 (不显示面包屑栏、最近更新栏等)comment:false# 不显示评论栏editLink:false# 不显示编辑按钮---提示
提示
配置好目录页之后，点击文章页的面包屑将会跳转到目录页。
配置项
pageComponent.name
- 组件名，必需
- 使用目录页时 必须设置为
Catalogue
pageComponent.data
- 组件所需数据，必需
pageComponent.data.path
- 要为其生成目录页的文件夹的相对路径，必需
- 必须是在
docs目录底下的文件夹相对路径 - 示例：
01.学习笔记或01.学习笔记/01.前端(有序号的要带序号)
警告
注意
在
v1.8.2版本之前，没有path属性，使用key代替。但key只支持指定一级目录的文件夹名称。
pageComponent.data.imgUrl
- 目录页内的图片，可选。(v1.9.4之前必填)
- 图片尺寸在页面中显示为80px*80px
pageComponent.data.description
- 目录描述，必需
- 可加a标签（如需加入a标签时，标签内部的引号请使用单引号）
如何在导航栏中添加目录页链接
js
module.exports={themeConfig:{nav:[{text:'目录页',link:'/web/'},{text:'页面',link:'/ui/',items:[{text:'HTML',link:'/pages/11/'},{text:'CSS',link:'/pages/22/'},]},]}}