feat: add support optional icon for file-tree and code-tabs (#216)

* feat(theme)!: migrate `plugin-markdown-hint` * chore: tweak * chore: tweak * chore: tweak * chore: tweak * chore: tweak * chore: tweak * chore: tweak * chore: tweak * chore: tweak * chore: tweak * fix(theme): improve `home-blog` styles in mobile, close #210 * chore: tweak * chore: tweak * chore: tweak * feat: add support optional icon for `file-tree` and `code-tabs` * chore: tweak * chore: tweak * chore: tweak * chore: tweak
pengzhanbo · Sep 25, 2024 · ca21d1b · ca21d1b
1 parent 4967272
commit ca21d1b
Show file tree

Hide file tree

Showing 28 changed files with 509 additions and 94 deletions.
diff --git a/docs/.vuepress/notes/zh/theme-config.ts b/docs/.vuepress/notes/zh/theme-config.ts
@@ -38,6 +38,8 @@ export const themeConfig = defineNoteConfig({
         '阅读统计',
         'markdown增强',
         'markdownPower',
+        'markdownImage',
+        'markdownMath',
         '水印',
       ],
     },

diff --git a/docs/.vuepress/theme.ts b/docs/.vuepress/theme.ts
@@ -20,10 +20,8 @@ export const theme: Theme = plumeTheme({
       imageSize: 'all',
       pdf: true,
       caniuse: true,
-      plot: true,
       bilibili: true,
       youtube: true,
-      icons: true,
       codepen: true,
       replit: true,
       codeSandbox: true,

diff --git a/docs/1.示例/加密文章.md b/docs/1.示例/加密文章.md
@@ -6,7 +6,6 @@ permalink: /article/enx7c9s/
 tags:
   - 预览
   - 标签
-sticky: true
 ---
 
 这是一篇 示例文章。

diff --git a/docs/3.更新说明/102-103.md b/docs/3.更新说明/102-103.md
@@ -0,0 +1,72 @@
+---
+title: 1.0.0-rc.102 至 rc.103 更新说明
+createTime: 2024/09/24 23:45:49
+permalink: /article/6pa64b1n/
+sticky: 3
+---
+
+这两个版本做了一些 破坏性的更新，主要围绕以下两个方面：
+
+- 适配 [Vuepress Guidelines](https://ecosystem.vuejs.press/zh/themes/guidelines.html)
+- 更新 vuepress-plugin-md-enhance 插件，并迁移其中的部分功能，改用 VuePress 官方插件
+
+## 适配 VuePress Guidelines
+
+VuePress 推出了 [主题开发指南](https://ecosystem.vuejs.press/zh/themes/guidelines.html)。
+
+这一举措旨在规范化主题开发流程，并提出了主题开发过程中需要遵守的几个约定，这包括：
+
+- 约定 CSS 变量命名规范，并约束 主要 CSS 变量的命名，如 `--vp-c-accent`，`--vp-c-text` 等。
+- 约定 主要的 HTML 元素容器应添加指定的 属性名，如 `vp-content`, `vp-navbar` 等。
+- 约定 双主题模式应使用 `[data-theme="light"]` 和 `[data-theme="dark"]` 来区分。
+
+围绕这几个约定，可以使得 VuePress 的 开发者们，可以很方便的 开发出 更具通用性的 主题和插件。
+
+`plume` 主题也同样适配了这些约定：
+
+- **CSS 变量命名的变更** 和 **HTML 元素添加属性**，对于用户是无感知的，您无需关注这方面是否会有影响。
+
+- **双主题模式**，对于有自定义主题需求的用户而言，如果您有重新定义深色模式下的样式，则需要做出一些调整：
+
+  在 CSS 中的 `.dark` 类应替换为 `[data-theme="dark"]`，请不用担心替换会带来额外的副作用，它们在 CSS 中的
+  优先级是相同的，您可以安全的执行替换操作。
+
+## vuepress-plugin-md-enhance 插件迁移
+
+[vuepress-plugin-md-enhance](https://plugin-md-enhance.vuejs.press/zh/) 提供了非常多的功能支持，但与之带来的困难是，
+它变得越来越臃肿，变得难以维护了。
+
+我在 [#4130](https://github.com/vuepress-theme-hope/vuepress-theme-hope/issues/4130) 中提出了拆分迁移的计划。
+因此从 `@2.0.0-rc.53` 版本开始，逐步开始拆分迁移的计划。
+
+截止到 `@2.0.0-rc.54` 版本，已经拆分出了以下插件：
+
+- [@vuepress/plugin-markdown-hint](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-hint.html)
+- [@vuepress/plugin-markdown-image](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-image.html)
+- [@vuepress/plugin-markdown-math](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-math.html)
+- [@vuepress/plugin-markdown-tab](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-tab.html)
+
+当前主题也将 vuepress-plugin-md-enhance 更新到 `@2.0.0-rc.54` 版本，因此，也重新接入了上述的插件。
+
+- `@vuepress/plugin-markdown-hint` 提供了 提示容器 和 `github alerts` 支持，主题已内置了该插件，对于该插件的迁移，
+  用户是无需做任何修改的，您可以继续使用这些功能。
+
+- `@vuepress/plugin-markdown-image` 提供了图片支持，主题已内置了该插件，但不启用该插件的默认功能，
+  因此，如果您使用了如 `plugins.mdEnhance.imgSize` 配置项，您需要通过`plugins.markdownImage` 重新进行配置。
+
+- `@vuepress/plugin-markdown-math` 提供了数学公式支持，主题已内置了该插件，并默认启用了 `katex` 支持。
+
+- `@vuepress/plugin-markdown-tab` 提供了 Tab 容器 和 代码分组支持，主题重写了插件部分内容，对 `code-tabs` 容器
+  做了一些调整，支持在 代码分组标题中显示 相关联的图标。
+
+## 其它更新
+
+- **文件树** 现在支持 不同的图标方案，可在 `:::file-tree` 后跟随 `:simple-icon` / `:colored-icon` 切换。
+
+  默认为 colored-icon，如果切换为 simple-icon，则不再根据 文件夹名和文件扩展名匹配不同的图标，仅显示默认的
+  文件夹图标和文件图标。
+
+- **代码块分组** 的标题现在支持显示 图标。当作为 文件名时，与 **文件树** 采用相同的图标解析规则，还额外支持
+  不同的技术、框架、语言的名称图标。
+
+- 优化了 容器、任务列表、脚注、等的样式。
diff --git a/docs/3.更新说明/73-77.md b/docs/3.更新说明/73-77.md
@@ -1,9 +1,7 @@
 ---
 title: 1.0.0-rc.73 至 rc.77 更新说明
-author: pengzhanbo
 createTime: 2024/07/11 09:18:48
 permalink: /article/5vjshyi9/
-sticky: 3
 ---
 
 近期的这几个版本主要围绕 **实现单独的主题配置文件** ，监听并支持热更新。

diff --git a/docs/notes/theme/config/plugins/markdownImage.md b/docs/notes/theme/config/plugins/markdownImage.md
@@ -0,0 +1,40 @@
+---
+title: Markdown Image
+createTime: 2024/09/24 12:06:28
+permalink: /config/plugins/markdown-image/
+---
+
+## 概述
+
+为 Markdown 图像添加附加功能。
+
+关联插件：[@vuepress/plugin-markdown-image](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-image.html)
+
+## 配置
+
+插件默认不启用任何功能，你需要手动开启它们。
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownImage: {
+        // 启用 figure
+        // figure: true,
+
+        // 启用图片懒加载
+        // lazyload: true,
+
+        // 启用图片标记
+        // mark: true,
+
+        // 启用图片大小
+        // size: true,
+      }
+    }
+  }),
+})
+```
diff --git a/docs/notes/theme/config/plugins/markdownMath.md b/docs/notes/theme/config/plugins/markdownMath.md
@@ -0,0 +1,32 @@
+---
+title: Markdown Math
+createTime: 2024/09/24 13:20:41
+permalink: /config/plugins/markdown-math/
+---
+
+## 概述
+
+为 Markdown 添加数学支持。
+
+关联插件：[@vuepress/plugin-markdown-math](https://ecosystem.vuejs.press/zh/plugins/markdown/markdown-math.html)
+
+此插件允许你使用 mathjax 或 katex 在 Markdown 中渲染 $\TeX$ 内容。
+
+## 配置
+
+插件默认启用 `katex`。
+
+```ts
+import { defineUserConfig } from 'vuepress'
+import { plumeTheme } from 'vuepress-theme-plume'
+
+export default defineUserConfig({
+  theme: plumeTheme({
+    plugins: {
+      markdownMath: {
+        type: 'katex',
+      }
+    }
+  }),
+})
+```
diff --git a/docs/notes/theme/config/plugins/markdownPower.md b/docs/notes/theme/config/plugins/markdownPower.md
@@ -1,13 +1,12 @@
 ---
 title: Markdown Power
-author: pengzhanbo
 createTime: 2024/04/04 06:56:33
-permalink: /config/plugin/markdown-power/
+permalink: /config/plugins/markdown-power/
 ---
 
 ## 概述
 
-提供 Markdown 增强功能。
+为 主题 提供 Markdown 增强功能。
 
 关联插件: [@vuepress-plume/plugin-md-power](https://github.com/pengzhanbo/vuepress-theme-plume/tree/main/plugins/plugin-md-power)
 
@@ -23,9 +22,12 @@ export default defineUserConfig({
   theme: plumeTheme({
     plugins: {
       markdownPower: {
-        // 默认不启用任何功能，你需要手动开启它们
+        fileTree: true, // :::file-tree  文件树容器
+        plot: true, // !!plot!! 隐秘文本
+        icons: true, // :[collect:name]:   内联 iconify 图标
+
+        // 默认不启用以下功能，你需要手动开启它们
         // pdf: true, // @[pdf](url)  嵌入 PDF 文件
-        // icons: true, // :[collect:name]:   内联 iconify 图标
         // bilibili: true, // @[bilibili](bvid)  嵌入 bilibili 视频
         // youtube: true, // @[youtube](id)  嵌入 youtube 视频
         // codepen: true, // @[codepen](user/slash)  嵌入 codepen
@@ -34,8 +36,6 @@ export default defineUserConfig({
         // jsfiddle: true, // @[jsfiddle](id)  嵌入 jsfiddle
         // caniuse: true, // @[caniuse](feature)  嵌入 caniuse
         // repl: true, // :::go-repl   :::kotlin-repl  :::rust-repl
-        // plot: true, // !!plot!! 隐秘文本
-        // fileTree: true, // :::file-tree  文件树容器
 
         // imageSize: true, // 在构建阶段为 图片添加 width/height 属性
       }

diff --git a/docs/notes/theme/config/plugins/markdown增强.md b/docs/notes/theme/config/plugins/markdown增强.md
@@ -21,28 +21,17 @@ export default defineUserConfig({
   theme: plumeTheme({
     plugins: {
       markdownEnhance: {
-        hint: true, // 提示容器
-        codetabs: true, // 代码组
-        tabs: true, // 选项卡
         align: true, // 对齐容器
         mark: true, // 标记语法
         tasklist: true, // 任务列表语法
         attrs: true, // 属性语法
         sup: true, // 上标语法
         sub: true, // 下标语法
-        alert: true, // GFM 通知语法
         footnote: true, // 注脚语法
-        katex: true, // 数学公式
 
         // 以下可选项在 主题中默认不启用，
         // 请在主题中自行配置
         // include: true, // Markdown 导入支持
-        // figure: true, // 启用图片 Figure 支持
-        // imgLazyload: true, // 使用原生方式懒加载页面图片
-        // imgMark: true, // 浅色/深色 图片标记
-        // imgSize: true, // 图片尺寸支持
-        // obsidianImgSize: true, // obsidian 图片尺寸支持
-        // mathjax: true, //  Math Jax 数学公式 语法支持
         // chart: true, // 图表支持
         // echarts: true, // ECharts 图表支持
         // flowchart: true, // 流程图支持
@@ -53,7 +42,6 @@ export default defineUserConfig({
         // vuePlayground: true, // Vue 交互演示
         // sandpack: true, // sandpack 交互演示
         // demo: true, // 代码案例
-        // revealJs: true, // 幻灯片支持
       }
     }
   }),
@@ -68,3 +56,12 @@ export default defineUserConfig({
 主题还未完全对 该插件提供的 所有 增强功能 进行 样式上的适配。
 如果你在使用过程中遇到样式上的问题，可以在 [issue](https://github.com/pengzhanbo/vuepress-theme-plume/issues) 里提出。
 :::
+
+::: warning
+该插件从 `2.0.0-rc.53` 开始，移除了部分功能。主题从 `1.0.0-rc.103` 版本开始，适配至最新版。
+由此带来的影响是，`plugins.mdEnhance` 中 `imgSize`/`imgLazyload`/`imgMark`/`figure`/`obsidianImgSize`/`katex`/`mathjax`/`tabs`/`code-tabs`/`hint`/`alerts`弃用。
+
+- `imgSize`/`imgLazyload`/`imgMark`/`figure`/`obsidianImgSize` 所实现的功能，您可以使用 `plugins.markdownImage` 重新进行配置。
+- `katex` / `mathjax` 所实现的功能，您可以使用 `plugins.markdownMath` 进行配置。
+- `tabs` / `code-tabs` / `hint` / `alerts` 已变更为 主题的内置功能，您无需额外的配置。
+:::
diff --git a/docs/notes/theme/config/plugins/阅读统计.md b/docs/notes/theme/config/plugins/阅读统计.md
@@ -1,6 +1,5 @@
 ---
 title: 阅读统计
-author: pengzhanbo
 createTime: 2024/03/06 15:23:39
 permalink: /config/plugins/reading-time/
 ---

diff --git a/docs/notes/theme/config/配置说明.md b/docs/notes/theme/config/配置说明.md
@@ -88,11 +88,13 @@ export default defineUserConfig({
 你可以直接在 [VuePress 配置文件](#vuepress-配置文件) 相同的路径下创建一个 `plume.config.js` 文件，这样就可以在该文件中进行主题配置。
 你也可以使用 TypeScript 来创建一个 `plume.config.ts` 文件，以获得更好的类型提示。
 
-```txt :no-line-numbers
-{sourceDir}/.vuepress/
-├── config.ts
-└── plume.config.ts // [!code ++]
-```
+::: file-tree
+
+- docs
+  - .vuepress
+    - config.ts
+    - **plume.config.ts**
+:::
 
 ::: code-tabs
 @tab plume.config.ts
-Original file line number
+Diff line change
@@ Expand Up / @@ -6,7 +6,6 @@ permalink: /article/enx7c9s/ @@
     tags:
       - 预览
       - 标签
-    sticky: true
     ---
     这是一篇 示例文章。
@@ Expand Down @@