懒加载模糊预览图 v2.11.1
字数
476 字
阅读时间
3 分钟
一个将图像标签包装并转换为使用 blurhash 和 thumbhash 这类模糊图片哈希算法以支持 unlazy 图像懒加载的 markdown-it 插件。
安装
通过运行以下命令将 @nolebase/markdown-it-unlazy-img 安装到您的项目依赖项中：
shell
ni @nolebase/markdown-it-unlazy-img -Dshell
pnpm add @nolebase/markdown-it-unlazy-img -Dshell
npm install @nolebase/markdown-it-unlazy-img -Dshell
yarn add @nolebase/markdown-it-unlazy-img -D配置
为 VitePress 配置
在 VitePress 的配置文件中（通常为 docs/.vitepress/config.ts，文件路径和拓展名也许会有区别），将 @nolebase/markdown-it-unlazy-img 作为一个插件导入，并将其作为 markdown 选项的 markdown-it 插件使用，指定如何处理 Vue 模板中 NolebaseUnlazyImg 标签的图片资源路径，确保在构建过程中 VitePress 能够正确地解析和转换图片资源路径：
如果你未曾见过这种红色绿色的标记
这是一种用于在用户界面（UI）上展示差异对比的标记规则。
红色的部分是你需要删除的，通常也以「减号 -」来表示，或者你可以理解为：这行文本原本的模样；
绿色的部分是你需要添加的，通常也以「加号 +」来表示，或者你可以理解为：这行文本将会被修改为的模样。
如果你想要了解更多有关「差异对比」的知识，你可以查看这篇有关 diffutils 历史的英文回答和 Git 的文档
typescript
import { defineConfigWithTheme } from 'vitepress'
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
export default defineConfigWithTheme({
vue: {
template: {
transformAssetUrls: {
// 其他各种配置...
NolebaseUnlazyImg: ['src'],
},
},
},
lang: 'zh-CN',
title: '网站名称', // 仅供参考，请不要直接复制
description: '某些介绍', // 仅供参考，请不要直接复制
themeConfig: {
// 其他各种配置...
},
markdown: {
config: (md) => {
md.use(UnlazyImages(), {
imgElementTag: 'NolebaseUnlazyImg',
})
},
},
})自由配置
注意
自由配置是为那些了解并清楚自己在做什么的用户准备的，如果你不清楚自己在做什么，或者在配置期间遭遇到了问题，那么请使用开箱即用的 VitePress 配置。
在 markdown-it 的实例可被访问的地方先使用 import 语句将本插件导入到文件中：
typescript
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'然后使用 markdown-it 实例的 use() 函数将导入后的 UnlazyImages 作为插件使用，：
typescript
import type { MarkdownIt } from 'markdown-it'
let markdownIt = null as MarkdownIt
// ---cut---
import { UnlazyImages } from '@nolebase/markdown-it-unlazy-img'
// 中间剩余的其他代码...
// @noErrors
markdownIt.use(UnlazyImages(), {
imgElementTag: 'NolebaseUnlazyImg',
}) 贡献者
Neko
Alaye Dong