容器自定义

Teek 提供了两种创建容器的 API，这两种容器 Teek 分别命名为 Simple 容器、Card 容器。

Teek 容器都有哪些？请看 Markdown 拓展。

容器 API 请看 Markdown 插件工具

Simple 容器

VitePress 的 info、tip、warning、danger容器都是 Simple 容器，其原理是添加 div来包裹 Markdown 文本，然后通过 CSS 来实现样式。

举个例子（并非实际）

:::tip 提示测试 TIP:::

最终渲染为：

<divclass="tip"><pclass="title">提示</p><p>测试 TIP</p></div>

此时就可以在 CSS 文件中通过 .tip和 .title来添加样式，如添加一个背景色，给 title 加大字号等。

Teek 的 Simple 容器 API 请看 simpleContainer.ts文件，该文件参考自 VitePress 官方项目，并修改了些许内容。

simpleContainer.ts文件中真正干活的 API 为 createContainerThenGet函数，该函数提供两个 HTML 模板：

开启标题

<divclass="${type} ${className}"><pclass="title ${type}-title ${className}-title">${defaultTitle ||传入标题}</p><p>${输入的内容}</p></div

不开启标题

<divclass="${type} ${className}"><p>${输入的内容}</p></div

举个例子，使用 createContainerThenUse创建 Simple 容器，该函数内部会调用 createContainerThenGet来生成 HTML：

import{createContainerThenUse } from"vitepress-theme-teek";createContainerThenUse(md,{type:"demo1",useTitle:true,defaultTitle:"demo1",className:"demo1-container"});createContainerThenUse(md,{type:"demo2",useTitle:false,className:"demo2-container"});

当需要定义非常多的 Simple 容器时，可以使用 createContainersThenUse函数：

import{createContainersThenUse } from"vitepress-theme-teek";createContainersThenUse(md,[{type:"demo1",useTitle:true,defaultTitle:"demo1",className:"demo1-container"},{type:"demo2",useTitle:false,className:"demo2-container"},]);

提示

第一个参数 md为 markdown-it实例，VitePress 已经在 markdown.config回调函数的第一个参数提供出来。

使用 Simple 容器：

:::demo1测试 demo1 容器::::::demo1 容器标题测试 demo1 容器::::::demo2测试 demo2 容器:::

生成的 HTML 结构如下：

<divclass="demo1 demo1-container"><pclass="title demo1-title demo1-container-title">demo1</p><p>测试 demo1 容器</p></div<divclass="demo1 demo1-container"><pclass="title demo1-title demo1-container-title">容器标题</p><p>测试 demo1 容器</p></div<divclass="demo2 demo2-container"><p>测试 demo2 容器</p></div

此时需要您针对不同容器的 class 来添加样式，如：

.demo1-container{font-size:16px;.title{font-size:18px;}}.demo2-container{font-size:12px;}

然后引入样式文件：

import"./style/container.scss";

Teek 已经支持在 .vitepress/config.mts中提供配置项 markdown.container.config函数来构建 Simple 容器，请看 自定义容器。

Card 容器

Teek 的 shareCard、imgCard、navCard都是 Card 容器，其原理是通过 js-yaml依赖解析 yaml代码块，然后循环生成 HTML，最后通过 CSS 来实现样式。

Card 容器 API 请看 cardContainer.ts文件。

Card 容器 API 需要您在 htmlRender函数里传入 HTML 标签，您可以参考 shareCard.ts文件来实现自定义 Card 容器。