Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Merged
merged 1 commit into from
Jan 21, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 38 additions & 1 deletion docs/notes/theme/guide/知识笔记.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export default defineUserConfig({

:::

### 编写notes配置
## 编写notes配置

由于 `notes` 配置全部写在 `plumeTheme({ })` 中可能会导致 代码层级嵌套过深，因此更推荐使用主题提供的
`defineNotesConfig()` 和 `defineNoteConfig()` 将 notes 配置提取到外部，它们还能帮助你获得更好的类型提示，
Expand Down Expand Up @@ -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` 文件，它会被作为笔记首页显示。
Expand Down
37 changes: 28 additions & 9 deletions theme/src/client/components/VPSidebarItem.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 },
Expand Down Expand Up @@ -73,18 +75,18 @@ 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"
>
<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"
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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);
}

Expand Down
2 changes: 1 addition & 1 deletion theme/src/client/composables/sidebar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
Expand Down
Loading