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'
     }
  }
}

image-20231123103856123

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

# 侧边栏分组

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

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

image-20231123105634447

# 数组形式:分组侧边栏

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

image-20231123111738875

# 对象形式:

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

image-20231123112649836

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

作者博客 (opens new window)

  • 10
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

悠闲的线程池

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值