diff --git a/docs/en/guide/markdown/file-tree.md b/docs/en/guide/markdown/file-tree.md index d105a1661..a29b5e1bf 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 b0c0b441d..2f9571b12 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 36a1622c1..eafd50512 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 0250214ab..289591b7e 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 21e9f52f1..f0a3cdcb4 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 f0aa44076..aa0cf8e2d 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 11b582709..0bfeb8955 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 4fc3a74cd..f749abdb2 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 9c3c686f8..61218ea6b 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 b495407f8..732777994 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 54325d46c..d0abd3ce0 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 01ec93faf..660dbe4ce 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()