当前位置：首页 > news >正文

VuePress搭建文档网站/个人博客（详细配置）主题配置-侧边栏配置

news 来源：原创 2024/9/25 1:34:12

天行健，君子以自强不息；地势坤，君子以厚德载物。

每个人都有惰性，但不断学习是好好生活的根本，共勉！

文章均为学习整理笔记，分享记录为主，如有错误请指正，共同学习进步。

两岸青山相对出，孤帆一片日边来。
——《望天门山》

文章目录

VuePress侧边栏配置
- 1. 侧边栏参数位置
- 2. 侧边栏参数
- 3. 侧边栏数组配置
- - 3.1 文档创建
  - 3.2 侧边栏数组配置示例
  - 3.3 详细参数配置collapsible
  - 3.4 详细参数配置text
  - 3.5 详细参数配置link
  - 3.6 详细参数配置children
  - 3.7 link和collapsible的配置效果
- 4. 侧边栏对象配置
- - 4.1 侧边栏对象配置示例
  - 4.2 页面效果
- 5. 注意事项
- - 5.1 侧边栏默认参数
  - 5.2 侧边栏参数值false
  - 5.3 多个侧边栏配置
  - 5.4 link和collapsible同时使用

VuePress个人博客专栏

VuePress侧边栏配置

站点侧边栏配置属于主题配置，因为该配置在主题配置中进行

1. 侧边栏参数位置

侧边栏的配置在主题theme参数下使用sidebar参数进行定义
侧边栏sidebar的值可以是数组也可以是对象，当有多个sidebar参数配置默认使用最后一个配置
如下

  // 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮theme: defaultTheme({// 侧边栏 数组sidebar: [{},{},]// 侧边栏 对象sidebar: {'/': [{},{},]},})

2. 侧边栏参数

在sidebar中进行参数配置，参数有以下几种

参数	是否必选	描述
`text`	必须	页面显示的名称
`collapsible`	可选	是否开启侧边栏折叠功能
`link`	可选	跳转路径，可以是文件路径也可以是外部的网址
`prefix`	可选	前缀，文件路径前缀
`children`	可选	子路径或文件，可以嵌套使用

3. 侧边栏数组配置

侧边栏数组配置，即将每个数组中每个元素就是一个标题和对应的文件列表，当然元素也可以是一个单独的文件
下面举例说明

3.1 文档创建

在以下配置中，需要创建的文件及位置如下
docs目录为项目根目录
根目录同级有README.md文档，该文档为项目首页默认文档
在docs下创建functions目录，在functions目录下创建f1.md，f2.md，f3.md
在docs下创建nodebook.md，notebook2.md
在这里插入图片描述
文档创建后内容随机填写，但最好每个文档内容都不一样，这样便于区分界面显示效果

3.2 侧边栏数组配置示例

以下为侧边栏数组配置的侧边栏内容

  // 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮theme: defaultTheme({sidebar: [{// 侧边栏标题text: 'Functions1',// link和collapsible两个参数如果同时使用的话，需要将link放在collapsible参数后，否则无法生效// collapsible: true,// 侧边栏标题点击链接// link: '/README.md',children: ['notebook.md','notebook.md',],},{text: 'Functions2',// link和collapsible两个参数如果同时使用的话，需要将link放在collapsible参数后，否则无法生效collapsible: true,link: '/README.md',children: [{text: 'baidu',link: 'https://www.baidu.com',},'notebook2.md','notebook2.md',],},{text: 'Functions3',prefix: '/functions/',// link: '/README.md',collapsible: true,// collapsible: false,children: [{text: 'baidu',link: 'https://www.baidu.com',},{text: 'F1',link: 'f1.md',},'f1.md','f2.md',],},],}),

页面效果如下
在这里插入图片描述

3.3 详细参数配置collapsible

collapsible参数为是否开启侧边栏中的折叠功能，默认值为false，即关闭状态
当配置collapsible值为true时，功能打开
如下，Functions1标题没有未开启折叠，默认展开
Functions2标题配置折叠开启，此时已经折叠，在标题的后面有个箭头表示
在这里插入图片描述
点击Functions3标题，可展开，如下

3.4 详细参数配置text

text参数是每个侧边栏标题的文本内容，也可以是子标题的文本
也就是说侧边栏中显示的内容如果设置了text都会显示为text文本内容
不配置text参数则会直接显示文档的路径，并且文档的后缀md会默认修改为html

3.5 详细参数配置link

link是text文本（标题）对应的文档链接，页面点击文本即可跳转到对应的链接界面

3.6 详细参数配置children

children参数是侧边栏的子标题配置项，可以在每个标题中添加该参数，并在参数中配置子标题

3.7 link和collapsible的配置效果

Functions1 未配置link和collapsible的标题
Functions2 配置了link和collapsible的标题
Functions3 未配置link但配置了collapsible的标题

如下图，Functions2为当前显示界面
在这里插入图片描述

4. 侧边栏对象配置

根据第3小节创建的文档，下面使用对对象配置

4.1 侧边栏对象配置示例

示例代码如下

  // 主题配置， 默认内容为空，此时只有一个黑色和白色主题的切换按钮theme: defaultTheme({// sidebar的值为json对象（key-value）sidebar: {// 键为目录前缀，如果值中包含prefix参数则会拼接路径目录'/': [{// 文档显示的标题text: '文档目录functions',// 目录前缀prefix: 'functions/',// 是否开启侧边栏收起功能 默认关闭falsecollapsible: true,// collapsible: false,// 相对路径会自动追加子路径前缀children: [// 文档链接{// 文档名text: 'F1',// 文档链接link: 'f1.md',},{text: 'F2',link: 'f2.md',},'f1.md', // 解析为 `/functions/f1.html`'f2.md', // 解析为 `/functions/f2.html`],},{text: '目录2',prefix: 'functions/',// collapsible: true,collapsible: false,children: ['f1.md','f1.md', 'f2.md', 'f2.md'],},{text: '目录3',prefix: 'functions/',collapsible: true,children: [{text: '子目录1',link: 'f1.md',},{text: '子目录2',link: 'f2.md',},],},],},})