40 lines
1.2 KiB
Vue
40 lines
1.2 KiB
Vue
<script setup lang="ts">
|
||
/**
|
||
* 侧边栏容器 —— 照抄 Docus 的结构：nav > ul.list > li*
|
||
*
|
||
* 实测（docus.dev）：
|
||
* aside > div > nav > ul.isolate.-mx-2.5.-mt-1.5
|
||
* 即 ul 自身带 -6px 上边距、-10px 左右边距，让 hover 区比容器更宽。
|
||
*
|
||
* 数据来自 themeConfig.sidebar（多侧栏匹配沿用 VitePress 官方实现）。
|
||
*/
|
||
import { computed } from 'vue'
|
||
import { useData } from 'vitepress'
|
||
import { getSidebar, getSidebarGroups } from 'vitepress/dist/client/theme-default/support/sidebar'
|
||
import G3SidebarItem from './G3SidebarItem.vue'
|
||
|
||
const { theme, page, frontmatter } = useData()
|
||
|
||
const groups = computed(() => {
|
||
const cfg = theme.value.sidebar
|
||
if (!cfg) return []
|
||
if (frontmatter.value.sidebar === false) return []
|
||
if (frontmatter.value.layout === 'home') return []
|
||
// 返回「分组对象数组」，每个元素即顶层 SidebarItem（含 text/items）
|
||
return getSidebarGroups(getSidebar(cfg, page.value.relativePath))
|
||
})
|
||
</script>
|
||
|
||
<template>
|
||
<nav v-if="groups.length" class="g3-nav-root">
|
||
<ul class="g3-list">
|
||
<G3SidebarItem
|
||
v-for="(group, i) in groups"
|
||
:key="i"
|
||
:item="group"
|
||
:level="0"
|
||
/>
|
||
</ul>
|
||
</nav>
|
||
</template>
|