默认语法示例

约 559 字大约 2 分钟

2026-03-10

以下为vuepress-theme-plume内置的一些组件语法示例

提示

vuepress-theme-plume 主题预览请看这里
vuepress-theme-plume Markdown基础语法请看这里

徽章

使用 <Badge> 组件来显示行内信息，如状态或标签。

示例

- VuePress - <Badge type="info" text="v2" />
- VuePress - <Badge type="tip" text="v2" />
- VuePress - <Badge type="warning" text="v2" />
- VuePress - <Badge type="danger" text="v2" />
- VuePress - <Badge text="v2" color="#8e5cd9" bg-color="rgba(159, 122, 234, 0.16)" />

输出

VuePress - v2
VuePress - v2
VuePress - v2
VuePress - v2
VuePress - v2

图标

图标组件 <Icon />，根据 markdown.icon 配置，从不同的图标库加载图标。

示例

- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
- twitter - <Icon name="skill-icons:twitter" size="2em" />

输出

home -
vscode -
twitter -

“隐秘”文本

使用 <Plot> 组件显示 "隐秘"文本，能够更灵活地控制行为。

示例

- 鼠标悬停 - <Plot>悬停时可见</Plot>
- 点击 - <Plot trigger="click">点击时可见</Plot>

输出

鼠标悬停 - 悬停时可见
点击 - 点击时可见

卡片

使用 <Card> 组件在页面中显示卡片。
也可以使用 markdown卡片容器语法，替代 <Card> 组件。

示例

<Card title="卡片标题" icon="twemoji:astonished-face">
  这里是卡片内容。
</Card>

<Card>
  <template #title>
    <p style="color: red">卡片标题</p>
  </template>
  这里是卡片内容。
</Card>

输出

卡片标题

这里是卡片内容。

卡片标题

这里是卡片内容。

链接卡片

使用 <LinkCard> 组件在页面中显示链接卡片。

示例

<LinkCard title="卡片标题" href="/" description="这里是卡片内容" />
<LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />

输出

卡片标题

这里是卡片内容

卡片标题

更新日志

2026/3/10 17:04

查看所有更新日志

35f98-笔记更新于 2026/3/10

版权所有

许可证：署名-非商业性-相同方式共享 4.0 国际 (CC-BY-NC-SA-4.0)