--
:
--
:
--
hugo-teek is loading...
构建结构化站点的核心配置和约定
最后更新于:
构建结构化站点的核心配置和约定
本主题遵循“约定优于配置”原则,如果你想构建一个结构化的站点,需要遵循下面这些约定,约定可以为你省去很多配置,轻松拥有一个结构清晰的站点。
你需要在config.js中有如下配置:
1// config.js
2module.exports = {
3 themeConfig: {
4 sidebar: 'structuring' // 'structuring' | { mode: 'structuring', collapsable: Boolean} | 'auto' | 自定义
5 }
6}
在运行开发服务npm run dev或打包npm run build时主题内部将会按照目录约定自动生成一个结构化的侧边栏、目录页、面包屑等数据。
在源目录(一般是docs)文件夹中,除了.vuepress、@pages、_posts、index.md 或 README.md之外的文件夹将会为其生成对应的侧边栏。生成的顺序取自序号,标题取自文件(夹)名称。
命名约定
- 无论是文件还是文件夹,请为其名称添加上正确的正整数序号和
.,从00或01开始累计,如01.文件夹、02.文件.md,我们将会按照序号的顺序来决定其在侧边栏当中的顺序。 - 同一级别目录别内即使只有一个文件或文件夹也要为其加上序号。
提示
序号只是用于决定先后顺序,并不一定需要连着,如
01、02、03...,实际工作中可能会在两个文章中间插入一篇新的文章,因此为了方便可以采用间隔序号10、20、30...,后面如果需要在10和20中间插入一篇新文章,可以给定序号15。
级别说明
源目录(一般是docs)底下的级别现在我们称之为一级目录,一级目录的下一级为二级目录,以此类推,最多只能到四级目录。
一级目录
.vuepress、@pages、_posts、index.md 或 README.md这些文件(文件夹)不参与数据生成。- 序号非必须。(如一些专栏,可以不用序号)
二级目录
- 该级别下可以同时放文件夹和
.md文件,但是两者序号要连贯(参考下面的例子中的其他)。 - 必须有序号
- 该级别下可以同时放文件夹和
三级目录
- (同上)
四级目录
v1.6.0 +
- 该级别下只能放
.md文件。 - 必须有序号
- 该级别下只能放
所有级别内至少有一个文件或文件夹。
目录结构例子
1.
2├── docs
3│ │ (不参与数据生成)
4│ ├── .vuepress
5│ ├── @pages
6│ ├── _posts
7│ ├── index.md
8│ │
9│ │ (以下部分参与数据生成)
10│ ├── 《JavaScript教程》专栏 (一级目录)
11│ │ ├── 01.章节1 (二级目录)
12│ │ | ├── 01.js1.md (三级目录-文件)
13│ │ | ├── 02.js2.md
14│ │ | └── 03.js3.md
15│ │ └── 02.章节2 (二级目录)
16│ │ | ├── 01.jsa.md
17│ │ | ├── 02.小节 (三级目录)
18│ │ | | └── 01.jsxx.md (四级目录-文件)
19│ ├── 01.前端
20│ │ ├── 01.JavaScript
21│ │ | ├── 01.js1.md
22│ │ | ├── 02.js2.md
23│ │ | └── 03.js3.md
24│ │ └── 02.vue
25│ │ | ├── 01.vue1.md
26│ │ | └── 02.vue2.md
27│ ├── 02.其他
28│ │ ├── 01.学习
29│ │ | ├── 01.xxa.md
30│ │ | └── 02.xxb.md
31│ │ ├── 02.学习笔记
32│ │ | ├── 01.xxa.md
33│ │ | └── 02.xxb.md
34│ │ ├── 03.文件x.md
35│ │ └── 04.文件xx.md
36│ └── 03.关于我
37│ │ └── 01.关于我.md
38. .
如何知道侧边栏数据有没有正确生成?
在运行开发服务时(npm run dev),在命令行查看打印记录,如果正确生成会有这样的绿色提示记录:
1tip: add sidebar data. 侧边栏数据添加成功。
如果有未按约定的文件,会有黄色警告记录,如:
1warning: 该文件'xxx'序号出错,请填写正确的序号。
📡
👤
作者:
余温Gueen
🌐
版权:
本站文章除特别声明外,均采用
CC BY-NC-SA 4.0
协议,转载请注明来自
余温Gueen Blog!
推荐使用微信支付

推荐使用支付宝
