mirror of
https://github.com/pengzhanbo/vuepress-theme-plume.git
synced 2026-04-24 11:08:16 +08:00
151 lines
6.2 KiB
Markdown
151 lines
6.2 KiB
Markdown
---
|
|
title: Npm 徽章
|
|
icon: akar-icons:npm-fill
|
|
createTime: 2024/07/26 22:07:23
|
|
permalink: /guide/components/npm-badge/
|
|
---
|
|
|
|
<script setup>
|
|
import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
|
|
import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
|
|
</script>
|
|
|
|
## 概述
|
|
|
|
Npm 徽章组件 用于显示 npm 包信息，并提供相关的链接。
|
|
|
|
徽章由 <https://shields.io> 提供支持。
|
|
|
|
## 使用
|
|
|
|
使用该组件需要你手动导入 `NpmBadge` 或 `NpmBadgeGroup` 组件：
|
|
|
|
```md :no-line-numbers
|
|
<!-- 在 markdown 中导入 -->
|
|
<script setup>
|
|
import NpmBadge from 'vuepress-theme-plume/features/NpmBadge.vue'
|
|
import NpmBadgeGroup from 'vuepress-theme-plume/features/NpmBadgeGroup.vue'
|
|
</script>
|
|
|
|
<!-- 导入后，即可在 markdown 中使用 -->
|
|
<NpmBadge name="vuepress-theme-plume" type="dm" />
|
|
|
|
<!-- 并排显示多个 npm badge -->
|
|
<NpmBadgeGroup name="vuepress-theme-plume" items="version,dm" />
|
|
```
|
|
|
|
<NpmBadge name="vuepress-theme-plume" type="dm" />
|
|
|
|
<NpmBadgeGroup name="vuepress-theme-plume" items="version,dm" />
|
|
|
|
## `<NpmBadge />`
|
|
|
|
单个 npm badge
|
|
|
|
### Props
|
|
|
|
| 名称 | 类型 | 必填 | 默认值 | 说明 |
|
|
| ---------- | --------------- | --------------- | ----------- | --------------------------------------- |
|
|
| name | `string` | 否 | `''` | npm 包名，为空则从 `repo` 中获取 |
|
|
| repo | `string` | name 为空时必填 | `''` | 包 github 仓库地址, 格式为 `owner/repo` |
|
|
| type | `NpmBadgeType` | 是 | - | 徽章类型 |
|
|
| theme | `NpmBadgeTheme` | 否 | `'flat'` | 徽章主题 |
|
|
| label | `string` | 否 | `''` | 徽章标签 |
|
|
| color | `string` | 否 | `'#32A9C3'` | 徽章颜色 |
|
|
| labelColor | `string` | 否 | `'#1B3C4A'` | 徽章标签颜色 |
|
|
| branch | `string` | 否 | `'main'` | 仓库分支 |
|
|
| dir | `string` | 否 | `''` | 包所在仓库目录，适用于 monorepo 项目 |
|
|
|
|
### Types
|
|
|
|
```ts
|
|
type NpmBadgeType =
|
|
// github
|
|
| 'source' // github source
|
|
| 'stars' // github stars
|
|
| 'forks' // github forks
|
|
| 'license' // github license
|
|
// npm
|
|
| 'version' // npm version
|
|
| 'dt' // alias d18m
|
|
| 'd18m' // npm downloads last 18 months
|
|
| 'dw' // npm downloads weekly
|
|
| 'dm' // npm downloads monthly
|
|
| 'dy' // npm downloads yearly
|
|
|
|
type NpmBadgeTheme = 'flat' | 'flat-square' | 'plastic' | 'for-the-badge' | 'social'
|
|
```
|
|
|
|
### 示例
|
|
|
|
- `<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="source" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="source" />
|
|
- `<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="stars" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="stars" />
|
|
- `<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="forks" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="forks" />
|
|
- `<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="license" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="license" />
|
|
- `<NpmBadge name="vuepress-theme-plume" type="version" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="version" />
|
|
- `<NpmBadge name="vuepress-theme-plume" type="dt" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="dt" />
|
|
- `<NpmBadge name="vuepress-theme-plume" type="d18m" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="d18m" />
|
|
- `<NpmBadge name="vuepress-theme-plume" type="dy" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="dy" />
|
|
- `<NpmBadge name="vuepress-theme-plume" type="dm" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="dm" />
|
|
- `<NpmBadge name="vuepress-theme-plume" type="dw" />` - <NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="dw" />
|
|
|
|
## `<NpmBadgeGroup />`
|
|
|
|
组合多个 npm badge
|
|
|
|
### Props
|
|
|
|
| 名称 | 类型 | 必填 | 默认值 | 说明 |
|
|
| ---------- | --------------- | --------------- | ------ | --------------------------------------- |
|
|
| name | `string` | 否 | `''` | npm 包名，为空则从 `repo` 中获取 |
|
|
| repo | `string` | name 为空时必填 | `''` | 包 github 仓库地址, 格式为 `owner/repo` |
|
|
| items | `string \| NpmBadgeType[]` | 否 | - | 徽章类型列表, 传入 `string` 时用 `','`分隔，会自动转换为 `NpmBadgeType[]` |
|
|
| theme | `NpmBadgeTheme` | 否 | `''` | 徽章主题 |
|
|
| color | `string` | 否 | `''` | 徽章颜色 |
|
|
| labelColor | `string` | 否 | `''` | 徽章标签颜色 |
|
|
| branch | `string` | 否 | `''` | 仓库分支 |
|
|
| dir | `string` | 否 | `''` | 包所在仓库目录，适用于 monorepo 项目 |
|
|
|
|
### Slots
|
|
|
|
`<NpmBadgeGroup />` 支持传入 多个 `<NpmBadge />` 组件。
|
|
|
|
`<NpmBadgeGroup />` 声明的 `Props` 将被注入到 `<NpmBadge />` 组件中。通过这种方式来实现和简化徽章组合。
|
|
|
|
### 示例
|
|
|
|
**输入：**
|
|
|
|
```md :no-line-numbers
|
|
<NpmBadgeGroup
|
|
repo="pengzhanbo/vuepress-theme-plume"
|
|
items="stars,version,dm,source"
|
|
/>
|
|
```
|
|
|
|
**输出：**
|
|
|
|
<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume" items="stars,version,dm,source" />
|
|
|
|
使用 `<slot />` 灵活定义徽章组合：
|
|
|
|
**输入：**
|
|
|
|
```md :no-line-numbers
|
|
<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume">
|
|
<NpmBadge type="stars" />
|
|
<NpmBadge type="version" label="npm" />
|
|
<NpmBadge type="dm" />
|
|
<NpmBadge type="source" />
|
|
</NpmBadgeGroup>
|
|
```
|
|
|
|
**输出：**
|
|
|
|
<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume">
|
|
<NpmBadge type="stars" />
|
|
<NpmBadge type="version" label="npm" />
|
|
<NpmBadge type="dm" />
|
|
<NpmBadge type="source" />
|
|
</NpmBadgeGroup>
|