diff --git a/docs/notes/theme/guide/知识笔记.md b/docs/notes/theme/guide/知识笔记.md
index 2a9b88c3..6e51ae65 100644
--- a/docs/notes/theme/guide/知识笔记.md
+++ b/docs/notes/theme/guide/知识笔记.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 e98f60ac..eb0c5959 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 ce8fa9f0..039b22fb 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
}