Vdoing 主题的目录

其实关于Vdoing主题 (opens new window)的目录部分，开发者在主题文档 (opens new window)中已经说的比较详尽了，但是作为一个对前端的认识还仅限于会写简单的HTML和CSS的小白，我还是看了很多遍加上研究了一遍主题作者给出的案例的结构才明白这个约定的具体内容，为了防止遗忘，决定还是把我的粗浅理解记下来以免每次添加内容都要回去再看一遍。

Repo中的目录结构

下面的目录为Vdoing主题案例/docs文件夹内容

.
├─docs
│  ├─.vuepress
│  │  ├─config
│  │  ├─plugins
│  │  │  └─love-me
│  │  ├─public
│  │  │  └─img
│  │  └─styles
│  ├─00.目录页
│  ├─01.前端
│  │  ├─25.JavaScript文章
│  │  ├─30.Vue文章
│  │  └─40.学习笔记
│  ├─02.页面
│  │  ├─10.HTML
│  │  ├─20.CSS
│  │  └─25.stylus
│  ├─03.技术
│  │  ├─01.技术文档
│  │  ├─02.GitHub技巧
│  │  ├─03.Nodejs
│  │  └─04.博客搭建
│  ├─@pages
│  ├─《ES6 教程》笔记
│  ├─《JavaScript教程》笔记
│  ├─《TypeScript 从零实现 axios》
│  │  ├─01.初识 TypeScript
│  │  ├─02.TypeScript 常用语法
│  │  ├─03.ts-axios 项目初始化
|  |  ├─... ...
│  │  └─12.ts-axios 部署与发布
│  └─《Vue》笔记
│      ├─01.基础
│      ├─02.组件
│      ├─... ...
│      └─99.其他
.   .   

根据VuePress的官方文档，在文章内对链接的引用都是以/docs为根目录的，所以作者将/docs下的目录分为三级（当然，级别是指文件夹），并且需要标上相应的序号以便生成的而目录是有顺序的。

关于目录页面

什么是目录页面

首先需要知道的是：目录页面也是一个.md文件，可以存放在三级目录的任一级中，它的 font matter 中需要包含几个必须的要素：

pageComponent: 
  name: Catalogue
  data: 
    key: foldername
    imgUrl: /img/web.png
    description: 填写目录内容的介绍

最后经过处理，将会把key关键词内容对应的一级目录文件夹的内容生成一个目录显示在此页面上

目录示例

以下示例均来自于Vdoing主题案例

• 00.目录页下的三个目录页

  它们三个对应的是首页的三个大型标题链接到的页面，也是三个主要的一级目录。以01.前端.md为例，它的 key 关键词为01.前端，也就是说，这个页面下生成的目录将会是/docs目录下01.前端文件夹内的内容

  

• 《JavaScript教程》笔记.md对应的目录页

  这其实是二级目录下的目录页，但是其实三级目录下也可以有目录页，它的 key 关键词为《JavaScript教程》笔记，所以它的内容就是/docs目录下的《JavaScript教程》笔记文件夹内的内容

  

注意

虽然在上面的第二个案例中，其永久链接为/note/javascript好像不属于00.前端目录，但是其实这个无关紧要，仅为原作者归类的方法

谨记

总之！创建目录页要记住两点：

1. font matter 记得添加必需行

2. key关键词指向的目录放到/docs目录下

关于侧边栏

Sidebar的显示理念其实很简单，就是把在观看的文章所在的直属/docs下的文件夹的内容显示出来，所以最多是三级目录之内的内容。

而左右侧的Sidebar显示的是这篇文章的Content，如果页面窄的情况下，会自动集合到左侧。