目录页说明

::: warning 目录页数据需要依赖于结构化的侧边栏数据，就是说你需要在config.js配置 sidebar: 'structuring' 或 sidebar: { mode: 'structuring', collapsable: false} 才能实现目录页数据的获取。 :::

  • 目录页文件(.md文件)可以放置在二级目录、三级目录和四级目录。（级别说明）
  • 如果你不想在侧边栏显示目录页，你可以在一级目录中单独创建一个文件夹放置你的目录页(.md文件)，并在front matter中设置sidebar: false。
  • 如果你想让目录页和其他页面一起出现在侧边栏，你可以和其他页面共同放置在相应的文件夹。(不要设置sidebar: false)
  • 参照下面的示例配置好front matter，然后就可以在导航栏或首页添加目录页链接了。

示例：

  1. ---
  2. pageComponent: # 使用页面组件
  3.   name: Catalogue # 组件名：Catalogue => 目录页组件
  4.   data: # 组件所需数据
  5.     path:  01.学习笔记/01.前端 # 设置为`docs/`下面的某个文件夹相对路径，如‘01.学习笔记/01.前端’ 或 ’01.学习笔记‘ (有序号的要带序号)
  6.     imgUrl: /img/web.png # 目录页内的图片
  7.     description: JavaScript、ES6、Vue框架等前端技术 # 目录描述（可加入a标签）
  9. title: 前端 # 页面标题
  10. date: 2020-01-12 11:51:53 # 创建日期
  11. permalink: /note/javascript # 永久链接
  12. sidebar: false # 不显示侧边栏
  13. article: false # 不是文章页 (不显示面包屑栏、最近更新栏等)
  14. comment: false # 不显示评论栏
  15. editLink: false # 不显示编辑按钮
  16. ---

::: tip 配置好目录页之后，点击文章页的面包屑将会跳转到目录页。 :::

配置项

pageComponent.name

  • 组件名，必需
  • 使用目录页时 必须 设置为Catalogue

pageComponent.data

  • 组件所需数据，必需

pageComponent.data.path

  • 要为其生成目录页的文件夹的相对路径，必需
  • 必须是在docs目录底下的文件夹相对路径
  • 示例：01.学习笔记或01.学习笔记/01.前端(有序号的要带序号)

::: warning 在v1.8.2版本之前，没有path属性，使用key代替。但key只支持指定一级目录的文件夹名称。 :::

pageComponent.data.imgUrl

  • 目录页内的图片，可选。(v1.9.4之前必填)
  • 图片尺寸在页面中显示为80px*80px

pageComponent.data.description

  • 目录描述，必需
  • 可加a标签（如需加入a标签时，标签内部的引号请使用单引号）

如何在导航栏中添加目录页链接

  1.  // config.js
  2. module.exports = {
  3.     themeConfig: {
  4.         nav:  [
  5.             // 没有二级导航时可以直接添加
  6.            {text: '目录页', link: '/web/'},
  8.           // 有二级导航时
  9.            {text: '页面',
  10.                link: '/ui/',   //目录页， vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
  11.                items: [
  12.                  {text: 'HTML', link: '/pages/11/'},
  13.                  {text: 'CSS', link: '/pages/22/'},
  14.                ]
  15.             },
  16.        ]
  17.     }
  18. }

参考：.vuepress/config/nav.js