refactor(markdown)!: rename image option `lazyLoading` to `lazyLoad`

BREAKING CHANGE: The `markdown.image.lazyLoading` option has been renamed to `markdown.image.lazyLoad`.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
pull/5335/head
Divyansh Singh 2 months ago
parent 9376c58abe
commit 078786a1b3

@ -155,9 +155,7 @@ export default defineConfig({
title: 'Example', title: 'Example',
description: 'An example app using VitePress.', description: 'An example app using VitePress.',
markdown: { markdown: {
image: { image: { lazyLoad: true }
lazyLoading: true
}
}, },
themeConfig: { themeConfig: {
nav, nav,

@ -123,9 +123,9 @@ describe('node/markdown/plugins/image', () => {
}) })
describe('lazy loading', () => { describe('lazy loading', () => {
const mdLazy = createRenderer({ lazyLoading: true }) const mdLazy = createRenderer({ lazyLoad: true })
test('adds loading="lazy" when lazyLoading is enabled', async () => { test('adds loading="lazy" when lazy loading is enabled', async () => {
const html = await mdLazy.renderAsync('![logo](foo.png)') const html = await mdLazy.renderAsync('![logo](foo.png)')
expect(html).toContain('loading="lazy"') expect(html).toContain('loading="lazy"')

@ -1024,14 +1024,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## Image Lazy Loading ## Image Lazy Loading
You can enable lazy loading for each image added via markdown by setting `lazyLoading` to `true` in your config file: You can enable lazy loading for each image added via markdown by setting `lazyLoad` to `true` in your config file:
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// image lazy loading is disabled by default // image lazy loading is disabled by default
lazyLoading: true lazyLoad: true
} }
} }
} }

@ -888,14 +888,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## _Lazy Loading_ de Imagenes {#image-lazy-loading} ## _Lazy Loading_ de Imagenes {#image-lazy-loading}
Puede activar la "carga perezosa" para cada imagen adicionada via markdown definiendo `lazyLoading` como `true` en su archivo de configuración: Puede activar la "carga perezosa" para cada imagen adicionada via markdown definiendo `lazyLoad` como `true` en su archivo de configuración:
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// la carga perezosa de imagenes está desactivada por defecto // la carga perezosa de imagenes está desactivada por defecto
lazyLoading: true lazyLoad: true
} }
} }
} }

@ -880,14 +880,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## بارگذاری lazy تصویر {#image-lazy-loading} ## بارگذاری lazy تصویر {#image-lazy-loading}
می‌توانید بارگذاری تنبلی را برای هر تصویر اضافه شده از طریق Markdown با تنظیم `lazyLoading` به `true` در فایل پیکربندی فعال کنید: می‌توانید بارگذاری تنبلی را برای هر تصویر اضافه شده از طریق Markdown با تنظیم `lazyLoad` به `true` در فایل پیکربندی فعال کنید:
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// بارگذاری تنبلی تصویر به طور پیش‌فرض غیرفعال است // بارگذاری تنبلی تصویر به طور پیش‌فرض غیرفعال است
lazyLoading: true lazyLoad: true
} }
} }
} }

@ -996,14 +996,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## 画像の遅延読み込み {#image-lazy-loading} ## 画像の遅延読み込み {#image-lazy-loading}
Markdown で追加した各画像に対して遅延読み込みを有効化するには、設定ファイルで `lazyLoading` を `true` にします: Markdown で追加した各画像に対して遅延読み込みを有効化するには、設定ファイルで `lazyLoad` を `true` にします:
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// 既定では画像の遅延読み込みは無効 // 既定では画像の遅延読み込みは無効
lazyLoading: true lazyLoad: true
} }
} }
} }

@ -925,14 +925,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## 이미지 지연 로딩 {#image-lazy-loading} ## 이미지 지연 로딩 {#image-lazy-loading}
마크다운을 통해 추가된 각 이미지에 대해 지연 로딩을 활성화하려면 구성 파일에서 `lazyLoading`을 `true`로 설정하세요: 마크다운을 통해 추가된 각 이미지에 대해 지연 로딩을 활성화하려면 구성 파일에서 `lazyLoad`을 `true`로 설정하세요:
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// 이미지 지연 로딩은 기본적으로 비활성화 되어 있습니다 // 이미지 지연 로딩은 기본적으로 비활성화 되어 있습니다
lazyLoading: true lazyLoad: true
} }
} }
} }

@ -887,14 +887,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## _Lazy Loading_ de Imagens {#image-lazy-loading} ## _Lazy Loading_ de Imagens {#image-lazy-loading}
Você pode ativar o "carregamento folgado" para cada imagem adicionada via markdown definindo `lazyLoading` como `true` no seu arquivo de configuração: Você pode ativar o "carregamento folgado" para cada imagem adicionada via markdown definindo `lazyLoad` como `true` no seu arquivo de configuração:
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// o carregamento folgado de imagens está desativado por padrão // o carregamento folgado de imagens está desativado por padrão
lazyLoading: true lazyLoad: true
} }
} }
} }

@ -996,14 +996,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## Ленивая загрузка изображений {#image-lazy-loading} ## Ленивая загрузка изображений {#image-lazy-loading}
Вы можете включить ленивую загрузку для каждого изображения, добавленного через markdown, установив значение `true` для опции `lazyLoading` в вашем файле конфигурации: Вы можете включить ленивую загрузку для каждого изображения, добавленного через markdown, установив значение `true` для опции `lazyLoad` в вашем файле конфигурации:
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// ленивая загрузка изображений отключена по умолчанию // ленивая загрузка изображений отключена по умолчанию
lazyLoading: true lazyLoad: true
} }
} }
} }

@ -888,14 +888,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## 图片懒加载 {#image-lazy-loading} ## 图片懒加载 {#image-lazy-loading}
通过在配置文件中将 `lazyLoading` 设置为 `true`,可以为通过 markdown 添加的每张图片启用懒加载。 通过在配置文件中将 `lazyLoad` 设置为 `true`,可以为通过 markdown 添加的每张图片启用懒加载。
```js ```js
export default { export default {
markdown: { markdown: {
image: { image: {
// 默认禁用;设置为 true 可为所有图片启用懒加载。 // 默认禁用;设置为 true 可为所有图片启用懒加载。
lazyLoading: true lazyLoad: true
} }
} }
} }

@ -13,13 +13,13 @@ export interface Options {
* Support native lazy loading for the `<img>` tag. * Support native lazy loading for the `<img>` tag.
* @default false * @default false
*/ */
lazyLoading?: boolean lazyLoad?: boolean
} }
export const imagePlugin = ( export const imagePlugin = (
md: MarkdownItAsync, md: MarkdownItAsync,
publicDir: string, publicDir: string,
{ lazyLoading }: Options = {} { lazyLoad }: Options = {}
) => { ) => {
const imageRule = md.renderer.rules.image! const imageRule = md.renderer.rules.image!
md.renderer.rules.image = (tokens, idx, options, env: MarkdownEnv, self) => { md.renderer.rules.image = (tokens, idx, options, env: MarkdownEnv, self) => {
@ -40,7 +40,7 @@ export const imagePlugin = (
addImageDimensions(token, url, publicDir, env) addImageDimensions(token, url, publicDir, env)
} }
if (lazyLoading && !token.attrGet('loading')) { if (lazyLoad && !token.attrGet('loading')) {
token.attrSet('loading', 'lazy') token.attrSet('loading', 'lazy')
} }

Loading…
Cancel
Save