快速上手
安装
通过下面的命令将 @nolebase/markdown-it-bi-directional-links
安装到你的项目依赖中:
shell
pnpm add @nolebase/markdown-it-bi-directional-links -D
shell
npm install @nolebase/markdown-it-bi-directional-links -D
shell
yarn add @nolebase/markdown-it-bi-directional-links -D
配置
为 VitePress 配置
在 VitePress 的配置文件中(通常为 docs/.vitepress/config.ts
,文件路径和拓展名也许会有区别),将 @nolebase/markdown-it-bi-directional-links
作为一个插件导入,并将其作为 markdown
选项的 markdown-it
插件使用:
如果你未曾见过这种红色绿色的标记
这是一种用于在用户界面(UI)上展示差异对比的标记规则。
红色的部分是你需要删除的,通常也以「减号 -」来表示,或者你可以理解为:这行文本原本的模样;
绿色的部分是你需要添加的,通常也以「加号 +」来表示,或者你可以理解为:这行文本将会被修改为的模样。
如果你想要了解更多有关「差异对比」的知识,你可以查看这篇有关 diffutils 历史的英文回答和 Git 的文档
typescript
import { } from 'vitepress'
import { } from '@nolebase/markdown-it-bi-directional-links'
export default ({
: 'zh-CN',
: '网站名称', // 仅供参考,请不要直接复制
: '某些介绍', // 仅供参考,请不要直接复制
: {
// 其他各种配置...
},
: {
: () => {
.(())
},
},
})
自由配置
注意
自由配置是为那些了解并清楚自己在做什么的用户准备的,如果你不清楚自己在做什么,或者在配置期间遭遇到了问题,那么请使用开箱即用的 VitePress 配置。
在 markdown-it
的实例可被访问的地方先使用 import
语句将双向链接插件导入到文件中:
typescript
import { } from '@nolebase/markdown-it-bi-directional-links'
然后使用 markdown-it
实例的 use()
函数将导入后的 MarkdownItBiDirectionalLinks
作为插件使用,并配置一个包含有 dir
字段的对象,这个所谓的 dir
字段通常可以直接通过 import
语句导入来自 process
或者 node:process
包内的 cwd()
函数来获取:
typescript
import { } from '@nolebase/markdown-it-bi-directional-links'
// 中间剩余的其他代码...
.use(())
配置选项
typescript
interface BiDirectionalLinksOptions {
/**
* The directory to search for bi-directional links.
*
* @default cwd() - Current working directory
*/
?: string
/**
* The base directory joined as href for bi-directional links.
*
* @default '/'
*/
?: string
/**
* The glob patterns to search for bi-directional linked files.
*
* @default '*.md, *.png, *.jpg, *.jpeg, *.gif, *.svg, *.webp, *.ico, *.bmp, *.tiff, *.apng, *.avif, *.jfif, *.pjpeg, *.pjp, *.png, *.svg, *.webp, *.xbm'
*/
?: string[]
/**
* Whether to include debugging logs.
*
* @default false
*/
?: boolean
/**
* Whether to exclude the warning when no matched file is found.
*
* @default false
*/
?: boolean
}