English | 简体中文

Vitepress Plugin Breadcrumb

为你的 Vitepress 添加面包屑导航

🔗 GitLab (Homepage) | 🔗 GitHub

安装

npm install vitepress-plugin-breadcrumb

添加插件

在 .vitepress/theme/index.ts 文件内

import Breadcrumb from 'vitepress-plugin-breadcrumb/Breadcrumb.vue';
import DefaultTheme from 'vitepress/theme';

export default {
	extends: DefaultTheme,

	Layout() {
		return h(DefaultTheme.Layout, null, {
			'doc-before': () => h(Breadcrumb, { breadcrumb: true }),
		});
	},
} satisfies Theme;

此处使用了 Vitepress 的 doc-before 插槽将 Breadcrumb 组件嵌入到文档的顶端。

选项

全局：

interface BreadcrumbOptions {
	breadcrumb:
		| boolean
		| {
			homeLink: string;
			homeText?: string;
		};
}

您可以将布尔值传递给 breadcrumb 属性，这表示全局启用或禁用面包屑导航。例如：

() => h(Breadcrumb, { breadcrumb: true }); // 全局启用

你还可以在面包屑导航前面指定一个自定义主页节点：

() => h(Breadcrumb, { breadcrumb: { homeLink: '/en/', homeText: 'Home' } }); // 添加一个指向 '/en/' 的名为 'Home' 的节点

Frontmatter：

更多的配置描述请参考上方内容：

breadcrumb: true

breadcrumb:
  homeLink: /en/
  homeText: Home

当 Breadcrumb 全局启用时，您可以在特定页面上禁用它：

breadcrumb: false