Altnn
杂集（待整理）
测试
杂集（待整理）
测试

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/

1pnpm add medium-zoom

3.样式配置

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

1// .vitepress/theme/index.js
2
3//引入medium-zoom组件
4import { onMounted, watch, nextTick } from 'vue'  //[!code ++]
5import { useRoute } from 'vitepress'  //[!code ++]
6import mediumZoom from 'medium-zoom'  //[!code ++]
7import './custom.css'  //[!code ++]
8
9export default {
10    extends: DefaultTheme,
11    Layout: MyLayout,
12   //设置medium-zoom
13    setup() {  //[!code ++]
14        const route = useRoute();  //[!code ++]
15        const initZoom = () => {  //[!code ++]
16          // 不添加{data-zoomable}的情况下为所有图像启用放大功能   //[!code ++]
17            mediumZoom('.main img', { background: 'var(--vp-c-bg)' });  //[!code ++]
18        };  //[!code ++]
19        onMounted(() => {  //[!code ++]
20          initZoom();  //[!code ++]
21        });  //[!code ++]
22        watch(  //[!code ++]
23          () => route.path,  //[!code ++]
24          () => nextTick(() => initZoom())  //[!code ++]
25        );  //[!code ++]
26      },  //[!code ++]
27   
28};

3.2 custom.css配置

调整图片点击放大优先级

1/* .vitepress/theme/custom.css */
2/* 调整图片点击放大优先级 */
3:root {    //[!code ++]
4    --medium-zoom-z-index: 100;    //[!code ++]
5    --medium-zoom-c-bg: var(--vp-c-bg);    //[!code ++]
6  }    //[!code ++]
7  
8  .medium-zoom-overlay {    //[!code ++]
9    z-index: var(--medium-zoom-z-index);    //[!code ++]
10    background-color: var(--medium-zoom-c-bg) !important;    //[!code ++]
11  }    //[!code ++]
12  
13  .medium-zoom-overlay ~ img {    //[!code ++]
14    z-index: calc(var(--medium-zoom-z-index) + 1);    //[!code ++]
15  }    //[!code ++]

4.在markdown文件中使用

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

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

效果：

目录