diff --git "a/docs/notes/theme/guide/\347\237\245\350\257\206\347\254\224\350\256\260.md" "b/docs/notes/theme/guide/\347\237\245\350\257\206\347\254\224\350\256\260.md" index 2a9b88c39..6e51ae651 100644 --- "a/docs/notes/theme/guide/\347\237\245\350\257\206\347\254\224\350\256\260.md" +++ "b/docs/notes/theme/guide/\347\237\245\350\257\206\347\254\224\350\256\260.md" @@ -87,7 +87,7 @@ export default defineUserConfig({ ::: -### 编写notes配置 +## 编写notes配置 由于 `notes` 配置全部写在 `plumeTheme({ })` 中可能会导致 代码层级嵌套过深,因此更推荐使用主题提供的 `defineNotesConfig()` 和 `defineNoteConfig()` 将 notes 配置提取到外部,它们还能帮助你获得更好的类型提示, @@ -572,6 +572,43 @@ icon: ep:guide ::: +### 侧边栏组内分隔 + +在组内对 项 进行分隔 是一个相对小众的需求,它在组的项比较多,但又不适合拆分为多个组,或者组内拆分多组的情况下, +可能会比较适用,它提供了一个平级的,使用辅助文本颜色显示一个分隔项名 的方式,对项进行简单的分隔。 + +::: code-tabs +@tab .vuepress/notes.ts + +```ts +import { defineNoteConfig } from 'vuepress-theme-plume' + +const typescript = defineNoteConfig({ + dir: 'typescript', + link: '/typescript/', + sidebar: [ + { + text: '指南', + items: [ + '项目 1', + '项目 2', + '项目 3', + { text: '分隔', link: '---' }, // [!code ++] + '项目 4', + '项目 5', + // ... + ], + }, + ] +}) +``` + +::: + +在组内完成分隔非常简单,你只需要在合适的位置插入一个 `{ text: 'xxxx', link: '---' }` 即可, +它的重点仅是将 `link` 设置为 连续的 `---` 即可,至少三个 `-` 。 +你可以随意定义文本,还可以添加图标。 + ## 笔记首页 你可能注意到,在 `typescript` 目录下,有一个 `README.md` 文件,它会被作为笔记首页显示。 diff --git a/theme/src/client/components/VPSidebarItem.vue b/theme/src/client/components/VPSidebarItem.vue index e98f60ac7..eb0c59594 100644 --- a/theme/src/client/components/VPSidebarItem.vue +++ b/theme/src/client/components/VPSidebarItem.vue @@ -34,6 +34,8 @@ const textTag = computed(() => { const itemRole = computed(() => (isLink.value ? undefined : 'button')) +const isSeparator = computed(() => props.item.link?.startsWith('---')) + const classes = computed(() => [ [`level-${props.depth}`], { collapsible: collapsible.value }, @@ -73,10 +75,10 @@ function onCaretClick() { >
-