我们要实现的功能是使用 VitePress 的项目中的图片点击放大和缩小功能。

为了实现这一点，我们需要安装 medium-zoom 库，并在 VitePress 主题文件中配置它。以下是实现的步骤：

1. 首先，我们需要安装 medium-zoom 库。在我们的项目根目录下运行以下命令：

   npm i medium-zoom

2. 接着，我们需要修改 VitePress 主题入口文件 .vitepress/theme/index.js。在这个文件中，我们需要导入 medium-zoom 并在组件挂载时初始化它。同时，我们还需要监听路由变化，以便在路由变化后重新初始化 medium-zoom。

   查看代码

   // 在.vitepress/theme/index.js
   import DefaultTheme from "vitepress/theme";
   import {useRoute} from 'vitepress';
   import {onMounted, watch, nextTick} from 'vue';
   import mediumZoom from 'medium-zoom';
   
   export default {
       extends: DefaultTheme,
       setup() {
           const route = useRoute();
           const initZoom = () => {
               mediumZoom('.main img', {background: 'var(--vp-c-bg)'});
           };
           onMounted(() => {
               initZoom();
           });
           watch(
               () => route.path,
               () => nextTick(() => initZoom())
           );
       },
       // 其他配置
   }
   ;

3. 在 .vitepress/theme/index.css 文件中，我们需要添加一些样式来确保 medium-zoom 的覆盖层和图片的 z-index 正确显示。

   /* 在.vitepress/theme/index.css */
   .medium-zoom-overlay {
     z-index: 99;
   }
   
   .medium-zoom-image {
     z-index: 100;
   }