One

主题

容器自定义 ​

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

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

Simple 容器 ​

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

举个例子（并非实际）

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

最终渲染为：

html
<div class="tip">
  <p class="title">提示</p>
  <p>测试 TIP</p>
</div>

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

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

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

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

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

ts
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 函数：

ts
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 容器：

markdown
::: demo1
测试 demo1 容器
:::

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

::: demo2
测试 demo2 容器
:::

生成的 HTML 结构如下：

html

<div class="demo1 demo1-container">
  <p class="title demo1-title demo1-container-title">demo1</p>
  <p>测试 demo1 容器</p>
</div

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

<div class="demo2 demo2-container">
  <p>测试 demo2 容器</p>
</div

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

scss
// .vitepress/theme/style/container.scss
.demo1-container {
  font-size: 16px;
  .title {
    font-size: 18px;
  }
}

.demo2-container {
  font-size: 12px;
}

然后引入样式文件：

ts
// .vitepress/theme/index.ts
import "./style/container.scss";

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

Card 容器 ​

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

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

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