feat: 构建文档基础框架

docs/.vitepress/config.mts

@@ -23,6 +23,14 @@ export default defineConfig({
 
     socialLinks: [
       { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ]
+    ],
+
+    search: {
+      provider: 'local'
+    },
+
+    lastUpdated: {
+      text: '最近更新',
+    },
   }
 })

docs/.vitepress/theme/custom.css

@@ -0,0 +1,3 @@
+:root {
+  --vp-sidebar-width: 320px;
+}

docs/.vitepress/theme/index.ts

@@ -3,6 +3,7 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import './custom.css'
 
 export default {
   extends: DefaultTheme,

docs/components/contents.vue

@@ -0,0 +1,47 @@
+<template>
+    <!-- ------------------- -->
+    <!--
+    <br>
+    props.base: {{ props.base }}
+    <br>
+    props.sidebarItem.base: {{ props.sidebarItem.base }}
+    <br>
+-->
+    <p v-if="props.sidebarItem.text">
+        <a v-if="props.sidebarItem.link" @click="goTo(props.sidebarItem.link)" style="cursor: pointer;">
+            {{ props.sidebarItem.text }}
+        </a>
+        <span style="font-weight: bold;" v-else>
+            {{ props.sidebarItem.text }}
+        </span>
+    </p>
+    <!-- ------------------- -->
+
+    <!-- <pre>{{ page }}</pre> -->
+
+    <div v-if="props.sidebarItem.items" :style="props.sidebarItem.text ? 'margin-left: 25px;' : undefined">
+        <contents v-for="item in props.sidebarItem.items" :base="props.sidebarItem.base || props.base"
+            :sidebar-item="item" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useData, useRouter, DefaultTheme } from 'vitepress';
+
+const props = defineProps<{
+    base?: string,
+    sidebarItem: DefaultTheme.SidebarItem
+}>()
+
+const { page } = useData()
+
+const router = useRouter()
+
+function goTo(link: string) {
+    const target = (props.base || '') + link?.replace('.md', '.html')
+    console.log('base', props.base)
+    console.log('link', link)
+    console.log('target', target)
+    router.go(target)
+}
+</script>

docs/how-to/database/mysql/install-on-ubuntu.md

@@ -0,0 +1,3 @@
+# MySQL 8.x 数据库安装配置 (Ubuntu 系统)
+
+待完善

docs/how-to/database/mysql/install-on-windows.md

@@ -0,0 +1,3 @@
+# MySQL 8.x 数据库安装配置 (Windows 系统)
+
+待完善

docs/how-to/index.md

@@ -0,0 +1,10 @@
+# How to ... ? 如何做系列教程
+
+请在左侧选择教程。
+
+<contents :sidebar-item="sidebar['/how-to/']" />
+
+<script setup>
+import contents from '/components/contents.vue'
+import { sidebar } from '/sidebar.mts';
+</script>

docs/index.md

@@ -12,6 +12,9 @@ hero:
   tagline: My great project tagline
   actions:
     - theme: brand
+      text: 进入教程
+      link: /how-to
+    - theme: alt
       text: Markdown Examples
       link: /markdown-examples
     - theme: alt

docs/nav.mts

@@ -1,6 +1,17 @@
 import { DefaultTheme } from 'vitepress'
 
 export const nav: DefaultTheme.NavItem[] = [
-    { text: 'Home', link: '/' },
-    { text: 'Examples', link: '/markdown-examples' }
+    {
+        text: 'Home',
+        link: '/',
+    },
+    {
+        text: 'Home2',
+        link: '/how-to/index',
+        activeMatch: '/how-to/',
+    },
+    {
+        text: 'Examples',
+        link: '/markdown-examples',
+    },
 ]

docs/sidebar.mts

@@ -1,11 +1,70 @@
 import { DefaultTheme } from 'vitepress'
 
-export const sidebar: DefaultTheme.Sidebar = [
-    {
-        text: 'Examples',
-        items: [
-            { text: 'Markdown Examples', link: '/markdown-examples' },
-            { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
+const serialNumberMap = {}
+
+function serial(key) {
+    if (!serialNumberMap[key]) {
+        serialNumberMap[key] = 0
     }
-]
+    const serialNumber = ++serialNumberMap[key] // `${++serialNumberMap[key]}. `
+    // return
+    if (!key.includes('.')) {
+        return `🌟 `
+    }
+    return `✨ `
+}
+
+export const sidebar: DefaultTheme.Sidebar = {
+    '/how-to/': {
+        base: '/how-to/',
+        items: [
+            {
+                text: '开始',
+                items: [
+                    {
+                        text: '教程简介',
+                        link: '/index.md',
+                    },
+                ]
+            },
+            {
+                text: 'Linux 系统如何 ... ?',
+                items: [
+                    {
+                        text: `${serial('linux')}安装数据库`,
+                        items: [
+                            {
+                                text: `${serial('linux.db')}MySQL 8.x 安装 & 配置 (Ubuntu)`,
+                                link: 'database/mysql/install-on-ubuntu.md',
+                            }
+                        ]
+                    },
+                ]
+            },
+            {
+                text: 'Windows 系统如何 ... ?',
+                items: [
+                    {
+                        text: `${serial('win')}安装数据库`,
+                        items: [
+                            {
+                                text: `${serial('win.db')}MySQL 8.x 安装 & 配置`,
+                                link: 'database/mysql/install-on-windows.md',
+                            }
+                        ]
+                    },
+                ]
+            },
+        ]
+    },
+    '/': [
+
+        {
+            text: 'Examples',
+            items: [
+                { text: 'Markdown Examples', link: '/markdown-examples' },
+                { text: 'Runtime API Examples', link: '/api-examples' }
+            ]
+        }
+    ]
+}