修改页面导航栏样式,添加MD
This commit is contained in:
@@ -103,7 +103,7 @@ const links = computed(() => {
|
||||
<template>
|
||||
<UPage
|
||||
v-if="page"
|
||||
:class="pageFontSizeClass"
|
||||
:class="['lg:mr-30 sm:mt-6', pageFontSizeClass]"
|
||||
>
|
||||
<UPageHeader
|
||||
:title="page.title"
|
||||
@@ -162,21 +162,25 @@ const links = computed(() => {
|
||||
<UContentSurround :surround="surround" />
|
||||
</UPageBody>
|
||||
|
||||
<template
|
||||
<template
|
||||
v-if="page?.body?.toc?.links?.length"
|
||||
#right
|
||||
>
|
||||
<div class="fixed top-24 right-15 w-auto">
|
||||
<div class="">
|
||||
<UContentToc
|
||||
:title="appConfig.toc?.title"
|
||||
:links="page.body?.toc?.links"
|
||||
:ui="{
|
||||
root: 'fixed w-full xl:right-12 xl:w-64 z-50 bg-white dark:bg-gray-900 lg:border border-gray-200 dark:border-gray-700 rounded-lg lg:shadow-lg lg:mt-5'
|
||||
}"
|
||||
>
|
||||
|
||||
<template
|
||||
v-if="appConfig.toc?.bottom"
|
||||
#bottom
|
||||
>
|
||||
<div
|
||||
class="hidden lg:block space-y-6 "
|
||||
class=""
|
||||
:class="{ '!mt-5': page.body?.toc?.links?.length }"
|
||||
>
|
||||
<USeparator
|
||||
|
||||
@@ -103,7 +103,7 @@ const links = computed(() => {
|
||||
<template>
|
||||
<UPage
|
||||
v-if="page"
|
||||
:class="pageFontSizeClass"
|
||||
:class="['lg:mr-30 sm:mt-6', pageFontSizeClass]"
|
||||
>
|
||||
<UPageHeader
|
||||
:title="page.title"
|
||||
@@ -162,21 +162,25 @@ const links = computed(() => {
|
||||
<UContentSurround :surround="surround" />
|
||||
</UPageBody>
|
||||
|
||||
<template
|
||||
<template
|
||||
v-if="page?.body?.toc?.links?.length"
|
||||
#right
|
||||
>
|
||||
<div class="fixed top-24 right-15 w-auto">
|
||||
<div class="">
|
||||
<UContentToc
|
||||
:title="appConfig.toc?.title"
|
||||
:links="page.body?.toc?.links"
|
||||
:ui="{
|
||||
root: 'fixed w-full xl:right-12 xl:w-64 z-50 bg-white dark:bg-gray-900 lg:border border-gray-200 dark:border-gray-700 rounded-lg lg:shadow-lg lg:mt-5'
|
||||
}"
|
||||
>
|
||||
|
||||
<template
|
||||
v-if="appConfig.toc?.bottom"
|
||||
#bottom
|
||||
>
|
||||
<div
|
||||
class="hidden lg:block space-y-6 "
|
||||
class=""
|
||||
:class="{ '!mt-5': page.body?.toc?.links?.length }"
|
||||
>
|
||||
<USeparator
|
||||
|
||||
@@ -1,5 +1,104 @@
|
||||
<script setup lang="ts">
|
||||
import { useSeoMeta } from '#imports'
|
||||
definePageMeta({
|
||||
layout: 'docs'
|
||||
})
|
||||
|
||||
useSeoMeta({
|
||||
title: 'Estel Docs',
|
||||
description: '简约而强大的文档系统，为技术分享而生',
|
||||
ogTitle: 'Estel Docs',
|
||||
ogDescription: '简约而强大的文档系统，为技术分享而生',
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<h1>首页</h1>
|
||||
<div class="min-h-screen bg-gradient-to-br from-blue-50 via-white to-indigo-50 dark:from-gray-900 dark:via-gray-800 dark:to-gray-900">
|
||||
<!-- Hero 区域 -->
|
||||
<div class="max-w-6xl mx-auto px-4 py-20">
|
||||
<!-- 主要内容 -->
|
||||
<div class="text-center mb-16">
|
||||
<h1 class="text-5xl md:text-7xl font-bold text-gray-900 dark:text-white mb-6">
|
||||
Estel Hub
|
||||
</h1>
|
||||
<p class="text-xl md:text-2xl text-gray-600 dark:text-gray-300 mb-8 max-w-3xl mx-auto">
|
||||
简约而强大的文档系统,衍生而出Blog系统,为技术分享而生
|
||||
</p>
|
||||
<p class="text-lg text-gray-500 dark:text-gray-400 mb-12 max-w-2xl mx-auto">
|
||||
基于 Nuxt 4 构建，支持 Markdown 文档管理和博客发布，提供完整的现代化内容管理解决方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- 导航卡片 -->
|
||||
<div class="grid md:grid-cols-2 gap-8 max-w-4xl mx-auto">
|
||||
<!-- 文档系统 -->
|
||||
<NuxtLink
|
||||
to="/docs"
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<UIcon
|
||||
name="lucide-book-open"
|
||||
class="text-3xl text-blue-600 dark:text-blue-400"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
文档系统
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||||
技术文档、API 文档、使用指南，一切尽在掌握
|
||||
</p>
|
||||
<div class="flex items-center justify-center text-blue-600 dark:text-blue-400 group-hover:text-blue-700 dark:group-hover:text-blue-300 transition-colors">
|
||||
<span class="mr-2">开始阅读</span>
|
||||
<UIcon name="lucide-arrow-right" size="20" />
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- 博客系统 -->
|
||||
<NuxtLink
|
||||
to="/blog"
|
||||
class="group bg-white dark:bg-gray-800 rounded-2xl p-8 shadow-lg hover:shadow-xl transition-all duration-300 border border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div class="text-center">
|
||||
<div class="w-16 h-16 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center mx-auto mb-6 group-hover:scale-110 transition-transform duration-300">
|
||||
<UIcon
|
||||
name="lucide-pen-tool"
|
||||
class="text-3xl text-green-600 dark:text-green-400"
|
||||
/>
|
||||
</div>
|
||||
<h2 class="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
||||
博客系统
|
||||
</h2>
|
||||
<p class="text-gray-600 dark:text-gray-300 mb-6">
|
||||
技术分享、心得体会、生活感悟，记录每一个精彩瞬间
|
||||
</p>
|
||||
<div class="flex items-center justify-center text-green-600 dark:text-green-400 group-hover:text-green-700 dark:group-hover:text-green-300 transition-colors">
|
||||
<span class="mr-2">开始阅读</span>
|
||||
<UIcon name="lucide-arrow-right" size="20" />
|
||||
</div>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- 底部信息 -->
|
||||
<div class="text-center mt-16">
|
||||
<div class="flex items-center justify-center gap-8 text-sm text-gray-500 dark:text-gray-400">
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="lucide-github" size="16" />
|
||||
<a href="https://github.com/estel-li/estel-docs" target="_blank" class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
|
||||
GitHub
|
||||
</a>
|
||||
</div>
|
||||
<div class="flex items-center gap-2">
|
||||
<UIcon name="lucide-globe" size="16" />
|
||||
<a href="https://lijue.me" target="_blank" class="hover:text-gray-700 dark:hover:text-gray-200 transition-colors">
|
||||
个人博客
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
Reference in New Issue
Block a user