docs(markdown-it-unlazy-img): add configuration of vue when using `un…

…lazy-img` (#365)
nolebase · Dec 19, 2024 · b5b1635 · b5b1635
1 parent 3d8d171
commit b5b1635
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/docs/pages/en/integrations/markdown-it-unlazy-img/index.md b/docs/pages/en/integrations/markdown-it-unlazy-img/index.md
@@ -39,7 +39,7 @@ yarn add @nolebase/markdown-it-unlazy-img -D
 
 ### Integrate with VitePress
 
-In the VitePress configuration file (usually `docs/.vitepress/config.ts`, the file path and extension may be different), import `@nolebase/markdown-it-unlazy-img` as a plugin, and use it as a `markdown-it` plugin in the `markdown` option:
+In the VitePress configuration file (usually `docs/.vitepress/config.ts`, the file path and extension may be different), import `@nolebase/markdown-it-unlazy-img` as a plugin, and use it as a `markdown-it` plugin in the `markdown` option, specify how to handle the image resource paths of the `NolebaseUnlazyImg` tag in Vue templates to ensure that VitePress can correctly resolve and transform the image resource paths during the build process:
 
 <!--@include: @/pages/en/snippets/details-colored-diff.md-->
 
@@ -48,6 +48,14 @@ import { defineConfigWithTheme } from 'vitepress'
 import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img' // [!code ++]
 
 export default defineConfigWithTheme({
+    vue: {
+    template: {
+      transformAssetUrls: {
+        // Other configurations...
+        NolebaseUnlazyImg: ['src'], // [!code ++]
+      },
+    },
+  },
   lang: 'en',
   title: 'Site name', // For reference only, please do not copy directly
   description: 'Description', // For reference only, please do not copy directly
@@ -56,7 +64,7 @@ export default defineConfigWithTheme({
   },
   markdown: {
     config: (md) => {
-      md.use(md.use(UnlazyImages(), { // [!code ++]
+      md.use(UnlazyImages(), { // [!code ++]
         imgElementTag: 'NolebaseUnlazyImg', // [!code ++]
       }) // [!code ++]
     },

diff --git a/docs/pages/zh-CN/integrations/markdown-it-unlazy-img/index.md b/docs/pages/zh-CN/integrations/markdown-it-unlazy-img/index.md
@@ -39,7 +39,7 @@ yarn add @nolebase/markdown-it-unlazy-img -D
 
 ### 为 VitePress 配置
 
-在 VitePress 的配置文件中（通常为 `docs/.vitepress/config.ts`，文件路径和拓展名也许会有区别），将 `@nolebase/markdown-it-unlazy-img` 作为一个插件导入，并将其作为 `markdown` 选项的 `markdown-it` 插件使用：
+在 VitePress 的配置文件中（通常为 `docs/.vitepress/config.ts`，文件路径和拓展名也许会有区别），将 `@nolebase/markdown-it-unlazy-img` 作为一个插件导入，并将其作为 `markdown` 选项的 `markdown-it` 插件使用，指定如何处理 Vue 模板中 `NolebaseUnlazyImg` 标签的图片资源路径，确保在构建过程中 VitePress 能够正确地解析和转换图片资源路径：
 
 <!--@include: @/pages/zh-CN/snippets/details-colored-diff.md-->
 
@@ -48,6 +48,14 @@ import { defineConfigWithTheme } from 'vitepress'
 import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img' // [!code ++]
 
 export default defineConfigWithTheme({
+  vue: {
+    template: {
+      transformAssetUrls: {
+        // 其他各种配置...
+        NolebaseUnlazyImg: ['src'], // [!code ++]
+      },
+    },
+  },
   lang: 'zh-CN',
   title: '网站名称', // 仅供参考，请不要直接复制
   description: '某些介绍', // 仅供参考，请不要直接复制
@@ -56,7 +64,7 @@ export default defineConfigWithTheme({
   },
   markdown: {
     config: (md) => {
-      md.use(md.use(UnlazyImages(), { // [!code ++]
+      md.use(UnlazyImages(), { // [!code ++]
         imgElementTag: 'NolebaseUnlazyImg', // [!code ++]
       }) // [!code ++]
     },