vuepress侧边栏配置_侧边栏(sidebar) - VuePress 中文文档

要启用侧边栏, 请使用 themeConfig.sidebar。基本的配置需要一个链接数组:

// .vuepress/config.js

module.exports = {

themeConfig: {

sidebar: [

'/',

'/page-a',

['/page-b', 'Explicit link text']

]

}

}

你可以省略 .md 扩展名,以 / 结尾的路径被推断为 */README.md 。该链接的文本是自动推断的(从页面的第一个标题或 YAML front matter 中的显式标题)。如果你希望明确指定链接文本,请使用 [link,text] 形式的数组。

嵌套标题链接(nested header links)

侧边栏自动显示当前激活页面中标题的链接,嵌套在页面本身的链接下。你可以使用 themeConfig.sidebarDepth 自定义此行为。默认深度是 1,它提取 h2 标题。将其设置为 0 将禁用标题链接,最大值为2,同时提取 h2 和 h3 标题。

页面也可以在使用 YAML front matter 时覆盖此值:

---

sidebarDepth: 2

---

显示所有页面的标题链接 0.11.0+

默认情况下,侧边栏只会显示由当前活动页面的标题(headers)组成的链接,你可以将 themeConfig.displayAllHeaders 设置为 true 来显示所有页面的标题链接:

module.exports = {

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您可以通过修改vue-admin-template项目中的`src/layout/components/Sidebar/index.vue`文件来配置侧边栏手风琴效果。 首先,找到`<el-menu>`标签,将其更改为`<el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">`。在这里,我们添加了`:default-active属性和`@open`、`@close`事件。 接下来,在`data()`方法中添加以下代码: ```javascript data() { return { activeMenu: '', // 默认激活的菜单项 openedMenus: [] // 当前打开的菜单项数组 } } ``` 然后,在同一个文件中添加以下两个方法: ```javascript methods: { handleOpen(key, keyPath) { // 当打开菜单项时调用,将打开的菜单项加入到openedMenus数组中 this.openedMenus = keyPath }, handleClose(key, keyPath) { // 当关闭菜单项时调用,将关闭的菜单项从openedMenus数组中移除 this.openedMenus = keyPath } } ``` 最后,在`<el-menu-item>`和`<el-submenu>`标签上添加`:index`属性,将其绑定到对应的菜单项的唯一标识符上。例如: ```html <el-menu-item :index="'/dashboard'" icon="el-icon-s-home">仪表盘</el-menu-item> <el-submenu :index="'/nested'" icon="el-icon-folder-opened"> <template slot="title">嵌套菜单</template> <el-menu-item :index="'/nested/menu1'">菜单 1</el-menu-item> <el-menu-item :index="'/nested/menu2'">菜单 2</el-menu-item> </el-submenu> ``` 现在,您的侧边栏应该已经配置成手风琴效果了。打开一个菜单项时,其他打开的菜单项将会自动关闭。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值