Repo 卡片
248字小于1分钟
2024-07-26
概述
Repo 卡片组件 用于显示 GitHub 仓库信息。
使用
使用该组件需要你手动导入 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 { defineClientConfig } from 'vuepress/client'
import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
export default defineClientConfig({
enhance({ app }) {
app.component('RepoCard', RepoCard)
},
})
全局组件可在 其他任意 markdown 文件中使用
<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
Props
RepoCard
组件的 接收一个 repo
参数,传入的是仓库的地址,格式为 owner/repo
。
示例
单卡片
输入:
<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
输出:
多卡片
如果希望以紧凑的方式并排展示多个卡片,可以使用 CardGrid
组件。
输入:
<CardGrid>
<RepoCard repo="vuepress/core" />
<RepoCard repo="vuepress/ecosystem" />
</CardGrid>
输出: