分离blog和docs的布局
This commit is contained in:
155
app/components/blog/BlogHeader.vue
Normal file
155
app/components/blog/BlogHeader.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
// import type { NavigationMenuItem } from '@nuxt/ui'
|
||||
import type { ContentNavigationItem } from '@nuxt/content'
|
||||
|
||||
const navigation = inject<Ref<ContentNavigationItem[]>>('blogNavigation')
|
||||
// 提取 blog 目录下的子目录作为顶级导航
|
||||
const blogNavigation = computed(() => {
|
||||
if (!navigation?.value) return []
|
||||
// 查找 docs 目录
|
||||
const docsItem = navigation.value.find(item => item.title === 'blog' || item.path === '/blog')
|
||||
|
||||
if (!docsItem?.children) return []
|
||||
|
||||
// 返回 docs 目录下的子目录
|
||||
return docsItem.children
|
||||
})
|
||||
|
||||
const isSettingsOpen = ref(false)
|
||||
const isLoginModalOpen = ref(false)
|
||||
const isRegisterModalOpen = ref(false)
|
||||
|
||||
// const { header } = useAppConfig();
|
||||
|
||||
// 定义 props 来接收侧边栏状态和切换函数
|
||||
interface Props {
|
||||
isSidebarOpen?: boolean
|
||||
toggleSidebar?: () => void
|
||||
}
|
||||
|
||||
const Props = withDefaults(defineProps<Props>(), {
|
||||
isSidebarOpen: false,
|
||||
toggleSidebar: () => { }
|
||||
})
|
||||
|
||||
// 登录注册函数
|
||||
const handleLoginRegister = (type: 'login' | 'register') => {
|
||||
if (type === 'login') {
|
||||
isLoginModalOpen.value = true
|
||||
} else if (type === 'register') {
|
||||
isRegisterModalOpen.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UHeader
|
||||
toggle-side="left"
|
||||
title="Estel Docs"
|
||||
mode="modal"
|
||||
class="bg-gray-50 dark:bg-gray-900"
|
||||
>
|
||||
<template #title>
|
||||
<h6 />
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<LogoPro class="h-5 w-auto mb-4" />
|
||||
<DocsAsideLeftTop />
|
||||
<div class="mt-4 mb-4 border-t border-gray-200 dark:border-gray-700 w-9/10 mx-5" />
|
||||
<UContentNavigation
|
||||
highlight
|
||||
:navigation="blogNavigation"
|
||||
color="primary"
|
||||
type="single"
|
||||
variant="pill"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<UContentSearchButton class="lg:hidden" />
|
||||
<UColorModeButton />
|
||||
<button
|
||||
class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
title="页面设置"
|
||||
@click="isSettingsOpen = !isSettingsOpen"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<UTooltip
|
||||
text="Open on GitHub"
|
||||
:kbds="['meta', 'G']"
|
||||
>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
to="https://github.com/estel-li"
|
||||
target="_blank"
|
||||
icon="simple-icons-github"
|
||||
aria-label="GitHub"
|
||||
/>
|
||||
</UTooltip>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button
|
||||
class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
@click="handleLoginRegister('login')"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
<button
|
||||
class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
|
||||
@click="handleLoginRegister('register')"
|
||||
>
|
||||
注册
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</UHeader>
|
||||
|
||||
<!-- Theme Settings Panel -->
|
||||
<ThemeSettings
|
||||
:is-open="isSettingsOpen"
|
||||
@close="isSettingsOpen = false"
|
||||
/>
|
||||
|
||||
<!-- 登录模态框 -->
|
||||
<UModal
|
||||
v-model:open="isLoginModalOpen"
|
||||
title="登录"
|
||||
:dismissible="false"
|
||||
>
|
||||
<template #body>
|
||||
<authLogin />
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- 注册模态框 -->
|
||||
<UModal
|
||||
v-model:open="isRegisterModalOpen"
|
||||
title="注册"
|
||||
:dismissible="false"
|
||||
>
|
||||
<template #body>
|
||||
<authRegister />
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
40
app/components/blog/BlogHero.vue
Normal file
40
app/components/blog/BlogHero.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div class="relative w-full h-64 md:h-80 lg:h-96 overflow-hidden rounded-xl">
|
||||
<!-- 背景图片 -->
|
||||
<NuxtImg
|
||||
src="https://lijue-me.oss-cn-chengdu.aliyuncs.com/%E8%83%8C%E6%99%AF.jpg"
|
||||
alt="Blog Hero"
|
||||
class="w-full h-full object-cover"
|
||||
placeholder
|
||||
loading="lazy"
|
||||
sizes="100vw sm:50vw md:33vw"
|
||||
/>
|
||||
|
||||
<!-- 渐变遮罩 -->
|
||||
<!-- <div class="absolute inset-0 bg-gradient-to-r from-black/60 via-black/40 to-transparent"></div> -->
|
||||
|
||||
<!-- 内容区域 -->
|
||||
<!-- <div class="absolute inset-0 flex items-center justify-start p-8">
|
||||
<div class="max-w-2xl">
|
||||
<h1 class="text-4xl md:text-5xl lg:text-6xl font-bold text-white mb-4">
|
||||
博客文章
|
||||
</h1>
|
||||
<p class="text-lg md:text-xl text-gray-200 mb-6">
|
||||
分享技术见解和心得体会
|
||||
</p>
|
||||
<div class="flex items-center gap-4 text-white/80">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="lucide-pen-tool" size="20" />
|
||||
<span class="text-sm">技术分享</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="lucide-calendar" size="20" />
|
||||
<span class="text-sm">持续更新</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div> -->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
155
app/components/docs/DocsHeader.vue
Normal file
155
app/components/docs/DocsHeader.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<script setup lang="ts">
|
||||
// import type { NavigationMenuItem } from '@nuxt/ui'
|
||||
import type { ContentNavigationItem } from '@nuxt/content'
|
||||
|
||||
const navigation = inject<Ref<ContentNavigationItem[]>>('navigation')
|
||||
// 提取 docs 目录下的子目录作为顶级导航
|
||||
const docsNavigation = computed(() => {
|
||||
if (!navigation?.value) return []
|
||||
// 查找 docs 目录
|
||||
const docsItem = navigation.value.find(item => item.title === 'docs' || item.path === '/docs')
|
||||
|
||||
if (!docsItem?.children) return []
|
||||
|
||||
// 返回 docs 目录下的子目录
|
||||
return docsItem.children
|
||||
})
|
||||
|
||||
const isSettingsOpen = ref(false)
|
||||
const isLoginModalOpen = ref(false)
|
||||
const isRegisterModalOpen = ref(false)
|
||||
|
||||
// const { header } = useAppConfig();
|
||||
|
||||
// 定义 props 来接收侧边栏状态和切换函数
|
||||
interface Props {
|
||||
isSidebarOpen?: boolean
|
||||
toggleSidebar?: () => void
|
||||
}
|
||||
|
||||
const Props = withDefaults(defineProps<Props>(), {
|
||||
isSidebarOpen: false,
|
||||
toggleSidebar: () => { }
|
||||
})
|
||||
|
||||
// 登录注册函数
|
||||
const handleLoginRegister = (type: 'login' | 'register') => {
|
||||
if (type === 'login') {
|
||||
isLoginModalOpen.value = true
|
||||
} else if (type === 'register') {
|
||||
isRegisterModalOpen.value = true
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<UHeader
|
||||
toggle-side="left"
|
||||
title="Estel Docs"
|
||||
mode="modal"
|
||||
class="bg-gray-50 dark:bg-gray-900"
|
||||
>
|
||||
<template #title>
|
||||
<h6 />
|
||||
</template>
|
||||
|
||||
<template #body>
|
||||
<LogoPro class="h-5 w-auto mb-4" />
|
||||
<DocsAsideLeftTop />
|
||||
<div class="mt-4 mb-4 border-t border-gray-200 dark:border-gray-700 w-9/10 mx-5" />
|
||||
<UContentNavigation
|
||||
highlight
|
||||
:navigation="docsNavigation"
|
||||
color="primary"
|
||||
type="single"
|
||||
variant="pill"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #right>
|
||||
<UContentSearchButton class="lg:hidden" />
|
||||
<UColorModeButton />
|
||||
<button
|
||||
class=" p-2 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors"
|
||||
title="页面设置"
|
||||
@click="isSettingsOpen = !isSettingsOpen"
|
||||
>
|
||||
<svg
|
||||
class="w-5 h-5"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"
|
||||
/>
|
||||
<path
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
stroke-width="2"
|
||||
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<UTooltip
|
||||
text="Open on GitHub"
|
||||
:kbds="['meta', 'G']"
|
||||
>
|
||||
<UButton
|
||||
color="neutral"
|
||||
variant="ghost"
|
||||
to="https://github.com/estel-li"
|
||||
target="_blank"
|
||||
icon="simple-icons-github"
|
||||
aria-label="GitHub"
|
||||
/>
|
||||
</UTooltip>
|
||||
<div class="flex items-center space-x-2">
|
||||
<button
|
||||
class="px-3 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-white transition-colors"
|
||||
@click="handleLoginRegister('login')"
|
||||
>
|
||||
登录
|
||||
</button>
|
||||
<button
|
||||
class="text-sm font-medium text-white bg-primary rounded-md px-3 py-2 hover:bg-primary-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-colors"
|
||||
@click="handleLoginRegister('register')"
|
||||
>
|
||||
注册
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
</UHeader>
|
||||
|
||||
<!-- Theme Settings Panel -->
|
||||
<ThemeSettings
|
||||
:is-open="isSettingsOpen"
|
||||
@close="isSettingsOpen = false"
|
||||
/>
|
||||
|
||||
<!-- 登录模态框 -->
|
||||
<UModal
|
||||
v-model:open="isLoginModalOpen"
|
||||
title="登录"
|
||||
:dismissible="false"
|
||||
>
|
||||
<template #body>
|
||||
<authLogin />
|
||||
</template>
|
||||
</UModal>
|
||||
|
||||
<!-- 注册模态框 -->
|
||||
<UModal
|
||||
v-model:open="isRegisterModalOpen"
|
||||
title="注册"
|
||||
:dismissible="false"
|
||||
>
|
||||
<template #body>
|
||||
<authRegister />
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
@@ -16,7 +16,7 @@
|
||||
<!-- Right Content Area -->
|
||||
<div class="flex-1 lg:ml-64 flex flex-col min-w-0">
|
||||
<!-- Fixed Header -->
|
||||
<AppHeader
|
||||
<BlogHeader
|
||||
:is-sidebar-open="isSidebarOpen"
|
||||
:toggle-sidebar="toggleSidebar"
|
||||
/>
|
||||
|
||||
@@ -19,6 +19,7 @@ useSeoMeta({
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<!-- <BlogHero /> -->
|
||||
<BlogIndexBlog />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user