Appearance
VitePress 引入 fancyapps 预览图片
Fancyapps
Fancyapps 是一个轻量级的 JavaScript 库,用于创建一个漂亮的图片预览器。它支持多种图片格式,包括 JPEG、PNG、GIF 和 SVG。Fancyapps 还支持图片的缩放、旋转、翻转等功能。
安装
bash
npm install fancyapps-fancybox
使用
在vitepress
中扩展默认主题,新建theme/index.js
文件
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这里还没有处理