feat: zoom images and modify style

.vitepress/components/ImgDesc.vue

@@ -0,0 +1,7 @@
+<template>
+  <div>
+    <p align="center" style="font-size:12px; margin-top:0;">
+      <slot></slot>
+    </p>
+  </div>
+</template>

.vitepress/components/Link.vue

@@ -0,0 +1,58 @@
+<script setup>
+const props = defineProps({
+  title: {
+    type: String,
+    default: '这里是站点title'
+  },
+  logo: {
+    type: String,
+    default: '这里是站点logo'
+  },
+  link: {
+    type: String,
+    default: 'https://lusun.com'
+  }
+})
+</script>
+
+<template>
+  <div class="main-container">
+    <a :href="props.link">
+      <slot>
+        <div class="link-style">
+          <img width="50px" :src="props.logo" alt="">
+          <div class="title">{{ props.title }}</div>
+        </div>
+      </slot>
+    </a>
+  </div>
+</template>
+
+<style scoped>
+.main-container {
+  width: 100%;
+  background-color: var(--card-bg-color);
+  text-align: center;
+  border-radius: 5px;
+  padding: 10px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.main-container:hover {
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+  transform: scale(1.01);
+  transition: transform 0.3s;
+}
+
+
+.link-style {
+  color: var(--text-color);
+  display: flex;
+  justify-content: start;
+  align-items: center;
+}
+
+.title {
+  margin-left: 10px;
+}
+</style>

.vitepress/config.mjs

@@ -28,6 +28,43 @@ export default defineConfig({
     },
   },
   themeConfig: {
+    nav: [
+      { text: "芦笋录屏", link: "https://lusun.com" },
+      { text: "关于我们", link: "https://lusun.com/about" },
+    ],
+    sidebar: [
+      {
+        text: "基础教程",
+        collapsed: false,
+        items: [
+          { text: "📥 下载安装", link: "/basic/download" },
+          { text: "📝 台词创建", link: "/basic/create" },
+          { text: "🎬 开启提词", link: "/basic/prompt" },
+          { text: "⚙️ 提词设置", link: "/basic/setting" },
+          { text: "🌟 会员特权", link: "/basic/vip" },
+          { text: "❓ 常见问题", link: "/basic/faq" },
+          { text: "🗳️ 申请发票", link: "/basic/invoice" },
+        ],
+      },
+      {
+        text: "进阶教程",
+        collapsed: false,
+        items: [
+          {
+            text: "🥳 免费领会员",
+            link: "/advanced/accessvip",
+          },
+          {
+            text: "⌨️ 提词遥控器",
+            link: "/advanced/remote",
+          },
+          {
+            text: "🫡 终身版+OBS精品课",
+            link: "/advanced/obslesson",
+          },
+        ],
+      },
+    ],
     search: {
       provider: "local",
       options: {
@@ -96,42 +133,5 @@ export default defineConfig({
     darkModeSwitchLabel: "切换主题",
     lightModeSwitchTitle: "切换到浅色模式",
     darkModeSwitchTitle: "切换到深色模式",
-    nav: [
-      { text: "芦笋录屏", link: "https://lusun.com" },
-      { text: "关于我们", link: "https://lusun.com/about" },
-    ],
-    sidebar: [
-      {
-        text: "基础教程",
-        collapsed: false,
-        items: [
-          { text: "📥 下载安装", link: "/basic/download" },
-          { text: "📝 台词创建", link: "/basic/create" },
-          { text: "🎬 开启提词", link: "/basic/prompt" },
-          { text: "⚙️ 提词设置", link: "/basic/setting" },
-          { text: "🌟 会员特权", link: "/basic/vip" },
-          { text: "❓ 常见问题", link: "/basic/faq" },
-          { text: "🗳️ 申请发票", link: "/basic/invoice" },
-        ],
-      },
-      {
-        text: "进阶教程",
-        collapsed: false,
-        items: [
-          {
-            text: "🥳 免费领会员",
-            link: "/advanced/accessvip",
-          },
-          {
-            text: "⌨️ 提词遥控器",
-            link: "/advanced/remote",
-          },
-          {
-            text: "🫡 终身版+OBS精品课",
-            link: "/advanced/obslesson",
-          },
-        ],
-      },
-    ],
   },
 });

.vitepress/theme/custom.css

@@ -13,4 +13,34 @@ section > div.items a p{
 
 .vp-doc table > tbody > tr > td{
   vertical-align: top
+}
+
+
+/* 图片点击放大优先级调整 */
+.medium-zoom-image {
+  z-index: 49 !important;
+}
+
+/* 文章图片圆角 */
+#VPContent img {
+  align-self: center;
+  border-radius: 1rem;
+}
+
+.VPSidebarItem.level-1 .items {
+  padding-left: 0;
+}
+
+#VPSidebarNav section section h3{
+  margin-left: 12px;
+}
+
+#VPSidebarNav section section div.items{
+  padding-left: 1em;
+}
+
+#VPSidebarNav > div:nth-child(5) > section > div > div > div > a > p {
+  color: #3c3c43;
+  margin-left: -12px;
+  font-weight: 700;
 }

.vitepress/theme/index.js

@@ -1,5 +1,32 @@
 // .vitepress/theme/index.js
+import ImgDesc from "../components/ImgDesc.vue";
+import Link from "../components/Link.vue";
 import DefaultTheme from "vitepress/theme";
+import { onMounted, watch, nextTick } from "vue";
+import { useRoute } from "vitepress";
+import mediumZoom from "medium-zoom";
+
 import "./custom.css";
 
-export default DefaultTheme;
+export default {
+  ...DefaultTheme,
+  extends: DefaultTheme,
+  enhanceApp({ app }) {
+    app.component("ImgDesc", ImgDesc);
+    app.component("Link", Link);
+  },
+  setup() {
+    const route = useRoute();
+    const initZoom = () => {
+      // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
+      mediumZoom(".main img", { background: "var(--vp-c-bg)" });
+    };
+    onMounted(() => {
+      initZoom();
+    });
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    );
+  },
+};

package.json

@@ -1,6 +1,7 @@
 {
   "dependencies": {
-    "vitepress": "^1.0.2"
+    "medium-zoom": "^1.1.0",
+    "vitepress": "^1.1.0"
   },
   "scripts": {
     "dev": "vitepress dev",