1

docs/.vitepress/theme/Layout.vue

@@ -12,6 +12,7 @@ import TaoXin from './components/TaoXin.vue'
 import Cafe from './components/Cafe.vue'
 import Settings from './components/Settings.vue'
 import DocSidebar from './components/DocSidebar.vue'
+import sidebarData from './data/sidebar.json'
 
 const { frontmatter } = useData()
 const settingsStore = useSettingsStore()
@@ -23,6 +24,13 @@ const isHome = computed(() => frontmatter.value.home === true)
 const blurAmount = computed(() => settingsStore.theme.blurAmount ?? 20)
 const backgroundColor = computed(() => settingsStore.theme.backgroundColor ?? 'rgba(30, 30, 30, 0.7)')
 
+const navItems = computed(() => {
+  return sidebarData.map(group => ({
+    text: group.title,
+    link: group.path
+  }))
+})
+
 const handleResize = () => {
   settingsStore.setMobile(isMobileDevice())
 }
@@ -69,8 +77,14 @@ onUnmounted(() => {
           <a href="/" class="logo">乌仿镇</a>
           <nav class="doc-nav">
             <a href="/" class="nav-link">首页</a>
-            <a href="/java/" class="nav-link">Java</a>
-            <a href="/vue/" class="nav-link">Vue</a>
+            <a 
+              v-for="item in navItems" 
+              :key="item.link" 
+              :href="item.link" 
+              class="nav-link"
+            >
+              {{ item.text }}
+            </a>
           </nav>
         </header>
         

docs/.vitepress/theme/components/DocSidebar.vue

@@ -1,41 +1,20 @@
 <script setup lang="ts">
+import { computed } from 'vue'
 import { useData } from 'vitepress'
+import sidebarData from '../data/sidebar.json'
 
 const { page } = useData()
 
-const sidebarItems = {
-  '/java/': [
-    { text: '概述', link: '/java/' },
-    { text: '基础语法', link: '/java/basic' },
-    { text: '面向对象', link: '/java/oop' },
-    { text: '集合框架', link: '/java/collection' },
-    { text: '多线程', link: '/java/thread' }
-  ],
-  '/vue/': [
-    { text: '概述', link: '/vue/' },
-    { text: 'Vue3基础', link: '/vue/basic' },
-    { text: '组件开发', link: '/vue/component' },
-    { text: '组合式API', link: '/vue/composition' },
-    { text: '状态管理', link: '/vue/pinia' }
-  ]
-}
-
-function getCurrentSidebar() {
+const currentSidebar = computed(() => {
   const path = page.value.relativePath
-  for (const [prefix, items] of Object.entries(sidebarItems)) {
-    if (path.startsWith(prefix.replace(/^\//, ''))) {
-      return { title: prefix === '/java/' ? 'Java 笔记' : 'Vue 笔记', items }
-    }
-  }
-  return null
-}
-
-const currentSidebar = getCurrentSidebar()
+  const pathPrefix = path.split('/')[0]
+  return sidebarData.find(group => group.path === `/${pathPrefix}/`)
+})
 </script>
 
 <template>
   <div class="sidebar" v-if="currentSidebar">
-    <h2 class="sidebar-title">{{ currentSidebar.title }}</h2>
+    <h2 class="sidebar-title">{{ currentSidebar.title }} 笔记</h2>
     <ul class="sidebar-list">
       <li v-for="item in currentSidebar.items" :key="item.link">
         <a :href="item.link" class="sidebar-link">{{ item.text }}</a>

docs/.vitepress/theme/data/sidebar.d.ts

@@ -0,0 +1,11 @@
+declare module '*.json' {
+  const value: {
+    title: string
+    path: string
+    items: {
+      text: string
+      link: string
+    }[]
+  }[]
+  export default value
+}

docs/.vitepress/theme/data/sidebar.json

@@ -0,0 +1,64 @@
+[
+  {
+    "title": "java",
+    "path": "/java/",
+    "items": [
+      {
+        "text": "概述",
+        "link": "/java/"
+      },
+      {
+        "text": "Java基础语法",
+        "link": "/java/basic"
+      },
+      {
+        "text": "集合框架",
+        "link": "/java/collection"
+      },
+      {
+        "text": "面向对象编程",
+        "link": "/java/oop"
+      },
+      {
+        "text": "多线程编程",
+        "link": "/java/thread"
+      }
+    ]
+  },
+  {
+    "title": "vue",
+    "path": "/vue/",
+    "items": [
+      {
+        "text": "概述",
+        "link": "/vue/"
+      },
+      {
+        "text": "Vue3基础",
+        "link": "/vue/basic"
+      },
+      {
+        "text": "组件开发",
+        "link": "/vue/component"
+      },
+      {
+        "text": "组合式API",
+        "link": "/vue/composition"
+      },
+      {
+        "text": "状态管理",
+        "link": "/vue/pinia"
+      }
+    ]
+  },
+  {
+    "title": "杂谈",
+    "path": "/杂谈/",
+    "items": [
+      {
+        "text": "概述",
+        "link": "/杂谈/"
+      }
+    ]
+  }
+]