概述

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

Name:name

可选

Type:string

npm 包名，为空则从 repo 中获取

Name:repo

可选

Type:string

包 github 仓库地址，格式为 owner/repo，当 name 为空时必填

Name:type

可选

Type:NpmBadgeType

徽章类型

Name:theme

可选

Type:NpmBadgeTheme

默认值:'flat'

徽章主题

Name:label

可选

Type:string

默认值:''

徽章标签

Name:color

可选

Type:string

默认值:'#32A9C3'

徽章颜色

Name:labelColor

可选

Type:string

默认值:'#1B3C4A'

徽章标签颜色

Name:branch

可选

Type:string

默认值:'main'

仓库分支

Name:dir

可选

Type:string

包所在仓库目录，适用于 monorepo 项目

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

Name:name

可选

Type:string

npm 包名，为空则从 repo 中获取

Name:repo

可选

Type:string

包 github 仓库地址，格式为 owner/repo，当 name 为空时必填

Name:items

可选

Type:string | NpmBadgeType[]

默认值:[]

徽章类型列表, 传入 string 时用 ','分隔，会自动转换为 NpmBadgeType[]

Name:theme

可选

Type:NpmBadgeTheme

徽章主题

Name:color

可选

Type:string

徽章颜色

Name:labelColor

可选

Type:string

徽章标签颜色

Name:branch

可选

Type:string

仓库分支

Name:dir

可选

Type:string

包所在仓库目录，适用于 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>

输出：

贡献者

pengzhanbo

更新日志

2026/9/12 10:04

查看所有更新日志

• 7a454-feat(plugin-md-power): drop optional tag in field container (#987)于 2026/9/12
• 1d04d-feat: add builtin auto-import-components (#932)于 2026/9/9
• 16c2d-docs: update field container于 2026/6/8
• 97a5b-docs: fix typo于 2026/3/8
• 4d236-feat(theme)!: add collections support (#704)于 2025/10/7
• 4f60b-style: lint fix于 2025/6/24
• d1496-docs: update docs于 2025/4/30
• 0fd6c-refactor(theme): improve types and flat config (#524)于 2025/3/15
• e3b1c-docs: improve docs于 2024/8/18
• ac898-docs: update docs于 2024/7/27

编辑此页

上一页Repo 卡片

下一页轮播图