VitePress 引入 fancyapps 预览图片

• Fancyapps
• 安装
• 使用

Fancyapps

Fancyapps 是一个轻量级的 JavaScript 库，用于创建一个漂亮的图片预览器。它支持多种图片格式，包括 JPEG、PNG、GIF 和 SVG。Fancyapps 还支持图片的缩放、旋转、翻转等功能。

官网: https://fancyapps.com/

安装

npm install fancyapps-fancybox

使用

在vitepress中扩展默认主题，新建theme/index.js文件

import DefaultTheme from 'vitepress/theme'
import "@fancyapps/ui/dist/fancybox/fancybox.css";
export default {
  extends: DefaultTheme,
  async enhanceApp({ app }) {
    if(!import.meta.env.SSR) {
      const { Fancybox } = await import('@fancyapps/ui/dist/fancybox/fancybox.esm.js');
      const { zh_CN } = await import('@fancyapps/ui/dist/fancybox/l10n/zh_CN.esm.js');
      Fancybox.bind(
          'a[href*=".jpg"],a[href*=".jpeg"],a[href*=".png"],a[href*=".gif"],img[src*=".jpg"],img[src*=".jpeg"],img[src*=".png"],img[src*=".gif"]',
          {
            groupAll: true,
            l10n: zh_CN
            // Your custom options
          }
      );
    }
  }
}

提示

目前是浏览器引入，SSR这里还没有处理