点击图片放大

默认的 Vitepress 网页,加载图片后,因为布局的原因,图片显得很小,很多图片里的内容看不清晰,所以想要一个可以点击图片放大的效果。

经过搜索, 我找到了一个 issues#854,看了他们的交流后,我也实现了这个功能。

记录一下过程,以备后用。

1. 安装 medium-zoom 库

pnpm

pnpm add medium-zoom

yarn

yarn add medium-zoom

npm

npm add medium-zoom

2. 引入库以及配置相关文件

// docs/.vitepress/theme/index.ts
import DefaultTheme from 'vitepress/theme'
import { onMounted, watch, nextTick } from 'vue'
import { useRoute } from 'vitepress'
import mediumZoom from 'medium-zoom'
import './global.css'

export default {
  ...DefaultTheme,
  setup() {
    const route = useRoute() 
    const initZoom = () => {
      // 不显式添加{data-zoomable}的情况下为所有图像启用此功能
      mediumZoom('.main img', { background: 'var(--vp-c-bg)' })
    }
    onMounted(() => {
      initZoom()
    })
    watch(
      () => route.path,
      () => nextTick(() => initZoom())
    )
  },
}

这时,点击图片放大的功能已经实现了,但是效果不尽如人意,会被其他层级的元素遮挡图片(例如左侧的导航栏),所以需要修改一下样式。

/* docs/.vitepress/theme/global.css */
/* 图片点击放大优先级调整 */
.medium-zoom-image {
  z-index: 9999 !important;
}

如此,就实现了在 Vitepress 中点击图片放大的效果。