vue.js 如何在Vitepress中制作带有儿童元素的侧边栏?

wvt8vs2t  于 2023-03-24  发布在  Vue.js
关注(0)|答案(1)|浏览(351)

我试图在侧边栏中表示我的文件夹树,但是当我单击Group父元素之一时,子元素没有呈现。

另一件奇怪的事情是Group元素没有cursor: pointer css属性,就像你在一个可点击的对象上所期望的那样。

export default {
  title: "blub docs",
  description: "blub",
  themeConfig: {
    nav: [
      { text: 'Home', link: '/' },
      { text: 'Examples', link: '/markdown-examples' }
    ],
    sidebar: {
      '/': [
        {
          text: 'Group 1',
          collapsible: true,
          children: [
            '/group1/page1.md',
            '/group1/page2.md',
          ],
        },
        {
          text: 'Group 2',
          collapsible: true,
          children: [
            '/group2/page1.md',
            '/group2/page2.md',
          ],
        },
      ],
    }
  }
}

我还注解掉了root/index.md中的layout,以便在着陆页上可以看到侧边栏(如果相关的话):

[//]: # (layout: home)

这是vitepress的默认布局。我已经实现了自定义布局,但最终遇到了完全相同的问题。

4zcjmb1e

4zcjmb1e1#

好了,从vitepress版本1.0.0-alpha.61开始,这是配置可折叠多层侧边栏的正确方法:

sidebar: [
    {
      text: 'Group 1',
      items: [
        {
          text: 'Group 2',
          collapsed: true,
          items: [
            { text: 'blub1', link: '/group1/page1.md' },
            { text: 'blub2', link: '/group1/page2.md' },
          ],
        },
      ],
    },
    {
      text: 'Group 2',
      collapsed: true,
      items: [
        { text: 'blub1', link: '/group2/page1.md' },
        { text: 'blub2', link: '/group2/page2.md' },
      ],
    },
],

资料来源https://vitepress.dev/reference/default-theme-sidebar#collapsible-sidebar-groups

相关问题