图片查看器

灯箱，简单的图片查看器。

https://www.npmjs.com/package/vitepress-plugin-lightbox
https://github.com/BadgerHobbs/vitepress-plugin-lightbox

安装

npm

npm install -D vitepress-plugin-lightbox

yarn

yarn add -D vitepress-plugin-lightbox

pnpm

pnpm add -D vitepress-plugin-lightbox

bun

bun add -D vitepress-plugin-lightbox

配置

App Config

// .vitepress/config.mts
import { defineConfig } from 'vitepress'

import lightbox from 'vitepress-plugin-lightbox'; 

export default defineConfig({
  markdown: {
    config: (md) => {
      md.use(lightbox, {}); 
    },
  },
});

Theme Config

// .vitepress/theme/index.ts
import type { Theme } from 'vitepress';
import DefaultTheme from 'vitepress/theme';

import { onMounted } from "vue"; 
import { useRouter } from "vitepress"; 
import mediumZoom from "medium-zoom"; 

export default {
  extends: DefaultTheme,
  Layout: () => {
    return h(DefaultTheme.Layout, null, {

    });
  },
  enhanceApp({ app, router, siteData }) {

  },
  setup() { 
    const router = useRouter(); 

    const setupMediumZoom = () => { 
      mediumZoom("[data-zoomable]", { 
        background: "transparent", 
      }); 
    }; 

    onMounted(setupMediumZoom); 
    router.onAfterRouteChange = setupMediumZoom; 
  }, 
} satisfies Theme;

自定义样式

/* .vitepress/theme/style.css */
.medium-zoom-overlay {
  backdrop-filter: blur(5rem);
}

.medium-zoom-overlay,
.medium-zoom-image--opened {
  z-index: 999;
}

使用

![图片](/assets/imgae-group-02.jpg)

图片