快速上手
字数
486 字
阅读时间
3 分钟
安装
通过下面的命令将 @nolebase/markdown-it-bi-directional-links 安装到你的项目依赖中：
shell
pnpm add @nolebase/markdown-it-bi-directional-links -Dshell
npm install @nolebase/markdown-it-bi-directional-links -Dshell
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 { defineConfigWithTheme } from 'vitepress'
import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'
export default defineConfigWithTheme({
lang: 'zh-CN',
title: '网站名称', // 仅供参考，请不要直接复制
description: '某些介绍', // 仅供参考，请不要直接复制
themeConfig: {
// 其他各种配置...
},
markdown: {
config: (md) => {
md.use(BiDirectionalLinks())
},
},
})自由配置
注意
自由配置是为那些了解并清楚自己在做什么的用户准备的，如果你不清楚自己在做什么，或者在配置期间遭遇到了问题，那么请使用开箱即用的 VitePress 配置。
在 markdown-it 的实例可被访问的地方先使用 import 语句将双向链接插件导入到文件中：
typescript
import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'然后使用 markdown-it 实例的 use() 函数将导入后的 MarkdownItBiDirectionalLinks 作为插件使用，并配置一个包含有 dir 字段的对象，这个所谓的 dir 字段通常可以直接通过 import 语句导入来自 process 或者 node:process 包内的 cwd() 函数来获取：
typescript
import type { MarkdownIt } from 'markdown-it'
let markdownIt = null as MarkdownIt
// ---cut---
import { BiDirectionalLinks } from '@nolebase/markdown-it-bi-directional-links'
// 中间剩余的其他代码...
// @noErrors
markdownIt.use(BiDirectionalLinks()) 配置选项
typescript
interface BiDirectionalLinksOptions {
/**
* The directory to search for bi-directional links.
*
* @default cwd() - Current working directory
*/
dir?: string
/**
* The base directory joined as href for bi-directional links.
*
* @default '/'
*/
baseDir?: 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'
*/
includesPatterns?: string[]
/**
* Whether to include debugging logs.
*
* @default false
*/
debug?: boolean
/**
* Whether to exclude the warning when no matched file is found.
*
* @default false
*/
noNoMatchedFileWarning?: boolean
}
Neko