添加根目录显示在导航栏

This commit is contained in:
2025-07-25 00:12:50 +08:00
parent 1788e72ba5
commit 9469b530a1
4 changed files with 56 additions and 3 deletions

View File

@@ -1,8 +1,8 @@
export default defineAppConfig({
ui: {
colors: {
primary: 'green',
neutral: 'slate'
primary: 'blue',
neutral: 'zinc'
}
},
uiPro: {

View File

@@ -63,7 +63,7 @@
</NuxtLink>
</div>
</div>
<ContentDirectory />
<!-- Document Navigation -->
<UContainer>
<UPageAside>

View File

@@ -0,0 +1,52 @@
<template>
<div>
<h3 class="text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-3 px-1">
文档目录
</h3>
<UContentNavigation
:navigation="directoryNavigation"
highlight
color="primary"
variant="pill"
/>
</div>
</template>
<script setup lang="ts">
import type { ContentNavigationItem } from '@nuxt/content'
// 获取导航数据
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
// 处理导航数据,只显示一级目录和根目录文件
const directoryNavigation = computed(() => {
if (!navigation?.value) return []
return navigation.value.map(item => {
// 如果是根目录文件(没有 children直接返回
if (!item.children || item.children.length === 0) {
return {
title: item.title,
path: item.path,
icon: (item.icon as string) || 'i-lucide-file-text',
active: Boolean(item.active)
}
}
// 如果是一级目录,只保留目录本身,不显示子项
return {
title: item.title,
path: item.path,
icon: (item.icon as string) || 'i-lucide-folder',
active: Boolean(item.active),
// 不包含 children这样就不会展开显示子项
children: []
}
}).filter(item => item.title && item.path) // 过滤掉空项
})
// 调试信息
// console.log('ContentDirectory: Navigation data:', navigation.value)
// console.log('ContentDirectory: Processed navigation:', directoryNavigation.value)
</script>