yuany3721/vuepress-theme-plume
1
0
Fork 0
forked from gitea-yuany3721/vuepress-theme-plume
Code Pull Requests Activity

feat(plugin-md-power)!: use # as the comment delimiter (#870)

Browse Source
This commit is contained in:
pengzhanbo 2026-04-02 20:48:55 +08:00 committed by GitHub
parent a01bc13c66
commit 39a76a35d7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 61 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
docs/en/guide/markdown/file-tree.md
View File

@ -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**

4
docs/en/guide/quick-start/collection.md
View File

@ -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
:::

28
docs/en/guide/quick-start/project-structure.md
View File

@ -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

2
docs/en/guide/quick-start/sidebar.md
View File

@ -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`

4
docs/en/guide/quick-start/write.md
View File

@ -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

16
docs/guide/markdown/file-tree.md
View File

@ -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**

4
docs/guide/quick-start/collection.md
View File

@ -27,10 +27,10 @@ permalink: /guide/collection/
:::file-tree
- my-site
- docs \# 源目录
- docs # 源目录
- .vuepress/
- …
- README.md \# 首页
- README.md # 首页
- package.json
:::

28
docs/guide/quick-start/project-structure.md
View File

@ -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

2
docs/guide/quick-start/sidebar.md
View File

@ -33,7 +33,7 @@ tags:
- rust # Rust 编程笔记
- tuple.md
- struct.md
- README.md # 站点首页
- README.md # 站点首页
:::
### 通过`sidebar` 配置

4
docs/guide/quick-start/write.md
View File

@ -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

2
plugins/plugin-md-power/__test__/fileTreePlugin.spec.ts
View File

@ -72,7 +72,7 @@ describe('fileTreePlugin', () => {
- client
- components
- **Navbar.vue**
- index.ts \# comment
- index.ts # comment
- node
- index.ts
- .gitignore

6
plugins/plugin-md-power/src/node/container/fileTree.ts
View File

@ -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()