docs: update docs

docs/.vuepress/navbar.ts

@@ -33,6 +33,7 @@ export const zhNavbar = [
     text: '更多',
     icon: 'icon-park-outline:more-three',
     items: [
+      { text: '主题工具', link: '/tools/' },
       { text: '友情链接', link: '/friends/' },
       {
         text: 'Vuepress',

docs/.vuepress/notes.ts

@@ -124,6 +124,18 @@ export const zhNotes = definePlumeNotesConfig({
         },
       ],
     },
+    {
+      dir: 'tools',
+      link: '/tools/',
+      sidebar: [
+        {
+          text: '工具',
+          icon: 'tabler:tools',
+          link: '/tools/',
+          items: ['home-hero-tint-plate', 'caniuse'],
+        },
+      ],
+    },
   ],
 })
 

docs/en/README.md

@@ -5,7 +5,7 @@ config:
   -
     type: hero
     full: true
-    background: filter-blur
+    background: tint-plate
     hero:
       name: Theme Plume
       tagline: Vuepress Next Theme

docs/notes/theme/config/notes配置.md

@@ -121,9 +121,13 @@ interface NotesSidebarItem {
    */
   items?: NotesSidebar
   /**
-   * 侧边栏图标
+   * - 支持 iconify 图标，直接使用 iconify name 即可自动加载
+   * @see https://icon-sets.iconify.design/
+   *
+   * - 如果 iconify 图标不满足您的需求，也可以支持传入 svg 字符串。
+   * - 还支持使用 本地图片 或 远程图片，本地图片的路径需要以 `/` 开头。
    */
-  icon?: string
+  icon?: string | { svg: string }
 }
 ```
 
@@ -135,7 +139,8 @@ interface NotesSidebarItem {
 
 ### 侧边栏图标
 
-主题不仅可以通过 侧边栏配置中 `icon` 配置图标，还可以通过 文件中的 frontmatter 中 `icon` 字段 配置图标。
+主题不仅可以通过 侧边栏配置中 `icon` 配置图标，还可以通过 文件中的 frontmatter 中 `icon` 字段 配置图标，
+与 侧边栏配置中的 `icon` 一致。
 
 ```md
 ---

docs/notes/theme/config/导航栏配置.md

@@ -91,10 +91,13 @@ type NavItem = string | {
    */
   link: string
   /**
-   * 支持 iconify 图标，直接使用 iconify name 即可自动加载
+   * - 支持 iconify 图标，直接使用 iconify name 即可自动加载
    * @see https://icon-sets.iconify.design/
+   *
+   * - 如果 iconify 图标不满足您的需求，也可以支持传入 svg 字符串。
+   * - 还支持使用 本地图片 或 远程图片，本地图片的路径需要以 `/` 开头。
    */
-  icon?: string
+  icon?: string | { svg: string }
   /**
    * 控制元素何时被激活
    */

docs/notes/theme/guide/markdown/进阶.md

@@ -327,6 +327,9 @@ export default defineUserConfig({
 @[caniuse](feature)
 ```
 
+为了方便使用，主题提供了工具支持：[caniuse 特性搜索](/tools/caniuse/)，你可以直接使用该工具
+帮助生成 markdown 代码。
+
 ### 语法
 
 ``` md

docs/notes/theme/guide/自定义首页.md

@@ -144,6 +144,8 @@ config:
 
 适用于 文档 类型站点，放置于 首位。
 
+**工具支持： [首页背景色板配置工具](/tools/home-hero-tint-plate/)**
+
 ```ts
 interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
   type: 'hero'
@@ -158,14 +160,36 @@ interface PlumeThemeHomeHero extends PlumeHomeConfigBase {
     }
   }
   /**
-   * 背景图片，"filter-blur" 为预设效果
+   * 背景图片，"tint-plate" 为预设效果, 也可以配置为图片地址
    */
-  background?: 'filter-blur' | string
+  background?: 'tint-plate' | string
+
+  /**
+   * 当 background 为预设背景时，可以配置 RGB 值，用于调整背景
+   * 该配置仅在 `background` 为 `tint-plate` 时生效
+   */
+  tintPlate?: TintPlate
   /**
    * 如果是非预设背景，可以设置背景图片的滤镜效果
    */
   filter?: string
 }
+interface TintPlateObj {
+  // value 表示 基准色值，范围为 0 ~ 255
+  // offset 表示 基准色值的偏移量，范围为 0 ~ (255 - value)
+  r: { value: number, offset: number }
+  g: { value: number, offset: number }
+  b: { value: number, offset: number }
+}
+type TintPlate =
+  | number // 210
+  | string // '210,210,210' => red,green,blue
+  // { r: { value: 220, offset: 36 }, g: { value: 220, offset: 36 }, b: { value: 220, offset: 36 } }
+  | TintPlate
+  // { light: 210, dark: 20 }
+  // { light: '210,210,210', dark: '20,20,20' }
+  | { light: number | string, dark: number | string }
+  | { light: TintPlate, dark: TintPlate }
 ```
 
 **示例：**
@@ -177,7 +201,7 @@ config:
  -
     type: hero
     full: true
-    background: filter-blur
+    background: tint-plate
     hero:
       name: Theme Plume
       tagline: Vuepress Next Theme
@@ -200,6 +224,32 @@ config:
 <img src="/images/custom-hero.png" alt="Theme Plume" />
 :::
 
+当 `background` 配置为 `tint-plate` 时，还可以额外配置 `tintPlate` 调整 背景色调，范围为 `0 ~ 255`：
+
+```md
+---
+home: true
+config:
+ -
+    type: hero
+    full: true
+    background: tint-plate
+    tintPlate: 210
+---
+```
+
+`tintPlate` 用于配置 RGB 值：
+
+- 配置为单个值时，表示配置 red,green,blue 三个颜色值为相同值，范围： 0 - 255。示例： `210`。
+- 配置为三个值时，表示配置 red,green,blue 三个颜色值为不同值，范围： 0 - 255。示例： `210,210,210`。
+- 配置为 `TintPlate`，则可以更加灵活的控制每个颜色值和对应的偏移量。
+- 还可以配置为 `{ light, dark }`，在深色模式和浅色模式下使用不同的颜色值。
+
+::: info
+为了便于用户配置 美观的个性化的背景，主题还提供了 [首页背景色板配置工具](/tools/home-hero-tint-plate/)
+进行可视化操作，生成配置内容，你可以直接复制它们用于自己的项目中。
+:::
+
 ### features
 
 - 类型： `PlumeThemeHomeFeatures`