From 1b213d4c28a7416e9be48af061f43142533bf387 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Thu, 2 Apr 2026 20:48:10 +0800 Subject: [PATCH 01/22] fix(theme): add bulletin to outline ignores (#879) --- theme/src/client/composables/outline.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/theme/src/client/composables/outline.ts b/theme/src/client/composables/outline.ts index 843820dc..e7db6a9c 100644 --- a/theme/src/client/composables/outline.ts +++ b/theme/src/client/composables/outline.ts @@ -104,6 +104,8 @@ export function useHeaders(): Ref { return headers } +const IGNORE_WRAPPERS = ['.vp-bulletin', '.vp-demo-wrapper'] + /** * Get headers from the page content * Extracts and filters headings based on the outline configuration @@ -117,7 +119,7 @@ export function useHeaders(): Ref { export function getHeaders(range?: ThemeOutline): MenuItem[] { const heading = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'] const ignores = Array.from(document.querySelectorAll( - heading.map(h => `.vp-demo-wrapper ${h}`).join(','), + heading.map(h => IGNORE_WRAPPERS.map(w => `${w} ${h}`)).flat().join(','), )) const headers = Array.from( document.querySelectorAll(heading.map(h => `.vp-doc ${h}`).join(',')), From a01bc13c66266651efe9ee3e9b30ab922c5466cc Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Thu, 2 Apr 2026 20:48:34 +0800 Subject: [PATCH 02/22] fix(plugin-md-power): fix tsdown icon (#878) --- .../plugin-md-power/src/node/fileIcons/definitions.ts | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/plugins/plugin-md-power/src/node/fileIcons/definitions.ts b/plugins/plugin-md-power/src/node/fileIcons/definitions.ts index e0158a32..073d4e84 100644 --- a/plugins/plugin-md-power/src/node/fileIcons/definitions.ts +++ b/plugins/plugin-md-power/src/node/fileIcons/definitions.ts @@ -559,11 +559,11 @@ export const definitions: Definitions = { 'rolldown.config.prod.cjs': 'vscode-icons:file-type-light-rolldown', 'rolldown.config.prod.mjs': 'vscode-icons:file-type-light-rolldown', 'rolldown.config.prod.ts': 'vscode-icons:file-type-light-rolldown', - 'tsdown.config.js': 'vscode-icons:file-type-light-tsdown', - 'tsdown.config.cjs': 'vscode-icons:file-type-light-tsdown', - 'tsdown.config.mjs': 'vscode-icons:file-type-light-tsdown', - 'tsdown.config.ts': 'vscode-icons:file-type-light-tsdown', - 'tsdown.config.json': 'vscode-icons:file-type-light-tsdown', + 'tsdown.config.js': 'vscode-icons:file-type-tsdown', + 'tsdown.config.cjs': 'vscode-icons:file-type-tsdown', + 'tsdown.config.mjs': 'vscode-icons:file-type-tsdown', + 'tsdown.config.ts': 'vscode-icons:file-type-tsdown', + 'tsdown.config.json': 'vscode-icons:file-type-tsdown', '.oxlintignore': 'vscode-icons:file-type-oxc', '.oxlintrc.json': 'vscode-icons:file-type-oxc', From 39a76a35d7bf1f48c818315343a42040aeefe36b Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Thu, 2 Apr 2026 20:48:55 +0800 Subject: [PATCH 03/22] feat(plugin-md-power)!: use `#` as the comment delimiter (#870) --- docs/en/guide/markdown/file-tree.md | 9 ++++-- docs/en/guide/quick-start/collection.md | 4 +-- .../en/guide/quick-start/project-structure.md | 28 +++++++++---------- docs/en/guide/quick-start/sidebar.md | 2 +- docs/en/guide/quick-start/write.md | 4 +-- docs/guide/markdown/file-tree.md | 16 +++++++++-- docs/guide/quick-start/collection.md | 4 +-- docs/guide/quick-start/project-structure.md | 28 +++++++++---------- docs/guide/quick-start/sidebar.md | 2 +- docs/guide/quick-start/write.md | 4 +-- .../__test__/fileTreePlugin.spec.ts | 2 +- .../src/node/container/fileTree.ts | 6 ++-- 12 files changed, 61 insertions(+), 48 deletions(-) diff --git a/docs/en/guide/markdown/file-tree.md b/docs/en/guide/markdown/file-tree.md index d105a166..a29b5e1b 100644 --- a/docs/en/guide/markdown/file-tree.md +++ b/docs/en/guide/markdown/file-tree.md @@ -3,6 +3,9 @@ title: File Tree createTime: 2025/10/08 14:41:57 icon: mdi:file-tree permalink: /en/guide/markdown/file-tree/ +badge: + text: Change + type: warning --- ## Overview @@ -18,7 +21,7 @@ displayed, simply add a slash `/` at the end of the list item. The following syntax can be used to customize the appearance of the file tree: - Emphasize file or directory names by making them bold, e.g., `**README.md**` -- Add comments to files or directories by adding additional text after the name +- Add comments to files or directories by appending a comment starting with `#` after the name, for example, `README.md This is a README file` - Mark files or directories as **added** or **deleted** by prefixing the name with `++` or `--` - Use `...` or `…` as the name to add placeholder files and directories. - Add `icon="simple"` or `icon="colored"` after `:::file-tree` to switch to simple icons or colored icons. The default is colored icons. @@ -34,7 +37,7 @@ The following syntax can be used to customize the appearance of the file tree: - ++ config.ts - -- page1.md - README.md -- theme A **theme** directory +- theme # A **theme** directory - client - components - **Navbar.vue** @@ -61,7 +64,7 @@ The following syntax can be used to customize the appearance of the file tree: - ++ config.ts - -- page1.md - README.md -- theme A **theme** directory +- theme # A **theme** directory - client - components - **Navbar.vue** diff --git a/docs/en/guide/quick-start/collection.md b/docs/en/guide/quick-start/collection.md index b0c0b441..2f9571b1 100644 --- a/docs/en/guide/quick-start/collection.md +++ b/docs/en/guide/quick-start/collection.md @@ -28,10 +28,10 @@ A typical VuePress static site has the following file structure: :::file-tree - my-site - - docs \# Source directory + - docs # Source directory - .vuepress/ - … - - README.md \# Homepage + - README.md # Homepage - package.json ::: diff --git a/docs/en/guide/quick-start/project-structure.md b/docs/en/guide/quick-start/project-structure.md index 36a1622c..eafd5051 100644 --- a/docs/en/guide/quick-start/project-structure.md +++ b/docs/en/guide/quick-start/project-structure.md @@ -13,22 +13,22 @@ For projects created via the [command-line tool](./usage.md#command-line-install ::: file-tree - .git/ -- **docs** \# Documentation source directory - - .vuepress \# VuePress configuration directory - - public/ \# Static assets - - client.ts \# Client configuration (optional) - - collections.ts \# Collections configuration (optional) - - config.ts \# VuePress main configuration - - navbar.ts \# Navbar configuration (optional) - - plume.config.ts \# Theme configuration file (optional) - - demo \# `doc` type collection +- **docs** # Documentation source directory + - .vuepress/ # VuePress configuration directory + - public/ # Static assets + - client.ts # Client configuration (optional) + - collections.ts # Collections configuration (optional) + - config.ts # VuePress main configuration + - navbar.ts # Navbar configuration (optional) + - plume.config.ts # Theme configuration file (optional) + - demo # `doc` type collection - foo.md - bar.md - - blog \# `post` type collection - - preview \# Blog category - - markdown.md \# Category article - - article.md \# Blog article - - README.md \# Site homepage + - blog # `post` type collection + - preview # Blog category + - markdown.md # Category article + - article.md # Blog article + - README.md # Site homepage - … - package.json - pnpm-lock.yaml diff --git a/docs/en/guide/quick-start/sidebar.md b/docs/en/guide/quick-start/sidebar.md index 0250214a..289591b7 100644 --- a/docs/en/guide/quick-start/sidebar.md +++ b/docs/en/guide/quick-start/sidebar.md @@ -33,7 +33,7 @@ A typical project structure might look like: - rust # Rust Programming Notes - tuple.md - struct.md - - README.md # Site Homepage + - README.md # Site Homepage ::: ### Configuration via `sidebar` diff --git a/docs/en/guide/quick-start/write.md b/docs/en/guide/quick-start/write.md index 21e9f52f..f0a3cdcb 100644 --- a/docs/en/guide/quick-start/write.md +++ b/docs/en/guide/quick-start/write.md @@ -139,14 +139,14 @@ The numeric part serves as the **sorting basis**. Directories without numbers ar ::: file-tree - docs - - blog \# post type collection + - blog # post type collection - 1.Frontend - 1.html/ - 2.css/ - 3.javascript/ - 2.Backend/ - DevOps/ - - typescript \# doc type collection + - typescript # doc type collection - 1.Basics - 1.Variables.md - 2.Types.md diff --git a/docs/guide/markdown/file-tree.md b/docs/guide/markdown/file-tree.md index f0aa4407..aa0cf8e2 100644 --- a/docs/guide/markdown/file-tree.md +++ b/docs/guide/markdown/file-tree.md @@ -3,6 +3,9 @@ title: 文件树 createTime: 2024/09/30 14:41:57 icon: mdi:file-tree permalink: /guide/markdown/file-tree/ +badge: + text: 变更 + type: warning --- ## 概述 @@ -17,12 +20,19 @@ permalink: /guide/markdown/file-tree/ 以下语法可用于自定义文件树的外观： - 通过加粗文件名或目录名来突出显示，例如 `**README.md**` -- 通过在名称后添加更多文本来为文件或目录添加注释 +- 通过在名称后添加以 `#` 开头的注释来为文件或目录添加注释，例如 `README.md # 这是一个 README 文件` - 通过在名称前添加 `++` 或 `--` 来标记文件或目录为 **新增** 或 **删除** - 使用 `...` 或 `…` 作为名称来添加占位符文件和目录。 - 在 `:::file-tree` 后添加 `icon="simple"` 或 添加 `icon="colored"` 可以切换为简单图标或彩色图标，默认为彩色图标。 - 在 `:::file-tree` 后添加 `title="xxxx"` 可以为文件树添加标题。 +::: important `rc.193` 主题更新说明 +过去 `file-tree` 使用 **空格** 来区分文件名和注释，这在某些情况下会导致问题，例如文件名中包含空格时。 +为了解决这个问题，我们引入了 **# 号注释** 语法，您可以在文件名后添加以 `#` 开头的注释，例如 `README.md # 这是一个 README 文件`。 + +**此修改为 ==破坏性更新=={.danger} 更新。** +::: + **输入：** ```md /++/ /--/ @@ -33,7 +43,7 @@ permalink: /guide/markdown/file-tree/ - ++ config.ts - -- page1.md - README.md -- theme 一个 **主题** 目录 +- theme # 一个 **主题** 目录 - client - components - **Navbar.vue** @@ -60,7 +70,7 @@ permalink: /guide/markdown/file-tree/ - ++ config.ts - -- page1.md - README.md -- theme 一个 **主题** 目录 +- theme # 一个 **主题** 目录 - client - components - **Navbar.vue** diff --git a/docs/guide/quick-start/collection.md b/docs/guide/quick-start/collection.md index 11b58270..0bfeb895 100644 --- a/docs/guide/quick-start/collection.md +++ b/docs/guide/quick-start/collection.md @@ -27,10 +27,10 @@ permalink: /guide/collection/ :::file-tree - my-site - - docs \# 源目录 + - docs # 源目录 - .vuepress/ - … - - README.md \# 首页 + - README.md # 首页 - package.json ::: diff --git a/docs/guide/quick-start/project-structure.md b/docs/guide/quick-start/project-structure.md index 4fc3a74c..f749abdb 100644 --- a/docs/guide/quick-start/project-structure.md +++ b/docs/guide/quick-start/project-structure.md @@ -12,22 +12,22 @@ permalink: /guide/project-structure/ ::: file-tree - .git/ -- **docs** \# 文档源目录 - - .vuepress \# VuePress 配置目录 - - public/ \# 静态资源 - - client.ts \# 客户端配置（可选） - - collections.ts \# Collections 配置（可选） - - config.ts \# VuePress 主配置 - - navbar.ts \# 导航栏配置（可选） - - plume.config.ts \# 主题配置文件（可选） - - demo \# `doc` 类型 collection +- **docs** # 文档源目录 + - .vuepress/ # VuePress 配置目录 + - public/ # 静态资源 + - client.ts # 客户端配置（可选） + - collections.ts # Collections 配置（可选） + - config.ts # VuePress 主配置 + - navbar.ts # 导航栏配置（可选） + - plume.config.ts # 主题配置文件（可选） + - demo # `doc` 类型 collection - foo.md - bar.md - - blog \# `post` 类型 collection - - preview \# 博客分类 - - markdown.md \# 分类文章 - - article.md \# 博客文章 - - README.md \# 站点首页 + - blog # `post` 类型 collection + - preview # 博客分类 + - markdown.md # 分类文章 + - article.md # 博客文章 + - README.md # 站点首页 - … - package.json - pnpm-lock.yaml diff --git a/docs/guide/quick-start/sidebar.md b/docs/guide/quick-start/sidebar.md index 9c3c686f..61218ea6 100644 --- a/docs/guide/quick-start/sidebar.md +++ b/docs/guide/quick-start/sidebar.md @@ -33,7 +33,7 @@ tags: - rust # Rust 编程笔记 - tuple.md - struct.md - - README.md # 站点首页 + - README.md # 站点首页 ::: ### 通过`sidebar` 配置 diff --git a/docs/guide/quick-start/write.md b/docs/guide/quick-start/write.md index b495407f..73277799 100644 --- a/docs/guide/quick-start/write.md +++ b/docs/guide/quick-start/write.md @@ -130,14 +130,14 @@ const dir = /\d+\.[\s\S]+/ ::: file-tree - docs - - blog \# post 类型 collection + - blog # post 类型 collection - 1.前端 - 1.html/ - 2.css/ - 3.javascript/ - 2.后端/ - 运维/ - - typescript \# doc 类型 collection + - typescript # doc 类型 collection - 1.基础 - 1.变量.md - 2.类型.md diff --git a/plugins/plugin-md-power/__test__/fileTreePlugin.spec.ts b/plugins/plugin-md-power/__test__/fileTreePlugin.spec.ts index 54325d46..d0abd3ce 100644 --- a/plugins/plugin-md-power/__test__/fileTreePlugin.spec.ts +++ b/plugins/plugin-md-power/__test__/fileTreePlugin.spec.ts @@ -72,7 +72,7 @@ describe('fileTreePlugin', () => { - client - components - **Navbar.vue** - - index.ts \# comment + - index.ts # comment - node - index.ts - .gitignore diff --git a/plugins/plugin-md-power/src/node/container/fileTree.ts b/plugins/plugin-md-power/src/node/container/fileTree.ts index 01ec93fa..660dbe4c 100644 --- a/plugins/plugin-md-power/src/node/container/fileTree.ts +++ b/plugins/plugin-md-power/src/node/container/fileTree.ts @@ -119,9 +119,9 @@ export function parseFileTreeNodeInfo(info: string): FileTreeNodeProps { // Extract filename and comment if (filename === '' && !focus) { - const spaceIndex = info.indexOf(' ') - filename = info.slice(0, spaceIndex === -1 ? info.length : spaceIndex) - info = spaceIndex === -1 ? '' : info.slice(spaceIndex) + const sharpIndex = info.indexOf('#') + filename = info.slice(0, sharpIndex === -1 ? info.length : sharpIndex).trim() + info = sharpIndex === -1 ? '' : info.slice(sharpIndex) } comment = info.trim() From fe0d4bbc926eb6f5113707c0bc1535a957ee2304 Mon Sep 17 00:00:00 2001 From: pengzhanbo Date: Thu, 2 Apr 2026 20:49:20 +0800 Subject: [PATCH 04/22] feat: improve accessibility features (#869) --- theme/src/client/components/VPButton.vue | 13 +++++-- theme/src/client/components/VPEncryptForm.vue | 2 + theme/src/client/components/VPFlyout.vue | 4 ++ theme/src/client/components/VPLink.vue | 14 ++++++- theme/src/client/components/VPSidebarItem.vue | 19 +++------- theme/src/client/components/VPSocialLink.vue | 5 +++ theme/src/client/components/VPSwitch.vue | 18 ++++++++- .../client/components/VPSwitchAppearance.vue | 16 +++++++- theme/src/client/styles/normalize.css | 5 +++ theme/src/client/styles/vars.css | 9 +++++ theme/src/node/locales/de.ts | 2 + theme/src/node/locales/en.ts | 2 + theme/src/node/locales/fr.ts | 2 + theme/src/node/locales/ja.ts | 2 + theme/src/node/locales/ko.ts | 2 + theme/src/node/locales/ru.ts | 2 + theme/src/node/locales/zh-tw.ts | 2 + theme/src/node/locales/zh.ts | 2 + theme/src/shared/locale.ts | 38 +++++++++++++++++++ 19 files changed, 138 insertions(+), 21 deletions(-) diff --git a/theme/src/client/components/VPButton.vue b/theme/src/client/components/VPButton.vue index a8ebd949..75ef1715 100644 --- a/theme/src/client/components/VPButton.vue +++ b/theme/src/client/components/VPButton.vue @@ -2,7 +2,7 @@ import VPIcon from '@theme/VPIcon.vue' import { computed, toRef } from 'vue' import { useRouter, withBase } from 'vuepress/client' -import { useLink } from '../composables/index.js' +import { useData, useLink } from '../composables/index.js' interface Props { tag?: string @@ -21,7 +21,7 @@ const props = withDefaults(defineProps(), { text: '', }) const router = useRouter() - +const { theme: themeData } = useData() const component = computed(() => { return props.tag || props.href ? 'a' : 'button' }) @@ -44,12 +44,15 @@ function linkTo(e: Event) { :class="[size, theme]" :href=" link ? link[0] === '#' || isExternalProtocol ? link : withBase(link) : undefined" :target="target ?? (isExternal ? '_blank' : undefined)" - :rel="rel ?? (isExternal ? 'noreferrer' : undefined)" + :rel="rel ?? (isExternal ? 'noopener noreferrer' : undefined)" @click="linkTo($event)" > {{ text }} + @@ -73,6 +76,10 @@ function linkTo(e: Event) { background-color 0.1s; } +.vp-button:focus-visible { + outline-offset: 4px; +} + .vp-button.medium { padding: 0 20px; font-size: 14px; diff --git a/theme/src/client/components/VPEncryptForm.vue b/theme/src/client/components/VPEncryptForm.vue index 2fa521f1..7accf31c 100644 --- a/theme/src/client/components/VPEncryptForm.vue +++ b/theme/src/client/components/VPEncryptForm.vue @@ -51,6 +51,8 @@ async function onSubmit() { type="password" autocomplete="off" :placeholder="theme.encryptPlaceholder ?? 'Enter Password'" + :aria-invalid="errorCode === 1" + :aria-describedby="errorCode === 1 ? 'encrypt-error' : undefined" @keyup.enter="onSubmit" @focus="!password && (errorCode = 0)" @input="password && (errorCode = 0)" diff --git a/theme/src/client/components/VPFlyout.vue b/theme/src/client/components/VPFlyout.vue index ef4cb21c..b77e25be 100644 --- a/theme/src/client/components/VPFlyout.vue +++ b/theme/src/client/components/VPFlyout.vue @@ -138,6 +138,10 @@ function onBlur() { transition: color var(--vp-t-color); } +.vp-flyout .button:focus-visible { + outline-offset: 4px; +} + .option-icon { margin-right: 0; font-size: 16px; diff --git a/theme/src/client/components/VPLink.vue b/theme/src/client/components/VPLink.vue index 77704259..048997cf 100644 --- a/theme/src/client/components/VPLink.vue +++ b/theme/src/client/components/VPLink.vue @@ -1,7 +1,7 @@