feat:重构导航栏侧边栏

This commit is contained in:
2025-12-18 00:03:36 +08:00
parent 5b02b1c729
commit 228109ee81
7 changed files with 70 additions and 58 deletions

View File

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

View File

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

View File

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

View File

@@ -3,9 +3,15 @@ layout: doc
title: DevOps
---
# 内容导航
# DevOps
- [OpenObserve部署和使用](/DevOps/OpenObserve)
- [Jenkins部署和使用](/DevOps/Jenkins)
- [ElasticSearch部署和使用](/DevOps/ElasticSearch)
- [Docker简介和安装](/DevOps/Docker)
<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>

View File

@@ -3,8 +3,15 @@ layout: doc
title: Flutter
---
# 内容导航
# Flutter
- [Dart基础教程](/Flutter/DartGuide)
- [Flutter基础教程](/Flutter/FlutterGuide)
- [实战技巧](/Flutter/Practice)
<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>

View File

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

View File

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