效果图

安装 @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 { fileURLToPath, URL } from 'node:url'
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' /* 图片样式 */

也可以单独添加样式

picture.css

/**
 * 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;
}

/* 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-size: 0.875rem;
  font-weight: 400;
}

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

使用

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

效果图