Commit 46d0fa3

@@ -80,6 +80,7 @@ const favicons: Favicon[] =
 
 <script>
   import { convertTimeToRelative } from '@scripts/utils';
+  import mediumZoom from 'medium-zoom';
 
   // 深色模式切换
   function applyDarkMode() {
@@ -96,4 +97,18 @@ const favicons: Favicon[] =
 
   // 时间显示
   document.addEventListener('astro:page-load', convertTimeToRelative);
+
+  // 图片缩放
+  document.addEventListener('astro:page-load', () => {
+    mediumZoom('[data-zoom]', {
+      background: 'rgba(0, 0, 0, 0.4)',
+    });
+  });
 </script>
+
+<style is:global>
+  .medium-zoom-overlay,
+  .medium-zoom-image--opened {
+    z-index: 999;
+  }
+</style>

@@ -0,0 +1,15 @@
+import { visit } from 'unist-util-visit';
+
+/**
+ * Remark plugin to add data-zoom attribute to all images
+ */
+export function remarkImageProcess() {
+  return (tree) => {
+    visit(tree, 'image', (node) => {
+      // 添加 data-zoom 属性到图片节点
+      node.data = node.data || {};
+      node.data.hProperties = node.data.hProperties || {};
+      node.data.hProperties['data-zoom'] = '';
+    });
+  };
+}

@@ -3,6 +3,7 @@ import { CDN } from './src/constants/cdn.mjs';
 import { componentTabs } from './src/plugins/components/tabs.mjs';
 import { rehypeWrapTables } from './src/plugins/rehype-wrap-tables.mjs';
 import { remarkExcerpt } from './src/plugins/remark-excerpt';
+import { remarkImageProcess } from './src/plugins/remark-image-process.mjs';
 import { parseDirectiveNodes } from './src/plugins/remark-prase-directive.mjs';
 import { remarkReadingTime } from './src/plugins/remark-reading-time.mjs';
 import { rehypeHeadingIds } from '@astrojs/markdown-remark';
@@ -42,6 +43,7 @@ export default defineConfig({
       remarkMath,
       remarkReadingTime,
       remarkExcerpt,
+      remarkImageProcess,
       // @ts-expect-error - types are not up to date
       [
         remarkGithubBlockQuote,

@@ -29,6 +29,7 @@
     "hastscript": "^9.0.0",
     "markdown-it": "^14.1.0",
     "mdast-util-to-string": "^4.0.0",
+    "medium-zoom": "^1.1.0",
     "postcss-load-config": "^6.0.1",
     "reading-time": "^1.5.0",
     "rehype-autolink-headings": "^7.1.0",