解析 Markdown
Vitepress自定义主题的入口是 .vitepress/theme 目录的 index 文件。
主题入口
docs/.vitepress/theme/index.ts
1import type { Theme } from "vitepress";
2import DefaultTheme from "vitepress/theme";
3import "./style.css";
4
5export default {
6 extends: DefaultTheme,
7 enhanceApp({ app, router, siteData }) {
8 // ...
9 },
10} satisfies Theme;
注册全局组件
docs/.vitepress/components/demo/index.vue
1<template>
2 注册全局组件
3</template>
docs/.vitepress/themt/index.ts
1import type { Theme } from "vitepress";
2import DefaultTheme from "vitepress/theme";
3import Demo from "../components/demo/index.vue";
4import UI from "../../../packages";
5import "../../../packages/theme/src/index.scss";
6import "./style.css";
7
8export default {
9 extends: DefaultTheme,
10 enhanceApp({ app, router, siteData }) {
11 app.component("Demo", Demo);
12 app.use(UI);
13 },
14} satisfies Theme;
markdown-it-container
markdown-it-container 是 markdown-it 的一个插件,支持用户在 Markdown 中创建自定义容器,这些容器用于封装具有特定类的内容块。
步骤 1：安装插件
1pnpm add markdown-it-container
步骤 2：配置 VitePress
在 docs/.vitepress/config.mts 文件中,您配置了 VitePress 使用 markdown-it-container 插件,并定义了一个名为 demo 的容器。
1import { defineConfig } from "vitepress";
2import MdContainer from "markdown-it-container"; // [!code ++]
3export default defineConfig({
4 markdown: { // [!code ++]
5 config: (md) => { // [!code ++]
6 md.use(MdContainer, "demo", { // [!code ++]
7 render(tokens: string, idx: string) { // [!code ++]
8 if (tokens[idx].nesting === 1) { // [!code ++]
9 return `<Demo>`; // [!code ++]
10 } else { // [!code ++]
11 return `</Demo>`; // [!code ++]
12 } // [!code ++]
13 }, // [!code ++]
14 }); // [!code ++]
15 }, // [!code ++]
16 }, // [!code ++]
17});
步骤 3：使用自定义容器
docs/components/button.md
1# Button按钮
2## 基础按钮
3::: demo
在 Markdown 文件中,您可以使用 ::: demo 语法来创建一个自定义容器,其中的内容将被包裹在 Demo 组件中。
tokens容器
docs/components/button.md
1# Button按钮
2## 基础按钮
3::: demo 按钮的 `type` 分别为 `default`、`primary`、`success`、`warning` 和 `error`
4```html
5button/basis
6```
7:::
1import { defineConfig } from "vitepress";
2import MdContainer from "markdown-it-container";
3export default defineConfig({
4 markdown: {
5 config: (md) => {
6 md.use(MdContainer, "demo", {
7 render(tokens: string, idx: string) {
8 console.log('终端输出-tokens', tokens);
9 console.log('终端输出-自定义容器的索引', idx);
10 if (tokens[idx].nesting === 1) {
11 return `<Demo>`;
12 } else {
13 return `</Demo>`;
14 }
15 },
16 });
17 },
18 },
19});
