diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
index e8ce54d..8ad73b7 100644
--- a/docs/.vitepress/config.mts
+++ b/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: '最近更新',
+    },
   }
 })
diff --git a/docs/.vitepress/theme/custom.css b/docs/.vitepress/theme/custom.css
new file mode 100644
index 0000000..b69468b
--- /dev/null
+++ b/docs/.vitepress/theme/custom.css
@@ -0,0 +1,3 @@
+:root {
+  --vp-sidebar-width: 320px;
+}
diff --git a/docs/.vitepress/theme/index.ts b/docs/.vitepress/theme/index.ts
index def4cfc..01b88b6 100644
--- a/docs/.vitepress/theme/index.ts
+++ b/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,
diff --git a/docs/components/contents.vue b/docs/components/contents.vue
new file mode 100644
index 0000000..9194fa9
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/docs/how-to/database/mysql/install-on-ubuntu.md b/docs/how-to/database/mysql/install-on-ubuntu.md
new file mode 100644
index 0000000..05daa0c
--- /dev/null
+++ b/docs/how-to/database/mysql/install-on-ubuntu.md
@@ -0,0 +1,3 @@
+# MySQL 8.x 数据库安装配置 (Ubuntu 系统)
+
+待完善
diff --git a/docs/how-to/database/mysql/install-on-windows.md b/docs/how-to/database/mysql/install-on-windows.md
new file mode 100644
index 0000000..15958bc
--- /dev/null
+++ b/docs/how-to/database/mysql/install-on-windows.md
@@ -0,0 +1,3 @@
+# MySQL 8.x 数据库安装配置 (Windows 系统)
+
+待完善
diff --git a/docs/how-to/index.md b/docs/how-to/index.md
new file mode 100644
index 0000000..699e696
--- /dev/null
+++ b/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>
diff --git a/docs/index.md b/docs/index.md
index 2fd6189..67d4955 100644
--- a/docs/index.md
+++ b/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
diff --git a/docs/nav.mts b/docs/nav.mts
index f75a75c..644f5f5 100644
--- a/docs/nav.mts
+++ b/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',
+    },
 ]
\ No newline at end of file
diff --git a/docs/sidebar.mts b/docs/sidebar.mts
index 5d58af3..8db9f63 100644
--- a/docs/sidebar.mts
+++ b/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
     }
-]
\ No newline at end of file
+    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' }
+            ]
+        }
+    ]
+}
\ No newline at end of file