快速上手
安装
通过运行以下命令将 @nolebase/vitepress-plugin-git-changelog 安装到您的项目依赖项中：
ni @nolebase/vitepress-plugin-git-changelog -Dpnpm add @nolebase/vitepress-plugin-git-changelog -Dnpm install @nolebase/vitepress-plugin-git-changelog -Dyarn add @nolebase/vitepress-plugin-git-changelog -D使用
这是配置最复杂的插件之一！
请注意以下配置和步骤，以开始使用基于 Git 的页面历史插件。与其他插件相比，这并不是那么简单。
将基于 Git 的页面历史插件集成到您的 VitePress 项目中包括两个主要步骤：
- 配置 Vite 插件（数据获取、日志聚合）
- 与 VitePress 集成（UI 和组件）
配置 Vite 插件
确保已创建 vite.config.ts
如果您已经了解 vite.config.ts 是什么并且已经创建了它，您可以跳过此准备步骤，直接跳转到下一步在 vite.config.ts 中配置插件。
首次接触 vite.config.ts？
首先，vite.config.ts 是一个为 Vite 构建工具的配置文件。VitePress 是基于 Vite 构建的，它允许开发人员构建和转换项目中的资产、内容和数据。
尽管 VitePress 本身包含了整套 Vite 选项的配置在其主要配置文件中（这不是一个主题配置文件，通常位于 docs/.vitepress/config.ts，文件路径和扩展名可能会有所不同），这些选项与 vite.config.ts 在配置方面是相同的。
然而，由于插件注册的顺序，如果我们以这种方式安装基于 Git 的页面历史插件，它将无法转换所需的数据和日志。
因此，请在您的 VitePress 项目的根目录中创建一个单独的 vite.config.ts 文件：
touch vite.config.ts在 vite.config.ts 中配置插件
在位于项目根目录的独立的 Vite 配置文件（也就是 vite.config.ts 中），我们需要导入 GitChangelog（数据获取）和 GitChangelogMarkdownSection（小部件嵌入）插件并进行正确配置：
如果你未曾见过这种红色绿色的标记
这是一种用于在用户界面（UI）上展示差异对比的标记规则。
红色的部分是你需要删除的，通常也以「减号 -」来表示，或者你可以理解为：这行文本原本的模样；
绿色的部分是你需要添加的，通常也以「加号 +」来表示，或者你可以理解为：这行文本将会被修改为的模样。
如果你想要了解更多有关「差异对比」的知识，你可以查看这篇有关 diffutils 历史的英文回答和 Git 的文档
import { join } from 'node:path'
import { defineConfig } from 'vite'
import {
GitChangelog,
GitChangelogMarkdownSection,
} from '@nolebase/vitepress-plugin-git-changelog/vite'
export default defineConfig(() => {
return {
plugins: [
GitChangelog({
// 填写在此处填写您的仓库链接
repoURL: () => 'https://github.com/nolebase/integrations',
}),
GitChangelogMarkdownSection(),
]
// 其他 Vite 配置...
}
})与 VitePress 集成
现在，让我们将基于 Git 的页面历史 UI 小部件集成到您的 VitePress 项目中。
在 VitePress 的主题配置文件（请注意，这与上面提及的配置文件并非是一个文件，主题配置文件通常位于 docs/.vitepress/theme/index.ts，文件路径和扩展名可能会有所不同），安装 Vue 插件并使用组件：
If you've never seen a colored diff before
This is a markup rule for displaying diff in the user interface (UI).
Red parts usually represents the lines you are going to remove, commonly appeared with a Minus sign -, or you could simply understand it as: this line will be removed.
Green parts usually represents the lines you are going to add, commonly appeared with a Plus sign +, or you could simply understand it as: this line will be added.
To learn more about diff, you can check out this answer about the history of diffutils and Git's documentation
import { h } from 'vue'
import DefaultTheme from 'vitepress/theme'
import type { Theme as ThemeConfig } from 'vitepress'
import {
NolebaseGitChangelogPlugin
} from '@nolebase/vitepress-plugin-git-changelog/client'
import '@nolebase/vitepress-plugin-git-changelog/client/styles.css'
export const Theme: ThemeConfig = {
extends: DefaultTheme,
Layout: () => {
// 其他配置
},
enhanceApp({ app }) {
app.use(NolebaseGitChangelogPlugin)
},
}
export default Theme贡献者
Neko