Alt

    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'
import { useRoute } from 'vitepress'
import mediumZoom from 'medium-zoom'
import './custom.css'

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

    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)

    效果：