快速上手
安装
通过运行以下命令将 @nolebase/vitepress-plugin-inline-link-preview 安装到您的项目依赖项中：
ni @nolebase/vitepress-plugin-inline-link-preview -Dpnpm add @nolebase/vitepress-plugin-inline-link-preview -Dnpm install @nolebase/vitepress-plugin-inline-link-preview -Dyarn add @nolebase/vitepress-plugin-inline-link-preview -D用法
将行内链接预览插件集成到 VitePress 项目中包括两个主要步骤：
- 配置
markdown-it插件（语法转换与数据处理相关配置） - 添加 VitePress 主题相关的配置（UI 显示相关配置）
配置 markdown-it 插件
首先，请在你的 VitePress 核心配置文件 中（注意不是主题配置文件，通常为 docs/.vitepress/config.ts，文件路径和拓展名也许会有区别）的根字段中，注册所需的 markdown-it 插件：
如果你未曾见过这种红色绿色的标记
这是一种用于在用户界面（UI）上展示差异对比的标记规则。
红色的部分是你需要删除的，通常也以「减号 -」来表示，或者你可以理解为：这行文本原本的模样；
绿色的部分是你需要添加的，通常也以「加号 +」来表示，或者你可以理解为：这行文本将会被修改为的模样。
如果你想要了解更多有关「差异对比」的知识，你可以查看这篇有关 diffutils 历史的英文回答和 Git 的文档
import { defineConfig } from 'vitepress'
import {
InlineLinkPreviewElementTransform
} from '@nolebase/vitepress-plugin-inline-link-preview/markdown-it'
// https://vitepress.dev/reference/site-config
export default defineConfig({
lang: 'en',
title: 'Site Name',
themeConfig: {
// 剩余的选项...
},
markdown: {
config(md) {
// 其他 markdown-it 配置...
md.use(InlineLinkPreviewElementTransform)
}
}
// 剩余的选项...
})在幕后，InlineLinkPreviewElementTransform 是一个 markdown-it 插件，可直接将 []() 链接语法与 <a> 元素转换为 <VPNolebaseInlineLinkPreview> 元素（也就是行内链接预览组件）。
默认情况下，该 markdown-it 插件将转换所有符合以下条件的 []() 链接语法或 <a> 元素：
- 不包含
header-anchor类。 - 不包含
no-inline-link-preview类。 - 具有
data-inline-link-preview="false"属性。
因此，对于那些你不想转换成 <VPNolebaseInlineLinkPreview> 的 []() 链接标记和 <a> 元素，你可以：
- 在类列表中添加
no-inline-link-preview。 - 为标签添加一个
data-inline-link-preview属性，并设置值为false。
添加 VitePress 主题相关的配置
在 VitePress 的主题配置文件中（注意不是配置文件，通常为 docs/.vitepress/theme/index.ts，文件路径和拓展名也许会有区别），将行内链接预览插件的组件注册到 VitePress 主题中：
如果你未曾见过这种红色绿色的标记
这是一种用于在用户界面（UI）上展示差异对比的标记规则。
红色的部分是你需要删除的，通常也以「减号 -」来表示，或者你可以理解为：这行文本原本的模样；
绿色的部分是你需要添加的，通常也以「加号 +」来表示，或者你可以理解为：这行文本将会被修改为的模样。
如果你想要了解更多有关「差异对比」的知识，你可以查看这篇有关 diffutils 历史的英文回答和 Git 的文档
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import type { Theme as ThemeConfig } from 'vitepress'
import {
NolebaseInlineLinkPreviewPlugin,
} from '@nolebase/vitepress-plugin-inline-link-preview/client'
import '@nolebase/vitepress-plugin-inline-link-preview/client/styles.css'
export const Theme: ThemeConfig = {
extends: DefaultTheme,
Layout: () => {
// 其他配置...
},
enhanceApp({ app }) {
app.use(NolebaseInlineLinkPreviewPlugin)
},
}
export default Theme贡献者
Neko