添加根目录显示在导航栏
This commit is contained in:
@@ -1,8 +1,8 @@
|
|||||||
export default defineAppConfig({
|
export default defineAppConfig({
|
||||||
ui: {
|
ui: {
|
||||||
colors: {
|
colors: {
|
||||||
primary: 'green',
|
primary: 'blue',
|
||||||
neutral: 'slate'
|
neutral: 'zinc'
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
uiPro: {
|
uiPro: {
|
||||||
|
@@ -63,7 +63,7 @@
|
|||||||
</NuxtLink>
|
</NuxtLink>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<ContentDirectory />
|
||||||
<!-- Document Navigation -->
|
<!-- Document Navigation -->
|
||||||
<UContainer>
|
<UContainer>
|
||||||
<UPageAside>
|
<UPageAside>
|
||||||
|
52
app/components/ContentDirectory.vue
Normal file
52
app/components/ContentDirectory.vue
Normal 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>
|
@@ -1,5 +1,6 @@
|
|||||||
// https://nuxt.com/docs/api/configuration/nuxt-config
|
// https://nuxt.com/docs/api/configuration/nuxt-config
|
||||||
export default defineNuxtConfig({
|
export default defineNuxtConfig({
|
||||||
|
|
||||||
modules: [
|
modules: [
|
||||||
'@nuxt/eslint',
|
'@nuxt/eslint',
|
||||||
'@nuxt/image',
|
'@nuxt/image',
|
||||||
|
Reference in New Issue
Block a user