doc: 完善主题并编写导言

.vitepress/config.mts

@@ -1,28 +1,61 @@
-import { defineConfig } from 'vitepress'
+import { defineConfig, UserConfig } from 'vitepress'
+import { withSidebar } from "vitepress-sidebar";
+import { VitePressSidebarOptions } from 'vitepress-sidebar/types';
 
-// https://vitepress.dev/reference/site-config
-export default defineConfig({
+const vitepressOptions: UserConfig = {
   title: "Bingyan DevKit",
   description: "Unity DevKit powered by Bingyan Studio",
+  appearance: "dark",
+
   themeConfig: {
+
+    logo: '/logo.webp',
+
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'Home', link: '/' },
-      { text: 'Examples', link: '/markdown-examples' }
+      { text: '主页', link: '/' },
+      { text: '文档', link: '/getting-started' }
     ],
 
-    sidebar: [
-      {
-        text: 'Examples',
-        items: [
-          { text: 'Markdown Examples', link: '/markdown-examples' },
-          { text: 'Runtime API Examples', link: '/api-examples' }
-        ]
-      }
-    ],
+    outline: {
+      level: [2, 3],
+      label: "本页内容"
+    },
 
     socialLinks: [
-      { icon: 'github', link: 'https://github.com/vuejs/vitepress' }
-    ]
-  }
-})
+      { icon: 'github', link: 'https://github.com/BingyanStudio/BingyanDevKit' }
+    ],
+
+    search: {
+      provider: "local",
+    },
+
+    lastUpdated: {
+      text: "上次更新",
+      formatOptions: {
+        dateStyle: "full",
+        timeStyle: "medium",
+      },
+    },
+  },
+
+  lastUpdated: true,
+}
+
+const vitePressSidebarOptions: VitePressSidebarOptions = {
+  // VitePress Sidebar's options here...
+  collapsed: false,
+  capitalizeFirst: true,
+  useTitleFromFileHeading: true,
+  useFolderTitleFromIndexFile: true,
+
+  sortMenusByFrontmatterOrder: true,
+  sortMenusOrderByDescending: true,
+
+  sortFolderTo: "bottom"
+};
+
+// https://vitepress.dev/reference/site-config
+export default defineConfig(
+  withSidebar(vitepressOptions, vitePressSidebarOptions)
+)

.vitepress/theme/Layout.vue

@@ -0,0 +1,34 @@
+<script type="ts" setup>
+import DefaultTheme from 'vitepress/theme'
+import { useRouter } from "vitepress";
+import mediumZoom from 'medium-zoom'
+import { watch, nextTick, onMounted } from "vue";
+
+let { route } = useRouter();
+
+const initZoom = () => {
+    mediumZoom('.main img', { background: 'var(--vp-c-bg)' });
+}
+
+onMounted(() => {
+
+    initZoom();
+
+    // 监听路由变化
+    watch(() => route.path, () => {
+        nextTick(() => {
+            initZoom();
+        });
+    }
+    );
+});
+
+const { Layout } = DefaultTheme
+
+</script>
+
+<!-- .vitepress/theme/Layout.vue -->
+<template>
+    <!-- 这里的Layout不是递归组件, 而是默认主题的Layout组件, 相当于组件的入口, 若不使用此组件, 那么整个网页都没有内容 -->
+    <Layout></Layout>
+</template>

.vitepress/theme/index.ts

@@ -3,11 +3,12 @@ import { h } from 'vue'
 import type { Theme } from 'vitepress'
 import DefaultTheme from 'vitepress/theme'
 import './style.css'
+import Layout from "./Layout.vue";
 
 export default {
   extends: DefaultTheme,
   Layout: () => {
-    return h(DefaultTheme.Layout, null, {
+    return h(Layout, null, {
       // https://vitepress.dev/guide/extending-default-theme#layout-slots
     })
   },

.vitepress/theme/style.css

@@ -44,14 +44,20 @@
  * -------------------------------------------------------------------------- */
 
 :root {
+
+  --vp-c-orange-1: #f0890a;
+  --vp-c-orange-2: #e58225;
+  --vp-c-orange-3: #ffaa00;
+  --vp-c-orange-soft: rgba(234, 159, 8, 0.14);
+
   --vp-c-default-1: var(--vp-c-gray-1);
   --vp-c-default-2: var(--vp-c-gray-2);
   --vp-c-default-3: var(--vp-c-gray-3);
   --vp-c-default-soft: var(--vp-c-gray-soft);
 
-  --vp-c-brand-1: var(--vp-c-indigo-1);
-  --vp-c-brand-2: var(--vp-c-indigo-2);
-  --vp-c-brand-3: var(--vp-c-indigo-3);
+  --vp-c-brand-1: var(--vp-c-orange-1);
+  --vp-c-brand-2: var(--vp-c-orange-2);
+  --vp-c-brand-3: var(--vp-c-orange-3);
   --vp-c-brand-soft: var(--vp-c-indigo-soft);
 
   --vp-c-tip-1: var(--vp-c-brand-1);
@@ -92,17 +98,11 @@
 
 :root {
   --vp-home-hero-name-color: transparent;
-  --vp-home-hero-name-background: -webkit-linear-gradient(
-    120deg,
-    #bd34fe 30%,
-    #41d1ff
-  );
-
-  --vp-home-hero-image-background-image: linear-gradient(
-    -45deg,
-    #bd34fe 50%,
-    #47caff 50%
-  );
+  --vp-home-hero-name-background: -webkit-linear-gradient(120deg,
+      rgb(254, 150, 52) 30%,
+      #ffd000);
+
+  --vp-home-hero-image-background-image: transparent;
   --vp-home-hero-image-filter: blur(44px);
 }
 
@@ -137,3 +137,24 @@
   --docsearch-primary-color: var(--vp-c-brand-1) !important;
 }
 
+/**
+ * sidebar
+ * -------------------------------------------------------------------------- */
+
+.group:has([role="button"]) .VPSidebarItem.level-0 .items {
+  padding-left: 16px !important;
+  border-left: 1px solid var(--vp-c-divider);
+  border-radius: 2px;
+  transition: background-color 0.25s;
+}
+
+/**
+ * medium-zoom
+ * -------------------------------------------------------------------------- */
+.medium-zoom-image--opened {
+  z-index: 999;
+}
+
+.medium-zoom-image {
+  border-radius: 0.4rem;
+}

getting-started/index.md

@@ -0,0 +1 @@
+# 快速开始

getting-started/install.md

@@ -0,0 +1,3 @@
+# 安装
+
+有测试

index.md

@@ -5,22 +5,25 @@ layout: home
 hero:
   name: "Bingyan DevKit"
   text: "Unity 开发工具箱"
-  tagline: Powered by Bingyan Studio
+  tagline: 一箩筐好用的 Unity 工具！
+  image:
+    src: /logo.webp
+    alt: VitePress
   actions:
     - theme: brand
-      text: 🎉 开始使用
-      link: /markdown-examples
+      text: 开始使用
+      link: /getting-started/install
     - theme: alt
       text: 关于冰岩
       link: https://www.bingyan.net/
 
 features:
   - icon: ⚡
     title: 高效
-    details: 消除大量 Boilerplate 代码，基于团队合作经验提供协作交流工具，提高开发效率。
+    details: 消除大量 Boilerplate，基于团队合作经验提供协作交流工具，提高开发效率。
   - icon: ⚒️
     title: 丰富
-    details: 补充了一揽子 Unity 未提供的工具，增加了许多常用功能，降低开发难度。
+    details: 补充了 1mol Unity 未直接提供的工具，增加了许多常用功能，降低开发难度。
   - icon: 🪶
     title: 轻量
     details: 总体积 < 1MB，无任何依赖项，开箱即用。支持使用 git 或 Unity Package Manager 引入项目。

introduction.md

@@ -0,0 +1,17 @@
+# 导言
+
+## 这是什么？
+`Bingyan DevKit` 是**冰岩作坊游戏组**在项目开发的过程中从具体游戏逻辑中抽离出的泛用型工具。  
+
+这些工具致力于解决在 **代码逻辑实现** 与 **团队协作** 中遇到的种种问题，提供简单、便捷且高效的解决方案。
+
+## 它适合我吗？
+`Bingyan DevKit` 是在多个 **3 ~ 6人** 的团队项目中发展演化而来的，在短至 48 小时 GameJam、长至数月跨度的协作项目中都发挥过良好的作用。  
+
+如果...
+- 你希望迅速实现一些游戏逻辑
+- 你需要一些简化代码的方法（例如，获取物体位置总需要把 `transform` 再写一次）
+- 你厌倦了 Unity 的一些恼人的特性（例如，`Vector3` 与 `Vector2` 不能直接相加）
+- 你带领一个团队，需要向非程序成员提供更好的编辑器界面以提高他们的效率
+
+那么不妨试一试！