组件语法

你可以在 Markdown 中通过 component 代码块快速添加组件。

配置

TS

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        component: true,
      },
    },
  }),
});

JS

// .vuepress/config.js
import { hopeTheme } from "vuepress-theme-hope";

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        component: true,
      },
    },
  }),
};

使用

你可以使用 component 代码块来在 Markdown 中添加组件。YAML 和 JSON 的数据格式均受支持:

```component 组件名称
# 组件数据
```

```component 组件名称
{
  // 组件数据
}
```

案例

快速使用 VPCard 组件

这里的 <VPCard> 是已经全局注册的卡片组件。

Mr.Hope

---

Where there is light, there is hope

Mr.Hope

---

Where there is light, there is hope

这里的 `<VPCard>` 是已经全局注册的卡片组件。

```component VPCard
title: Mr.Hope
desc: Where there is light, there is hope
logo: https://mister-hope.com/logo.svg
link: https://mister-hope.com
color: rgba(253, 230, 138, 0.15)
```

```component VPCard
{
  "title": "Mr.Hope",
  "desc": "Where there is light, there is hope",
  "logo": "https://mister-hope.com/logo.svg",
  "link": "https://mister-hope.com",
  "color": "rgba(253, 230, 138, 0.15)"
}
```