Npm 徽章
概述
Npm 徽章组件用于显示 npm 包信息，并提供相关的链接。
徽章由 https://shields.io 提供支持。
使用
组件无需注册，主题会自动按需导入 NpmBadge 、 NpmBadgeGroup 组件。
在 markdown 文件中直接使用即可：
<!-- 在 markdown 中使用 -->
<NpmBadge name="vuepress-theme-plume" type="dm" />
<!-- 并排显示多个 npm badge -->
<NpmBadgeGroup name="vuepress-theme-plume" items="version,dm" />
<NpmBadge />
单个 npm badge
Props
npm 包名，为空则从 repo 中获取
包 github 仓库地址，格式为 owner/repo，当 name 为空时必填
徽章类型
徽章主题
徽章标签
徽章颜色
徽章标签颜色
仓库分支。仅在同时设置了 dir 时才会参与链接拼接，单独设置不起作用。
包所在仓库目录，适用于 monorepo 项目。设置后，source 等 GitHub 徽章的链接会指向 /{repo}/tree/{branch}/{dir}
Types
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="stars" />-<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="forks" />-<NpmBadge repo="pengzhanbo/vuepress-theme-plume" type="license" />-<NpmBadge name="vuepress-theme-plume" type="version" />-<NpmBadge name="vuepress-theme-plume" type="dt" />-<NpmBadge name="vuepress-theme-plume" type="d18m" />-<NpmBadge name="vuepress-theme-plume" type="dy" />-<NpmBadge name="vuepress-theme-plume" type="dm" />-<NpmBadge name="vuepress-theme-plume" type="dw" />-
<NpmBadgeGroup />
组合多个 npm badge
Props
npm 包名，为空则从 repo 中获取
包 github 仓库地址，格式为 owner/repo，当 name 为空时必填
徽章类型列表, 传入 string 时用 ','分隔，会自动转换为 NpmBadgeType[]
徽章主题
徽章颜色
徽章标签颜色
仓库分支
包所在仓库目录，适用于 monorepo 项目
Slots
<NpmBadgeGroup /> 支持传入多个 <NpmBadge /> 组件。
<NpmBadgeGroup /> 声明的 Props 将被注入到 <NpmBadge /> 组件中。通过这种方式来实现和简化徽章组合。
示例
输入：
<NpmBadgeGroup
repo="pengzhanbo/vuepress-theme-plume"
items="stars,version,dm,source"
/>输出：
使用 <slot /> 灵活定义徽章组合：
输入：
<NpmBadgeGroup repo="pengzhanbo/vuepress-theme-plume">
<NpmBadge type="stars" />
<NpmBadge type="version" label="npm" />
<NpmBadge type="dm" />
<NpmBadge type="source" />
</NpmBadgeGroup>输出：
