From 8c9e9df364d3461460943361384e33150cde967e Mon Sep 17 00:00:00 2001
From: Meow <197331664+Meo597@users.noreply.github.com>
Date: Wed, 17 Dec 2025 08:07:29 +0800
Subject: [PATCH] =?UTF-8?q?=E5=9B=BE=E7=89=87=E6=94=BE=E5=A4=A7=E9=95=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vitepress/theme/index.mts     | 24 +++++++++++++++++++++++-
 .vitepress/theme/style/var.css |  7 +++++++
 package.json                   |  1 +
 pnpm-lock.yaml                 |  8 ++++++++
 4 files changed, 39 insertions(+), 1 deletion(-)
 create mode 100644 .vitepress/theme/style/var.css

diff --git a/.vitepress/theme/index.mts b/.vitepress/theme/index.mts
index 8b089390..b94e18c1 100644
--- a/.vitepress/theme/index.mts
+++ b/.vitepress/theme/index.mts
@@ -1,4 +1,26 @@
 // Given from https://vitepress.dev/guide/extending-default-theme
 
 import DefaultTheme from "vitepress/theme";
-export default DefaultTheme;
+
+import mediumZoom from "medium-zoom";
+import { onMounted, watch, nextTick } from "vue";
+import { useRoute } from "vitepress";
+
+export default {
+  extends: DefaultTheme,
+
+  setup() {
+    const route = useRoute();
+    const initZoom = () => {
+      // mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' }); // default
+      mediumZoom(".main img", { background: "var(--vp-c-bg)" }); // Enable this feature for all images unless {data-zoomable} is explicitly added.
+    };
+    onMounted(() => {
+      initZoom();
+    });
+    watch(
+      () => route.path,
+      () => nextTick(() => initZoom())
+    );
+  },
+};
diff --git a/.vitepress/theme/style/var.css b/.vitepress/theme/style/var.css
new file mode 100644
index 00000000..d77be431
--- /dev/null
+++ b/.vitepress/theme/style/var.css
@@ -0,0 +1,7 @@
+.medium-zoom-overlay {
+    z-index: 30;
+}
+
+.medium-zoom-image {
+    z-index: 9999 !important;
+}
diff --git a/package.json b/package.json
index e773bc75..af2ddeb2 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,6 @@
 {
   "devDependencies": {
+    "medium-zoom": "^1.1.0",
     "vitepress": "2.0.0-alpha.15"
   },
   "scripts": {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index fe66d71c..e48d572e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ importers:
 
   .:
     devDependencies:
+      medium-zoom:
+        specifier: ^1.1.0
+        version: 1.1.0
       vitepress:
         specifier: 2.0.0-alpha.15
         version: 2.0.0-alpha.15(postcss@8.5.6)
@@ -552,6 +555,9 @@ packages:
   mdast-util-to-hast@13.2.1:
     resolution: {integrity: sha512-cctsq2wp5vTsLIcaymblUriiTcZd0CwWtCbLvrOzYCDZoWyMNV8sZ7krj09FSnsiJi3WVsHLM4k6Dq/yaPyCXA==}
 
+  medium-zoom@1.1.0:
+    resolution: {integrity: sha512-ewyDsp7k4InCUp3jRmwHBRFGyjBimKps/AJLjRSox+2q/2H4p/PNpQf+pwONWlJiOudkBXtbdmVbFjqyybfTmQ==}
+
   micromark-util-character@2.1.1:
     resolution: {integrity: sha512-wv8tdUTJ3thSFFFJKtpYKOYiGP2+v96Hvk4Tu8KpCAsTMs6yi+nVmGh1syvSCsaxz45J6Jbw+9DD6g97+NV67Q==}
 
@@ -1183,6 +1189,8 @@ snapshots:
       unist-util-visit: 5.0.0
       vfile: 6.0.3
 
+  medium-zoom@1.1.0: {}
+
   micromark-util-character@2.1.1:
     dependencies:
       micromark-util-symbol: 2.0.1