给你的vitepress添加图片预览功能

这次我们在 vitepress 中添加图片预览功能！
转载至：https://github.com/vuejs/vitepress/issues/854

安装 medium-zoom

1	npm i medium-zoom

在 vitepress 主题配置文件中配置

.vitepress/theme/index.js

// .vitepress/theme/index.js

import DefaultTheme from "vitepress/theme"
import { onMounted } from "vue"
import mediumZoom from "medium-zoom"

import "./index.css"

export default {
  ...DefaultTheme,
  setup() {
    onMounted(() => {
      mediumZoom("[data-zoomable]", { background: "var(--vp-c-bg)" })
    })
  },
}

添加 css 样式

/* .vitepress/theme/index.css */

.medium-zoom-overlay {
  z-index: 20;
}

.medium-zoom-image {
  z-index: 21;
}

在 markdown 中使用

1	![](path/to/file.jpg){data-zoomable}

如果您想在不显式添加{data-zoomable}的情况下为所有图像启用此功能，您可以将该 mediumZoom 调用更改为：

1	mediumZoom(".main img", { background: "var(--vp-c-bg)" })

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。