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)

相关推荐
l1t37 分钟前
利用DeepSeek实现服务器客户端模式的DuckDB原型
服务器·c语言·数据库·人工智能·postgresql·协议·duckdb
寒月霜华2 小时前
机器学习-数据标注
人工智能·机器学习
九章云极AladdinEdu3 小时前
超参数自动化调优指南:Optuna vs. Ray Tune 对比评测
运维·人工智能·深度学习·ai·自动化·gpu算力
人工智能训练师4 小时前
Ubuntu22.04如何安装新版本的Node.js和npm
linux·运维·前端·人工智能·ubuntu·npm·node.js
酷飞飞4 小时前
Python网络与多任务编程:TCP/UDP实战指南
网络·python·tcp/ip
cxr8285 小时前
SPARC方法论在Claude Code基于规则驱动开发中的应用
人工智能·驱动开发·claude·智能体
研梦非凡5 小时前
ICCV 2025|从粗到细:用于高效3D高斯溅射的可学习离散小波变换
人工智能·深度学习·学习·3d
数字化顾问5 小时前
Python:OpenCV 教程——从传统视觉到深度学习:YOLOv8 与 OpenCV DNN 模块协同实现工业缺陷检测
python
幂简集成6 小时前
Realtime API 语音代理端到端接入全流程教程(含 Demo,延迟 280ms)
人工智能·个人开发
龙腾-虎跃6 小时前
FreeSWITCH FunASR语音识别模块
人工智能·语音识别·xcode