From 228109ee81750a0b52f3215ea8507ec188bf1bda Mon Sep 17 00:00:00 2001
From: Cxx0822 <1556464090@qq.com>
Date: Thu, 18 Dec 2025 00:03:36 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E9=87=8D=E6=9E=84=E5=AF=BC=E8=88=AA?=
 =?UTF-8?q?=E6=A0=8F=E4=BE=A7=E8=BE=B9=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../theme/components/ArticleMetadata.vue      | 18 +++++++++
 docs/.vitepress/theme/router/index.ts         | 12 +++---
 docs/.vitepress/theme/style/var.css           |  7 ----
 docs/DevOps/index.md                          | 16 +++++---
 docs/Flutter/index.md                         | 15 ++++++--
 docs/Web-Backend/index.md                     | 37 ++++++-------------
 docs/Web-Front/index.md                       | 23 ++++++------
 7 files changed, 70 insertions(+), 58 deletions(-)

diff --git a/docs/.vitepress/theme/components/ArticleMetadata.vue b/docs/.vitepress/theme/components/ArticleMetadata.vue
index 27bf7bf..35d7f36 100644
--- a/docs/.vitepress/theme/components/ArticleMetadata.vue
+++ b/docs/.vitepress/theme/components/ArticleMetadata.vue
@@ -1,4 +1,8 @@
 <template>
+    <div class="title">
+        <span>{{ page.frontmatter.title }}</span>
+    </div>
+
     <div v-if="!page.filePath.includes('index.md')" class="blog-stats">
         <div v-if="page.frontmatter.isGreat" class="item">
             <svg  t="1765851905856" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11930" width="16" height="16"><path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01" p-id="11931"></path><path d="M136.533333 307.2a34.133333 34.133333 0 0 1 34.133334-34.133333h682.666666a34.133333 34.133333 0 0 1 34.133334 34.133333v437.3504a68.266667 68.266667 0 0 1-35.566934 59.938133l-274.5344 149.7088a136.533333 136.533333 0 0 1-130.730666 0L172.100267 804.522667A68.266667 68.266667 0 0 1 136.533333 744.5504V307.2z" fill="#bd34fe" p-id="11932"></path><path d="M68.266667 136.533333a68.266667 68.266667 0 0 1 68.266666-68.266666h750.933334a68.266667 68.266667 0 0 1 68.266666 68.266666v117.4528a34.133333 34.133333 0 0 1-16.247466 29.0816l-373.828267 230.058667a102.4 102.4 0 0 1-107.3152 0L84.514133 283.0336A34.133333 34.133333 0 0 1 68.266667 253.952V136.533333z" fill="#bd34fe" p-id="11933"></path><path d="M496.605867 339.490133a17.066667 17.066667 0 0 1 30.788266 0L576.853333 443.050667a17.066667 17.066667 0 0 0 13.175467 9.557333l113.800533 15.018667a17.066667 17.066667 0 0 1 9.5232 29.2864l-83.2512 79.018666a17.066667 17.066667 0 0 0-5.051733 15.496534l20.923733 112.8448a17.066667 17.066667 0 0 1-24.917333 18.090666l-100.864-54.715733a17.066667 17.066667 0 0 0-16.315733 0l-100.864 54.715733a17.066667 17.066667 0 0 1-24.917334-18.090666l20.8896-112.8448a17.066667 17.066667 0 0 0-5.0176-15.496534l-83.217066-79.018666a17.066667 17.066667 0 0 1 9.489066-29.2864l113.800534-15.018667a17.066667 17.066667 0 0 0 13.175466-9.557333l49.425067-103.560534z" fill="#FFFFFF" p-id="11934"></path></svg>            
@@ -77,9 +81,23 @@ onMounted(() => {
     margin-bottom: 10px;
 
     display: flex;
+    flex-wrap: wrap;
     gap: 5px;
 }
 
+.title {
+    margin-bottom: 5px;
+    padding: 10px 0;
+    text-align: center;
+    font-size: 32px;
+    color: #fff;
+    font-weight: bold;
+    background: -webkit-linear-gradient(10deg, #3DC8F0 5%, #8036FA 15%);
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
 .icon {
     display: inline-block;
     transform: translate(0px , 2px);
diff --git a/docs/.vitepress/theme/router/index.ts b/docs/.vitepress/theme/router/index.ts
index a02662e..a179bf5 100644
--- a/docs/.vitepress/theme/router/index.ts
+++ b/docs/.vitepress/theme/router/index.ts
@@ -1,16 +1,16 @@
 export const routers = [
   { 
-    text: '🌐Web前端', 
+    text: '🌐 Web前端', 
     items: [
       { 
-        text: 'Vue',
+        text: '🌿 Vue',
         items: [
           { text: 'Vue3-Common', link: '/Web-Front/Vue/Vue3-Common' },
           { text: 'Vue3架构原理', link: '/Web-Front/Vue/Vue3-Architecture' }
         ]
       },
       { 
-        text: '其他',
+        text: '🔄 其他',
         items: [
           { text: 'JavaScript知识点整理', link: '/Web-Front/Others/JavaScript-Guide' },
           { text: '前端包管理器', link: '/Web-Front/Others/Package' },
@@ -24,7 +24,7 @@ export const routers = [
     text: '🖥️ Web后端', 
     items: [
       { 
-        text: 'SpringBoot',
+        text: '🍃 SpringBoot',
         items: [
           { text: 'Spring IOC简介', link: '/Web-Backend/SpringBoot/SpringIOC' },
           { text: 'SpringBoot启动流程', link: '/Web-Backend/SpringBoot/SpringBoot-Start-Process' },
@@ -37,14 +37,14 @@ export const routers = [
         ]
       },
       {
-        text: 'FastAPI',
+        text: '🐍 FastAPI',
         items: [
           { text: 'FastAPI基础教程', link: '/Web-Backend/FastAPI/FastAPI-Guide' },
           { text: '基于OAuth2的安全验证', link: '/Web-Backend/FastAPI/OAuth2' }
         ]
       },
       { 
-        text: '其他',
+        text: '🔄 其他',
         items: [
           { text: 'MySQL知识点', link: '/Web-Backend/Others/MySQL-Knowledge' },
           { text: 'Flyway简单使用', link: '/Web-Backend/Others/Flyway' },
diff --git a/docs/.vitepress/theme/style/var.css b/docs/.vitepress/theme/style/var.css
index e12cc4b..4bc029a 100644
--- a/docs/.vitepress/theme/style/var.css
+++ b/docs/.vitepress/theme/style/var.css
@@ -7,13 +7,6 @@
     transform: translateY(-5px);
 }
 
-.VPDoc h1 {
-    background: -webkit-linear-gradient(10deg, #3DC8F0 5%, #8036FA 15%);
-    background-clip: text;
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-}
-
 :root {
     --vp-home-hero-name-color: transparent;
     --vp-home-hero-name-background: -webkit-linear-gradient(120deg,#bd34fe 30%,#41d1ff);
diff --git a/docs/DevOps/index.md b/docs/DevOps/index.md
index 5ca15a4..3ac8ad5 100644
--- a/docs/DevOps/index.md
+++ b/docs/DevOps/index.md
@@ -3,9 +3,15 @@ layout: doc
 title: DevOps
 ---
 
-# 内容导航
+# DevOps
 
-- [OpenObserve部署和使用](/DevOps/OpenObserve)
-- [Jenkins部署和使用](/DevOps/Jenkins)
-- [ElasticSearch部署和使用](/DevOps/ElasticSearch)
-- [Docker简介和安装](/DevOps/Docker)
\ No newline at end of file
+<script setup>
+import { routers } from '../.vitepress/theme/router'
+import { withBase } from 'vitepress'
+</script>
+
+<ul>
+    <li v-for="item in routers[2].items" :key="item.text">
+        <a :href="withBase(item.link)">{{ item.text }}</a>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/docs/Flutter/index.md b/docs/Flutter/index.md
index 6e2e19b..62fe4c2 100644
--- a/docs/Flutter/index.md
+++ b/docs/Flutter/index.md
@@ -3,8 +3,15 @@ layout: doc
 title: Flutter
 ---
 
-# 内容导航
+# Flutter
 
-- [Dart基础教程](/Flutter/DartGuide)
-- [Flutter基础教程](/Flutter/FlutterGuide)
-- [实战技巧](/Flutter/Practice)
\ No newline at end of file
+<script setup>
+import { routers } from '../.vitepress/theme/router'
+import { withBase } from 'vitepress'
+</script>
+
+<ul>
+    <li v-for="item in routers[3].items" :key="item.text">
+        <a :href="withBase(item.link)">{{ item.text }}</a>
+    </li>
+</ul>
\ No newline at end of file
diff --git a/docs/Web-Backend/index.md b/docs/Web-Backend/index.md
index 3086942..3eaa6f4 100644
--- a/docs/Web-Backend/index.md
+++ b/docs/Web-Backend/index.md
@@ -8,29 +8,16 @@ description: Web后端开发技术文档，包含数据库、框架、中间件
 
 后端开发技术栈的学习笔记和总结。
 
-### 🍃 SpringBoot
-SpringBoot 框架学习系列：
+<script setup>
+import { routers } from '../.vitepress/theme/router'
+import { withBase } from 'vitepress'
+</script>
 
-- [Spring IOC简介](/Web-Backend/SpringBoot/SpringIOC)
-- [SpringBoot启动流程](/Web-Backend/SpringBoot/SpringBoot-Start-Process)
-- [Spring MVC简介](/Web-Backend/SpringBoot/SpringMVC)
-- [SpringBoot Starter原理](/Web-Backend/SpringBoot/SpringBootStarter)
-- [SpringBoot Bean简介](/Web-Backend/SpringBoot/SpringBootBean)
-- [SpringBoot3原生镜像](/Web-Backend/SpringBoot/SpringBoot3-GraalVM)
-- [SpingBoot技巧](/Web-Backend/SpringBoot/SpingBoot-Skills)
-- [SpringBoot Common](/Web-Backend/SpringBoot/SpringBoot-Common)
-
-### 🐍 FastAPI
-Python FastAPI 框架学习：
-
-- [FastAPI基础教程](/Web-Backend/FastAPI/FastAPI-Guide)
-- [基于OAuth2的FastApi安全验证](/Web-Backend/FastAPI/OAuth2)
-
-### 🔄 其他
-
-- [MySQL知识点](/Web-Backend/Others/MySQL-Knowledge)
-- [Flyway简单使用](/Web-Backend/Others/Flyway)
-- [MyBatis简介和使用](/Web-Backend/Others/MyBatis)
-- [RustFS简介和使用](/Web-Backend/Others/RustFS)
-- [AList简介和使用](/Web-Backend/Others/AList)
-- [网络编程简介](/Web-Backend/Others/Netword-Program)
\ No newline at end of file
+<div v-for="category in routers[1].items" :key="category.text">
+    <h3>{{ category.text }}</h3>
+    <ul>
+        <li v-for="item in category.items" :key="item.text">
+            <a :href="withBase(item.link)">{{ item.text }}</a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/docs/Web-Front/index.md b/docs/Web-Front/index.md
index f2cd197..8e11c2f 100644
--- a/docs/Web-Front/index.md
+++ b/docs/Web-Front/index.md
@@ -8,15 +8,16 @@ description: Web前端开发技术文档
 
 前端开发技术栈的学习笔记和总结。
 
-### 🌿 Vue
-Vue 框架学习：
+<script setup>
+import { routers } from '../.vitepress/theme/router'
+import { withBase } from 'vitepress'
+</script>
 
-- [Vue3-Common](/Web-Front/Vue/Vue3-Common)
-- [Vue3架构原理](/Web-Front/Vue/Vue3-Architecture)
-
-### 🔄 其他
-
-- [JavaScript知识点整理](/Web-Front/Others/JavaScript-Guide)
-- [前端包管理器](/Web-Front/Others/Package)
-- [Vite核心原理](/Web-Front/Others/Vite-Principle)
-- [浏览器渲染全流程解析](/Web-Front/Others/Browser-Process)
\ No newline at end of file
+<div v-for="category in routers[0].items" :key="category.text">
+    <h3>{{ category.text }}</h3>
+    <ul>
+        <li v-for="item in category.items" :key="item.text">
+            <a :href="withBase(item.link)">{{ item.text }}</a>
+        </li>
+    </ul>
+</div>
\ No newline at end of file