121 lines
2.5 KiB
Markdown
121 lines
2.5 KiB
Markdown
---
|
|
title: Repo Card
|
|
icon: octicon:repo-16
|
|
createTime: 2025/10/08 21:11:56
|
|
permalink: /en/guide/components/github-repo-card/
|
|
---
|
|
|
|
<script setup>
|
|
import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
|
|
</script>
|
|
|
|
## Overview
|
|
|
|
The Repo Card component is used to display GitHub/Gitee repository information.
|
|
|
|
## Usage
|
|
|
|
To use this component, you need to manually import the `RepoCard` component:
|
|
|
|
```md :no-line-numbers
|
|
<!-- Import in markdown -->
|
|
<script setup>
|
|
import RepoCard from 'vuepress-theme-plume/features/RepoCard.vue'
|
|
</script>
|
|
|
|
<!-- After importing, you can use it in markdown -->
|
|
<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
|
|
```
|
|
|
|
Register as a global component:
|
|
|
|
```ts title=".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)
|
|
},
|
|
})
|
|
```
|
|
|
|
Global components can be used in any other markdown file:
|
|
|
|
```md
|
|
<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
|
|
```
|
|
|
|
### Props
|
|
|
|
:::: field-group
|
|
|
|
::: field name="repo" type="string" required
|
|
Repository address in `owner/repo` format
|
|
:::
|
|
|
|
::: field name="provider" type="github | gitee" optional default="'github'"
|
|
Repository platform. Currently only `github`/`gitee` are supported.
|
|
:::
|
|
|
|
::: field name="fullname" type="boolean" optional
|
|
Whether to display the full repository name.
|
|
|
|
The full repository name is `owner/repo`.
|
|
|
|
- If the owner is an individual, the full repository name is not displayed by default, only `repo` is shown.
|
|
- If the owner is an organization, the full repository name is displayed by default.
|
|
:::
|
|
|
|
::::
|
|
|
|
## Examples
|
|
|
|
### Single Card
|
|
|
|
**Input:**
|
|
|
|
```md
|
|
<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
|
|
```
|
|
|
|
**Output:**
|
|
|
|
<RepoCard repo="pengzhanbo/vuepress-theme-plume" />
|
|
|
|
### Multiple Cards
|
|
|
|
If you want to display multiple cards side by side in a compact way, you can use the `CardGrid` component.
|
|
|
|
**Input:**
|
|
|
|
```md
|
|
<CardGrid>
|
|
<RepoCard repo="vuepress/core" />
|
|
<RepoCard repo="vuepress/ecosystem" />
|
|
</CardGrid>
|
|
```
|
|
|
|
**Output:**
|
|
|
|
<CardGrid>
|
|
<RepoCard repo="vuepress/core" />
|
|
<RepoCard repo="vuepress/ecosystem" />
|
|
</CardGrid>
|
|
|
|
**Input:**
|
|
|
|
```md
|
|
<CardGrid>
|
|
<RepoCard repo="pengzb/vuepress-theme-plume" provider="gitee" />
|
|
<RepoCard repo="pengzb/vite-plugin-mock-dev-server" provider="gitee" />
|
|
</CardGrid>
|
|
```
|
|
|
|
**Output:**
|
|
|
|
<CardGrid>
|
|
<RepoCard repo="pengzb/vuepress-theme-plume" provider="gitee" />
|
|
<RepoCard repo="pengzb/vite-plugin-mock-dev-server" provider="gitee" />
|
|
</CardGrid>
|