vuepress-----4、侧边栏

# 4、侧边栏

# 自动生成侧栏

如果你希望自动生成一个仅仅包含了当前页面标题(headers)链接的侧边栏,你可以通过 YAML front matter 来实现:

---
sidebar: auto
---

你也可以通过配置来在所有页面中启用它:

// .vuepress/config.js
module.exports = {
  themeConfig: {
    sidebar: 'auto'
  }
}

多语言 (opens new window) 模式下, 你也可以将其应用到某一特定的语言下:

// .vuepress/config.js
module.exports = {
  themeConfig: {
     '/zh/': {
       sidebar: 'auto'
     }
  }
}

home页面中的home: true会抑制侧边栏的生成

# 侧边栏分组

记得关闭自动生成侧边栏的功能

sidebar: [
    '/',
    ['/about/','关于我'],
    ['/about.html', '关于我的HTML'],
    ['/about/','关于我'],
]

# 数组形式:分组侧边栏

sidebar: [
    '/',
    '/about/',
    {
        title: '美丽的 CSS',
        path: '/css/',
        collapsable: false, // 可选的, 默认值是 true,
        sidebarDepth: 1,    // 可选的, 默认值是 1
        children: [
            '/css/c-aaa',
            '/css/c-bbb',
            '/css/c-ccc',
        ]
    }
]

# 对象形式:

sidebar: {
    "/css/": [
        'c-aaa',
        'c-bbb',
        'c-ccc',
    ],
        "/javascript/": [
            'j-aaa',
            'j-bbb',
            'j-ccc',
        ]
}

视频作者开发插件 (opens new window)

作者博客 (opens new window)

相关推荐
985小水博一枚呀29 分钟前
【深度学习滑坡制图|论文解读3】基于融合CNN-Transformer网络和深度迁移学习的遥感影像滑坡制图方法
人工智能·深度学习·神经网络·cnn·transformer
龙哥说跨境30 分钟前
如何利用指纹浏览器爬虫绕过Cloudflare的防护?
服务器·网络·python·网络爬虫
AltmanChan30 分钟前
大语言模型安全威胁
人工智能·安全·语言模型
985小水博一枚呀34 分钟前
【深度学习滑坡制图|论文解读2】基于融合CNN-Transformer网络和深度迁移学习的遥感影像滑坡制图方法
人工智能·深度学习·神经网络·cnn·transformer·迁移学习
数据与后端架构提升之路43 分钟前
从神经元到神经网络:深度学习的进化之旅
人工智能·神经网络·学习
小白学大数据1 小时前
正则表达式在Kotlin中的应用:提取图片链接
开发语言·python·selenium·正则表达式·kotlin
flashman9111 小时前
python在word中插入图片
python·microsoft·自动化·word
爱技术的小伙子1 小时前
【ChatGPT】如何通过逐步提示提高ChatGPT的细节描写
人工智能·chatgpt
菜鸟的人工智能之路1 小时前
桑基图在医学数据分析中的更复杂应用示例
python·数据分析·健康医疗
懒大王爱吃狼2 小时前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍