效果图

安装 @mdit/plugin-figure 插件

pnpm

pnpm add -D @mdit/plugin-figure

npm

npm install -D @mdit/plugin-figure

yarn

yarn add -D @mdit/plugin-figure

配置插件选项

.vitepress/config.mts

import { defineConfig } from 'vitepress'

import { figure } from '@mdit/plugin-figure'

export default defineConfig({
  markdown: { 
    config: (md) => { 
      md.use(figure, { figcaption: 'alt', copyAttrs: '^class$', lazy: true }) 
    } 
  } 
  ...
})

导入主题

所有主题

// theme/index.ts
import '@theojs/lumen/theme'

单独导入

// theme/index.ts
import '@theojs/lumen/pic'

也可以单独添加样式

/**
 * Component: picture
 * -------------------------------------------------------------------------- */

:root:not(.dark) .dark-only,
:root:is(.dark) .light-only,
:root:not(.dark) img[src$='#dark'],
:root:is(.dark) img[src$='#light'] {
  display: none;
}

:root:not(.dark) img[src$='#dark'] + figcaption,
:root:is(.dark) img[src$='#light'] + figcaption {
  display: none;
}

/* image subtitle */
figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

figure img {
  border-radius: 0.5rem;
}

figure figcaption {
  margin: 0.5rem 0;
  color: var(--vp-c-text-3);
  font-weight: 400;
  font-size: 0.875rem;
}

figure figcaption a {
  color: var(--vp-c-text-3) !important;
}

使用

![效果图](/Logo.webp)

![浅色模式{.light-only}](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU)

![深色模式{.dark-only}](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU)

![深色模式](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRCHxR2C_q8ugOMQzSmMovD3ni-z1QqTopSjg&usqp=CAU#dark)

![浅色模式](https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ-w7jYJD-PBaozaH5WdubTPnBdi-XcQ4N96w&usqp=CAU#light)

效果图

浅色模式

深色模式

深色模式

浅色模式