vuepress-plugin-container 是一个 VuePress 插件，能够在 VuePress 生成的静态页面中添加容器模块。本文将详细介绍该工具的使用方法，并带有示例代码。
安装
使用 npm 安装 vuepress-plugin-container :
npm install --save-dev vuepress-plugin-container
使用
在 VuePress 的配置文件 config.js 中，添加如下代码：
-- -------------------- ---- -------
-------------- - -
---
-------- -
-
----------------------------
-
----- ------
------------- -
---- -------
------- ----
-
-
-
-
---
-以上配置中，我们指定了一个 type 为 tip 的容器模块，并且为该模块设置了不同语言下的默认标题。
然后我们就可以在 Markdown 文件中使用该模块了：
::: tip 这是一个提示。 :::
这条语句会将内容包装在一个 tip 容器模块中：
类似的，vuepress-plugin-container 还提供了以下几种容器模块供我们使用：
::: tip提示::: warning警告::: danger危险::: details细节
我们可以根据需求选择不同的容器模块，同时也可以通过自定义配置来满足不同的定制化需求。
配置
vuepress-plugin-container 支持魔法容器，即通过自定义命名的容器模块。我们可以在配置中进行设置：
-- -------------------- ---- -------
-------------- - -
---
-------- -
-
----------------------------
-
----- ------
------------- -
---- -------
------- ----
-
-
--
-
----------------------------
-
----- ----------
------- ---- -- ----- -------------------------------
------ ---------
------------- -
---- ----------
------- ----
-
-
-
-
---
-在该配置中，我们添加了一个 type 为 warning 的魔法容器模块，通过定义 before 和 after 来设置模块开头和结尾的 HTML 标签。在 Markdown 文件中，我们可以通过自定义指令来使用该模块：
::: warning 这是一个警告。 :::
类似于之前的模块，这条语句会生成如下展示效果：
自定义语法
vuepress-plugin-container 使用 markdown-it-container 实现自定义容器模块，因此可以使用该工具的所有特性和语法。
该工具中自带的默认语法如下：
-- -------------------- ---- ------- --- --- ------ --- --- ------- ------ --- --- ------ -------- --- --- ------- -- -------- ---
如果我们需要自定义语法，可以通过配置 markdown-it-container 中的语法来实现。以设置 [title] 属性为例：
-- -------------------- ---- -------
-------------- - -
--------- -
--------------- -- -- -
---------------------------------------- ------- -
------- -------- -------- ---- -
----- ----- - ------------
----- ---- - ----------------------------------------------
-- -------------- --- -- -
------ ----- ------------ --------------------
- ---- -
------ -----------
-
-
---
-
-
-在该配置中，我们通过 extendMarkdown 方法和 markdown-it-container 扩展了 Markdown 的容器模块语法，并将 ::: note [title] 作为自定义语法。 该语法会在 HTML 标签中加入 title 属性，并添加 CSS 类 note，从而实现自定义的风格。
在 Markdown 文件中，我们可以使用该自定义语法：
::: note 自定义标题 这是一个自定义提示 :::
类似于之前的模块，这条语句将生成如下展示效果：
总结
vuepress-plugin-container 是一个非常方便的插件，能够为 VuePress 生成的静态页面添加容器模块。通过本文的介绍，我们学习到了该工具的使用方法和配置方法，同时也了解了具体的语法和示例代码。相信对于前端开发者而言，这将是一个非常有用的工具和技巧。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f05d614403f2923b035bf1b