Изображение
Улучшите синтаксис изображения в Markdown для поддержки цветовой схемы и размера.
Конфиг
// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";
export default defineUserConfig({
theme: hopeTheme({
plugins: {
mdEnhance: {
// Enable figure
figure: true,
// Enable image lazyload
imgLazyload: true,
// Enable image mark
imgMark: true,
// Enable image size
imgSize: true,
},
},
}),
});
// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";
export default {
theme: hopeTheme({
plugins: {
mdEnhance: {
// Enable figure
figure: true,
// Enable image lazyload
imgLazyload: true,
// Enable image mark
imgMark: true,
// Enable image size
imgSize: true,
},
},
}),
};
Отложенная загрузка изображений
Если вы хотите отложено загружать изображения на своих страницах, вы можете установить imgLazyload: true
в настройках плагина.
Заметка
Мы включаем отложенную загрузку с использованием встроенных функций HTML5, поэтому ваш браузер должен поддерживать атрибут loading=lazy attribute.
Маркировка изображения
GFM поддерживает маркировку изображений суффиксом идентификатора, чтобы изображения отображались только в определенном режиме. Мы поддерживаем как разметку GitHub, так и простую разметку #light
и #dark
.
Вы можете включить его, установив plugins.mdEnhance.imgMark: true
в опциях темы.




Кейс
Приведенная выше демонстрация отобразит следующий результат
(Попробуйте переключить режим темы)Расширенный
Вы можете передать объект в imgMark
для настройки идентификационных меток. Доступны следующие варианты:
interface ImageMarkOptions {
/** lightmode only IDs */
light?: string[];
/** darkmode only IDs */
dark?: string[];
}
Размер изображения
Вы можете использовать =widthxheight
, чтобы указать размер изображения при установке plugins.mdEnhance.imgSize: true
в параметрах темы.



Приведенная выше разметка будет проанализирована как:
<img src="/example.png" width="200" height="300" />
<img src="/example.jpg" title="Image title" width="200" />
<img src="/example.bmp" height="300" />
Figure
Иногда вы можете захотеть добавить описание с изображением и поместить его между содержимым, в этом случае вы должны установить figure: true
в настройках плагина.
Если изображение находится отдельно в строке, заключено или не заключено в ссылку, оно будет отображаться как <figure>
, а заголовок (или альтернативный вариант) будет отображаться как <figcaption>
.

[](https://theme-hope.vuejs.press/)

[](https://theme-hope.vuejs.press/)

Будет отображаться как: