feat:重构导航栏侧边栏

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);

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' },

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);