feat(theme): add separator support for sidebar items, close #426 (#437)

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` 文件，它会被作为笔记首页显示。

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);
 }
 

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
       }