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


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


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


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


两岸青山相对出,孤帆一片日边来。

------《望天门山》


文章目录

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

VuePress个人博客专栏


VuePress侧边栏配置

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

1. 侧边栏参数位置

侧边栏的配置在主题theme参数下使用sidebar参数进行定义

侧边栏sidebar的值可以是数组也可以是对象,当有多个sidebar参数配置默认使用最后一个配置

如下

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

2. 侧边栏参数

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

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

3. 侧边栏数组配置

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

下面举例说明

3.1 文档创建

在以下配置中,需要创建的文件及位置如下

docs目录为项目根目录

根目录同级有README.md文档,该文档为项目首页默认文档

在docs下创建functions目录,在functions目录下创建f1.mdf2.mdf3.md

在docs下创建nodebook.mdnotebook2.md

文档创建后内容随机填写,但最好每个文档内容都不一样,这样便于区分界面显示效果

3.2 侧边栏数组配置示例

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

js 复制代码
  // 主题配置, 默认内容为空,此时只有一个黑色和白色主题的切换按钮
  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

link是text文本(标题)对应的文档链接,页面点击文本即可跳转到对应的链接界面

3.6 详细参数配置children

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

3.7 link和collapsible的配置效果

Functions1 未配置link和collapsible的标题

Functions2 配置了link和collapsible的标题

Functions3 未配置link但配置了collapsible的标题

如下图,Functions2为当前显示界面

4. 侧边栏对象配置

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

4.1 侧边栏对象配置示例

示例代码如下

js 复制代码
  // 主题配置, 默认内容为空,此时只有一个黑色和白色主题的切换按钮
  theme: defaultTheme({
    // sidebar的值为json对象(key-value)
    sidebar: {
      // 键为目录前缀,如果值中包含prefix参数则会拼接路径目录
      '/': [
        {
          // 文档显示的标题
          text: '文档目录functions',
          // 目录前缀
          prefix: 'functions/',
          // 是否开启侧边栏收起功能 默认关闭false
          collapsible: 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',
            },
          ],
        },

      ],
    },

  })

4.2 页面效果

侧边栏对象配置的页面效果如下

5. 注意事项

5.1 侧边栏默认参数

侧边栏sidebar默认的值是heading,根据标题自动生成侧边栏

5.2 侧边栏参数值false

当sidebar的值改为false时则会禁用侧边栏

5.3 多个侧边栏配置

如果有多个sidebar配置则会默认最后一个生效

5.4 link和collapsible同时使用

如果这两个参数同时使用,需要注意

link在前,则collapsible参数失效

想要两个都生效,则需要将link参数放在collapsible参数后

且此时配置后的效果会不显示折叠的箭头


感谢阅读,祝君暴富!


相关推荐
peachSoda710 分钟前
随手记:鼠标触顶方法
前端·javascript·vue.js
疯狂的沙粒10 分钟前
Vue项目开发 formatData 函数有哪些常用的场景?
前端·javascript·vue.js
逆旅行天涯11 分钟前
【功能实现】bilibili顶部鼠标跟随效果怎么实现?
前端·javascript·vue
毛毛三由14 分钟前
【10分钟学习Vue自定义指令开发】鼠标放置提示指令
前端·javascript·vue.js
一秒美工助手16 分钟前
鼠标经过遮罩效果 详情页阿里巴巴国际站外贸跨境电商装修运营 详情页装修无线端装修手机装修设计代码证书滚动特效效果代码,自定义内容代码模板模块设计设置装修
前端·javascript·html·计算机外设
桑榆肖物1 小时前
将 .NET Aspire 添加到现有应用:前端 JavaScript 项目处理
前端·javascript·.net
Wh1teR0se3 小时前
[极客大挑战 2019]Secret File--详细解析
前端·web安全·网络安全
ZhaiMou4 小时前
HTML5拖拽API学习 托拽排序和可托拽课程表
前端·javascript·学习·html5
code_shenbing7 小时前
跨平台WPF框架Avalonia教程 三
前端·microsoft·ui·c#·wpf·跨平台·界面设计
白臻8 小时前
使用element-plus el-table中使用el-image层级冲突table表格会覆盖预览的图片等问题
前端·vue.js·elementui