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',
description: 'An example app using VitePress.',
markdown: {
image: {
lazyLoading: true
}
image: { lazyLoad: true }
},
themeConfig: {
nav,

@ -123,9 +123,9 @@ describe('node/markdown/plugins/image', () => {
})
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)')
expect(html).toContain('loading="lazy"')

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

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

@ -925,14 +925,14 @@ $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a} $$
## 이미지 지연 로딩 {#image-lazy-loading}
마크다운을 통해 추가된 각 이미지에 대해 지연 로딩을 활성화하려면 구성 파일에서 `lazyLoading`을 `true`로 설정하세요:
마크다운을 통해 추가된 각 이미지에 대해 지연 로딩을 활성화하려면 구성 파일에서 `lazyLoad`을 `true`로 설정하세요:
```js
export default {
markdown: {
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}
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
export default {
markdown: {
image: {
// 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}
Вы можете включить ленивую загрузку для каждого изображения, добавленного через markdown, установив значение `true` для опции `lazyLoading` в вашем файле конфигурации:
Вы можете включить ленивую загрузку для каждого изображения, добавленного через markdown, установив значение `true` для опции `lazyLoad` в вашем файле конфигурации:
```js
export default {
markdown: {
image: {
// ленивая загрузка изображений отключена по умолчанию
lazyLoading: true
lazyLoad: true
}
}
}

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

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

Loading…
Cancel
Save