目录页配置

# 目录页配置

# 目录页说明

注意

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

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

示例：

---
pageComponent: # 使用页面组件
  name: Catalogue # 组件名：Catalogue => 目录页组件
  data: # 组件所需数据
    key:  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 # 不显示编辑按钮
---

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

提示

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

# 配置项

# pageComponent.name

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

# pageComponent.data

组件所需数据，必需

# pageComponent.data.key

设置要为其生成目录的文件夹名称，必需
所设置的文件夹只能是一级目录中的文件夹

# pageComponent.data.imgUrl

目录页内的图片，必需
图片尺寸在页面中显示为80px*80px

# pageComponent.data.description

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

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

 // config.js
module.exports = {
    themeConfig: {
        nav:  [
            // 没有二级导航时可以直接添加
           {text: '目录页', link: '/web/'},

          // 有二级导航时
           {text: '页面',
               link: '/ui/',   //目录页， vdoing主题新增的配置项，有二级导航时，可以点击一级导航跳到目录页
               items: [
                 {text: 'HTML', link: '/pages/11/'},
                 {text: 'CSS', link: '/pages/22/'},
               ]
            },
       ]
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

参考： .vuepress/config/nav.js

← front matter 摘要→