vitepress开启图片放大功能

背景

• vitepress的图片默认是不具备放大功能。在浏览页面时有时候希望图片可以放大。

步骤

安装 medium-zoom 插件

npm install medium-zoom --save

配置medium-zoom

• 在 .vitepress\theme\index.ts中添加以下代码

import mediumZoom from 'medium-zoom'

export default {
   setup() {
    const initZoom = () => {
      // 为所有图片增加缩放功能
      mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
    }
    onMounted(() => {
      initZoom()
    })
  },
  ...
}

配置样式

• 在 .vitepress\theme下新建 global.css文件，并添加以下样式

.medium-zoom-overlay {
 background-color: var(--vp-c-bg) !important;
 z-index: 100;
}

.medium-zoom-overlay ~ img {
 z-index: 101;
}

.medium-zoom--opened .medium-zoom-overlay {
 opacity: 0.9 !important;
}

• 在.vitepress\theme\index.ts 文件中引入global.css文件

import './global.css'