docs: update docs

.vscode/settings.json

@@ -8,6 +8,8 @@
   "[markdown]": {
     "files.trimTrailingWhitespace": false
   },
+  "css.validate": false,
+  "scss.validate": false,
   "typescript.tsdk": "node_modules/typescript/lib",
   "cSpell.words": [
     "bumpp",

docs/2.preview/主题效果预览.md

@@ -88,6 +88,8 @@ H~2~O
 
 ![image](/images/1px-lines.png)
 
+![image](/images/1px-lines.png)
+
 **Badge**
 
 - <Badge type="info" text="info badge" />
@@ -98,7 +100,7 @@ H~2~O
 
 **图标**
 
-- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
+- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
 - vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
 - twitter - <Iconify name="skill-icons:twitter" size="2em" />
 

docs/notes/vuepress-plugin/caniuse/README.md

@@ -86,6 +86,7 @@ __示例： 获取 css 伪类选择器 `:dir()` 在各个浏览器的支持情
 ```
 效果：
 
+
 ::: caniuse css-matches-pseudo
 :::
 

plugins/plugin-caniuse/README.md

@@ -1,34 +1,59 @@
-# `@vuepress-plume/plugin-caniuse`
+# vuepress-plugin-caniuse
+
+VuePress 2 Plugin
+
+VuePress 2 插件
+
+在Markdown中添加 [can-i-use](https://caniuse.com/) 支持，这对于你在写前端技术博客时，说明某个feature的兼容性时特别有用。
 
-为 markdown 添加 can-i-use 容器支持
 ## Install
-```
+``` sh
 yarn add @vuepress-plume/plugin-caniuse
 ```
+
 ## Usage
+
+### 在VuePress 配置文件中添加插件
 ``` js
 // .vuepress/config.js
-const { caniusePlugin } = require('@vuepress-plume/plugin-caniuse')
-module.exports = {
+export default {
   // ...
   plugins: [
-    caniusePlugin({ mode: 'embed' })
+    ['@vuepress-plume/plugin-caniuse', { mode: 'image' }]
   ]
   // ...
 }
 ```
-
-### options
-
-- mode: 渲染模式，默认值 `embed`
-  - embed: 交互式嵌入，通过 iframe 嵌入可交互的 can-i-use
-  - image: 仅添加 图片
-
+### 在markdown中编写
 ``` md
-::: caniuse css-matches-pseudo
+::: caniuse <feature> {{browser_versions}}
 :::
 ```
 
-## 效果
+### Options
 
-![css-dir-pseudo](https://caniuse.bitsofco.de/image/css-dir-pseudo.webp)
+- `options.mode`: can-i-use插入文档的模式， 支持 `embed` 和`image`, 默认值是 `image`。
+  - `image`: 插入图片
+  - `embed`: 使用iframe嵌入 can-i-use
+
+### \<feature>
+
+正确取值请参考 [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/)
+
+### \{browser_versions\}`
+
+可选。当前特性在多个版本中的支持情况。
+
+格式： `{number,number,...}`  取值范围为 `-5 ~ 3`
+
+- 小于`0` 表示低于当前浏览器版本的支持情况
+- `0` 表示当前浏览器版本的支持情况
+- 大于`0` 表示高于当前浏览器版本的支持情况
+
+## Example
+``` md
+::: caniuse css-matches-pseudo {-2,-1,1}
+:::
+```
+效果：
+![can-i-use css-matches-pseudo](https://caniuse.bitsofco.de/image/css-dir-pseudo.webp)

plugins/plugin-caniuse/src/README.md

@@ -1,49 +0,0 @@
-# vuepress-plugin-caniuse
-
-VuePress 2 Plugin
-
-VuePress 2 插件
-
-在Markdown中添加 [can-i-use](https://caniuse.com/) 支持，这对于你在写前端技术博客时，说明某个feature的兼容性时特别有用。
-
-## Install
-``` sh
-yarn add @vuepress-plume/plugin-caniuse
-```
-
-## Usage
-
-### 在VuePress 配置文件中添加插件
-``` js
-// .vuepress/config.js
-export default {
-  // ...
-  plugins: [
-    ['@vuepress-plume/plugin-caniuse', { mode: 'image' }]
-  ]
-  // ...
-}
-```
-### 在markdown中编写
-``` md
-::: caniuse <feature>
-:::
-```
-
-### Options
-
-- `options.mode`: can-i-use插入文档的模式， 支持 `embed` 和`image`, 默认值是 `image`。
-  - `image`: 插入图片
-  - `embed`: 使用iframe嵌入 can-i-use
-
-### \<feature>
-
-正确取值请参考 [https://caniuse.bitsofco.de/](https://caniuse.bitsofco.de/)
-
-## Example
-``` md
-::: caniuse css-matches-pseudo
-:::
-```
-效果：
-![can-i-use css-matches-pseudo](https://caniuse.bitsofco.de/image/css-dir-pseudo.webp)