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() {
>
<div class="indicator" />
- <VPIcon v-if="item.icon" :name="item.icon" />
+ <VPIcon v-if="item.icon" :name="item.icon" :class="{ separator: isSeparator }" />
<VPLink
- v-if="item.link"
+ v-if="item.link && !isSeparator"
:tag="linkTag"
class="link"
:href="item.link"
@@ -84,7 +86,7 @@ function onCaretClick() {
<Component :is="textTag" class="text" v-html="item.text" />
</VPLink>
- <Component :is="textTag" v-else class="text" v-html="item.text" />
+ <Component :is="textTag" v-else class="text" :class="{ separator: isSeparator }" v-html="item.text" />
<div
v-if="item.collapsed != null"
@@ -176,6 +178,23 @@ function onCaretClick() {
color: var(--vp-c-text-2);
}
+.vp-sidebar-item.level-1 .text.separator,
+.vp-sidebar-item.level-2 .text.separator,
+.vp-sidebar-item.level-3 .text.separator,
+.vp-sidebar-item.level-4 .text.separator,
+.vp-sidebar-item.level-5 .text.separator {
+ color: var(--vp-c-text-3);
+}
+
+.vp-sidebar-item.level-0 :deep(.vp-icon.separator),
+.vp-sidebar-item.level-1 :deep(.vp-icon.separator),
+.vp-sidebar-item.level-2 :deep(.vp-icon.separator),
+.vp-sidebar-item.level-3 :deep(.vp-icon.separator),
+.vp-sidebar-item.level-4 :deep(.vp-icon.separator),
+.vp-sidebar-item.level-5 :deep(.vp-icon.separator) {
+ color: var(--vp-c-text-3) !important;
+}
+
.vp-sidebar-item.level-0.has-active > .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
}