图片放大镜

.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())
+    );
+  },
+};

.vitepress/theme/style/var.css

@@ -0,0 +1,7 @@
+.medium-zoom-overlay {
+    z-index: 30;
+}
+
+.medium-zoom-image {
+    z-index: 9999 !important;
+}

package.json

@@ -1,5 +1,6 @@
 {
   "devDependencies": {
+    "medium-zoom": "^1.1.0",
     "vitepress": "2.0.0-alpha.15"
   },
   "scripts": {

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