概述

Repo 卡片组件 用于显示 GitHub / Gitee 仓库信息。

使用

使用该组件需要你手动导入 RepoCard 组件：

<!-- 在 markdown 中导入 -->
<script setup>
import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
</script>

<!-- 导入后，即可在 markdown 中使用 -->
<RepoCard repo="pengzhanbo/vuepress-theme-plume" />

注册为全局组件：

.vuepress/client.ts

import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
import { defineClientConfig } from 'vuepress/client'

export default defineClientConfig({
  enhance({ app }) {
    app.component('RepoCard', RepoCard)
  },
})

全局组件可在 其他任意 markdown 文件中使用

<RepoCard repo="pengzhanbo/vuepress-theme-plume" />

Props

repoRequiredstring

仓库地址，格式为 owner/repo

providerOptionalgithub | gitee

'github'

仓库所属平台，当前仅支持 github / gitee 。

fullnameOptionalboolean

是否显示完整的仓库名称。

完整的仓库名称为 owner/repo。

• 如果 owner 为个人，则默认不显示完整的仓库名称，仅显示 repo。
• 如果 owner 为组织，则默认显示完整的仓库名称。

示例

单卡片

输入：

<RepoCard repo="pengzhanbo/vuepress-theme-plume" />

输出：

多卡片

如果希望以紧凑的方式并排展示多个卡片，可以使用 CardGrid 组件。

输入：

<CardGrid>
  <RepoCard repo="vuepress/core" />
  <RepoCard repo="vuepress/ecosystem" />
</CardGrid>

输出：

输入：

<CardGrid>
  <RepoCard repo="pengzb/vuepress-theme-plume" provider="gitee" />
  <RepoCard repo="pengzb/vite-plugin-mock-dev-server" provider="gitee" />
</CardGrid>

输出：

贡献者

pengzhanbo

更新日志

2025/8/19 18:31

查看所有更新日志

• 94e75-feat(theme): add gitee provider support for repocard, close #674 (#675)于 2025/8/19
• 49d84-feat(theme): add fullname prop support for RepoCard, close #669 (#670)于 2025/8/19
• d1496-docs: update docs于 2025/4/30
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• 597a1-style: lint fix于 2024/11/29
• e3b1c-docs: improve docs于 2024/8/18
• ac898-docs: update docs于 2024/7/27