VuePress侧边栏配置与useSidebar的使用方式

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        items: [
          { text: 'Item A', link: '/item-a' },
          { text: 'Item B', link: '/item-b' },
          // 更多子项...
        ]
      },
      {
        text: 'Section Title B',
        items: [
          { text: 'Item C', link: '/item-c' },
          { text: 'Item D', link: '/item-d' },
          // 更多子项...
        ]
      }
    ]
  }
}

.
├─ guide/
│  ├─ index.md
│  ├─ one.md
│  └─ two.md
└─ config/
   ├─ index.md
   ├─ three.md
   └─ four.md

export default {
  themeConfig: {
    sidebar: {
      '/guide/': [
        {
          text: 'Guide',
          items: [
            { text: 'Index', link: '/guide/' },
            { text: 'One', link: '/guide/one' },
            { text: 'Two', link: '/guide/two' }
          ]
        }
      ],
      '/config/': [
        {
          text: 'Config',
          items: [
            { text: 'Index', link: '/config/' },
            { text: 'Three', link: '/config/three' },
            { text: 'Four', link: '/config/four' }
          ]
        }
      ]
    }
  }
}

export default {
  themeConfig: {
    sidebar: [
      {
        text: 'Section Title A',
        collapsed: false, // 默认展开
        items: [
          { text: 'Item A', link: '/item-a' },
          { text: 'Item B', link: '/item-b' },
          // 更多子项...
        ]
      },
      {
        text: 'Section Title B',
        collapsed: true, // 默认收起
        items: [
          { text: 'Item C', link: '/item-c' },
          { text: 'Item D', link: '/item-d' },
          // 更多子项...
        ]
      }
    ]
  }
}

export interface DocSidebar {
  isOpen: Ref<boolean>,
  sidebar: ComputedRef<DefaultTheme.SidebarItem[]>,
  sidebarGroups: ComputedRef<DefaultTheme.SidebarItem[]>,
  hasSidebar: ComputedRef<boolean>,
  hasAside: ComputedRef<boolean>,
  leftAside: ComputedRef<boolean>,
  isSidebarEnabled: ComputedRef<boolean>,
  open: () => void,
  close: () => void,
  toggle: () => void
}

<script setup>
import { useSidebar } from '@vuepress/theme-default';

const { hasSidebar } = useSidebar();
</script>

<template>
  <div v-if="hasSidebar">仅在存在侧边栏时显示</div>
</template>