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() { >
- + - +
.item > .text, .vp-sidebar-item.level-1.has-active > .item > .text, .vp-sidebar-item.level-2.has-active > .item > .text, @@ -206,12 +225,12 @@ function onCaretClick() { .vp-sidebar-item.level-3.is-link > .item > .link:hover .text, .vp-sidebar-item.level-4.is-link > .item > .link:hover .text, .vp-sidebar-item.level-5.is-link > .item > .link:hover .text, -.vp-sidebar-item.level-0.is-link > .item > .link:hover :deep(.icon), -.vp-sidebar-item.level-1.is-link > .item > .link:hover :deep(.icon), -.vp-sidebar-item.level-2.is-link > .item > .link:hover :deep(.icon), -.vp-sidebar-item.level-3.is-link > .item > .link:hover :deep(.icon), -.vp-sidebar-item.level-4.is-link > .item > .link:hover :deep(.icon), -.vp-sidebar-item.level-5.is-link > .item > .link:hover :deep(.icon) { +.vp-sidebar-item.level-0.is-link > .item > .link:hover :deep(.vp-icon), +.vp-sidebar-item.level-1.is-link > .item > .link:hover :deep(.vp-icon), +.vp-sidebar-item.level-2.is-link > .item > .link:hover :deep(.vp-icon), +.vp-sidebar-item.level-3.is-link > .item > .link:hover :deep(.vp-icon), +.vp-sidebar-item.level-4.is-link > .item > .link:hover :deep(.vp-icon), +.vp-sidebar-item.level-5.is-link > .item > .link:hover :deep(.vp-icon) { color: var(--vp-c-brand-1); } diff --git a/theme/src/client/composables/sidebar.ts b/theme/src/client/composables/sidebar.ts index ce8fa9f0a..039b22fb8 100644 --- a/theme/src/client/composables/sidebar.ts +++ b/theme/src/client/composables/sidebar.ts @@ -146,7 +146,7 @@ function resolveSidebarItems( const { link, items, prefix, dir, ...args } = item const navLink = { ...args } as ResolvedSidebarItem if (link) { - navLink.link = normalizeLink(_prefix, link) + navLink.link = link.startsWith('---') ? link : normalizeLink(_prefix, link) const nav = resolveNavLink(navLink.link) navLink.icon = nav.icon || navLink.icon }