vuepress-theme-plume/docs/notes/theme/guide/功能/组件.md

title, author, icon, createTime, outline, permalink

title	author	icon	createTime	outline	permalink
组件	pengzhanbo	radix-icons:component-2	2024/03/06 09:42:42	2	/guide/features/component/

概述

VuePress 支持在 Markdown 文件中使用 组件。

主题提供了一些具有通用性的组件，可以在任何地方使用。

徽章

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

将你想显示的内容传递给 <Badge> 组件的 text 属性。

Props

名称	类型	默认值	说明
type	'info' | 'tip' | 'warning' | 'danger'	'tip'	类型
text	string	''	文本

输入：

- 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 -
• VuePress -
• VuePress -
• VuePress -

图标

支持 iconify 所有图标，通过 icon name 加载图标。

可在 iconify search 搜索图标使用。

Props

名称	类型	默认值	说明
name	string	''	图标名
color	string	'currentcolor'	图标颜色
size	string	'1em'	图标大小

输入：

- 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> 组件显示 “隐秘”文本 ，能够更灵活的控制行为。

该组件默认不启用，你需要在 theme 配置中启用。

::: code-tabs @tab .vuepress/config.ts

export default defineUserConfig({
  theme: plumeTheme({
    plugins: {
      markdownPower: {
        plot: true,
      },
    }
  })
})

:::

Props

名称	类型	默认值	说明
trigger	'hover' | 'click'	'hover'	鼠标悬停触发，或者点击触发
mask	string | { light: string, dark: string }	#000	遮罩颜色
color	string | { light: string, dark: string }	#fff	文本颜色

输入：

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

输出：

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

卡片

使用 <Card> 组件在页面中显示卡片。

也可以使用 markdown 卡片容器 语法，替代 <Card> 组件。

Props

名称	类型	默认值	说明
title	string	''	标题
icon	string | { svg: string }	''	显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接

插槽

名称	说明
default	卡片内容
title	自定义标题

输入：

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

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

输出：

这里是卡片内容。

卡片标题

这里是卡片内容。

链接卡片

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

Props

名称	类型	默认值	说明
title	string	''	标题
icon	string | { svg: string }	''	显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接
href	string	''	链接
description	string	''	详情

插槽

名称	说明
default	卡片详情内容
title	自定义标题

输入：

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

输出：

图片卡片

使用 <ImageCard> 组件在页面中显示图片卡片。

图片卡片 有别于 markdown 的 普通插入图片方式，它展示与图片相关的更多信息，包括标题、描述、作者、链接等。 适用于如 摄影作品、设计作品、宣传海报 等场景。

Props

名称	类型	默认值	说明
image	string	''	必填，图片链接
title	string	''	可选，标题 (展示其它信息需要依赖此属性)
description	string	''	可选，描述
author	string	''	可选，作者
href	string	''	可选，链接
date	string | Date | number	''	可选，日期

输入：

<ImageCard
  image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
  title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
  description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
  href="/"
  author="Andreas Kunz"
  date="2024/08/16"
/>

输出：

还可以放到 <CardGrid> 组件中。

输入：

<CardGrid>
  <ImageCard
    image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
    title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
    description="..."
    href="/"
    author="Andreas Kunz"
    date="2024/08/16"
  />
  <ImageCard
    image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
    title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
    description="..."
    href="/"
    author="Andreas Kunz"
    date="2024/08/16"
  />
</CardGrid>

输出：

查看 照片类作品示例

卡片排列容器

当你需要将多个卡片排列，可以使用 <CardGrid> 组件。在空间足够时，多个卡片会自动排列。

Props

名称	类型	默认值	说明
cols	number | Record<'sm' | 'md' | 'lg', number>	2	卡片排列列数。

输入：

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

<CardGrid>
  <LinkCard title="卡片标题" href="/" />
  <LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />
</CardGrid>

输出：

这里是卡片内容。 这里是卡片内容。