Vitepress添加图片放大功能

参考链接：https://github.com/vuejs/vitepress/issues/854

1. 设置vitepress自定义主题或扩展主题

自定义主题： https://vitepress.dev/guide/custom-theme
扩展主题： https://vitepress.dev/guide/extending-default-theme

设置之后会有一个theme文件夹，里面有index.js或index.ts文件，以及一个自定义的css文件。
以下以index.js文件和custom.css文件为例

2.安装medium-zoom组件

Github地址：https://github.com/francoischalifour/medium-zoom
官网：https://medium-zoom.francoischalifour.com/

pnpm add medium-zoom

3.样式配置

3.1 vitepress/theme/index.js文件修改

// .vitepress/theme/index.js

//引入medium-zoom组件
import { onMounted, watch, nextTick } from 'vue'  //[!code ++]
import { useRoute } from 'vitepress'  //[!code ++]
import mediumZoom from 'medium-zoom'  //[!code ++]
import './custom.css'  //[!code ++]

export default {
    extends: DefaultTheme,
    Layout: MyLayout,
   //设置medium-zoom
    setup() {  //[!code ++]
        const route = useRoute();  //[!code ++]
        const initZoom = () => {  //[!code ++]
          // 不添加{data-zoomable}的情况下为所有图像启用放大功能   //[!code ++]
            mediumZoom('.main img', { background: 'var(--vp-c-bg)' });  //[!code ++]
        };  //[!code ++]
        onMounted(() => {  //[!code ++]
          initZoom();  //[!code ++]
        });  //[!code ++]
        watch(  //[!code ++]
          () => route.path,  //[!code ++]
          () => nextTick(() => initZoom())  //[!code ++]
        );  //[!code ++]
      },  //[!code ++]
   
};

3.2 custom.css配置

调整图片点击放大优先级

/* .vitepress/theme/custom.css */
/* 调整图片点击放大优先级 */
:root {    //[!code ++]
    --medium-zoom-z-index: 100;    //[!code ++]
    --medium-zoom-c-bg: var(--vp-c-bg);    //[!code ++]
  }    //[!code ++]
  
  .medium-zoom-overlay {    //[!code ++]
    z-index: var(--medium-zoom-z-index);    //[!code ++]
    background-color: var(--medium-zoom-c-bg) !important;    //[!code ++]
  }    //[!code ++]
  
  .medium-zoom-overlay ~ img {    //[!code ++]
    z-index: calc(var(--medium-zoom-z-index) + 1);    //[!code ++]
  }    //[!code ++]

4.在markdown文件中使用

按md默认语法即可，不需要特殊设置

![](/img/10037-6157.jpg)

效果：