自动生成侧边栏 v2.11.1
安装
通过运行以下命令将 @nolebase/vitepress-plugin-sidebar
安装到您的项目依赖项中:
ni @nolebase/vitepress-plugin-sidebar -D
pnpm add @nolebase/vitepress-plugin-sidebar -D
npm install @nolebase/vitepress-plugin-sidebar -D
yarn add @nolebase/vitepress-plugin-sidebar -D
使用
为 VitePress 配置
在 VitePress 的配置文件中(通常为 docs/.vitepress/config.ts
,文件路径和拓展名也许会有区别),将 @nolebase/vitepress-plugin-sidebar
作为一个插件导入:
如果你未曾见过这种红色绿色的标记
这是一种用于在用户界面(UI)上展示差异对比的标记规则。
红色的部分是你需要删除的,通常也以「减号 -」来表示,或者你可以理解为:这行文本原本的模样;
绿色的部分是你需要添加的,通常也以「加号 +」来表示,或者你可以理解为:这行文本将会被修改为的模样。
如果你想要了解更多有关「差异对比」的知识,你可以查看这篇有关 diffutils 历史的英文回答和 Git 的文档
import { defineConfigWithTheme } from 'vitepress'
import { calculateSidebar } from '@nolebase/vitepress-plugin-sidebar'
export default defineConfigWithTheme({
lang: 'zh-CN',
title: '网站名称', // 仅供参考,请不要直接复制
description: '某些介绍', // 仅供参考,请不要直接复制
themeConfig: {
// 其他各种配置...
sidebar: calculateSidebar([
'笔记',
{ folderName: '文章', separate: true },
]),
},
})
参数说明
calculateSidebar
calculateSidebar
函数接受一个数组作为参数,数组中的每一项可以是一个字符串或者一个对象。不同的类型会有着不同的处理逻辑。让我们以下面的几种实际应用场景来说明。
首先需要指出的是,在配置参数中填写 '笔记'
和 { folderName: '笔记', separate: false }
是完全等效的,所以,只书写字符串的配置,可以看作是 { folderName: '笔记', separate: false }
的快捷简写。因此,如果不希望变换着类型写,可以都写成对象的形式。
另外,在几乎 100% 的情况下,我们都会按照与 Obsidian 和 Nolebase 的侧边栏结构和形式去生成侧边栏,所以在绝大多数情况下,只写字符串也不会有问题。
唯一的区别就是在于这个特殊的 separate
属性。当用户配置了 separate: true
之后,我们会生成 VitePress 所兼容和支持的多侧边栏,这使得「为不同的页面配置不同的侧边栏」变成可能。
说得更直白一些,如果你希望能够在 A 页面展示仅与 A 目录下相关的侧边栏,B 页面只展示 B 目录下的侧边栏,那么你就需要 [{ folderName: 'A', separate: true }, { folderName: 'B', separate: true }]
这样的配置。
另外需要注意的是,还有一些特殊的处理规则:
首级忽略
如果参数中只填写了 ['笔记']
这样的一个字符串的时候,会自动把 笔记
目录层级忽略掉,只保留 笔记
下的文件和目录。
混合配置
如果既有 字符串配置 又有 separate: true
的配置,比如:
calculateSidebar([
'笔记',
'短文',
{ folderName: '文章', separate: true },
])
那么,首级忽略 的规则将不再生效,取而代之的是,'笔记'
和 '短文'
会被作为目录的名称出现在访问路径为 /
下的页面,而 文章
会被作为一个独立的目录出现在访问路径为 /文章/
下的页面。