简介
@rpl/badge-up 是一个 npm 包，可以帮助开发者生成自定义的徽章（Badge），以便在项目的 README 等文档中展示项目状态、版本号等信息。本教程将详细介绍如何使用 @rpl/badge-up。
安装
首先，请确保在本地已经安装了 Node.js 运行环境。然后打开终端（Terminal），输入以下命令：
npm install @rpl/badge-up
即可完成安装。
使用
@rpl/badge-up 的用法非常简单，只需要调用其提供的 API，指定想要生成的徽章的样式和文字内容即可。以下是 @rpl/badge-up 的主要 API：
badgeUp(svg, options?)
该方法用于生成一个 SVG 格式的徽章图片。其中，svg 参数是要生成的徽章样式，options 参数是一个对象，用于指定徽章的具体文本内容。
以下是 options 参数可用的属性：
label：徽章的左侧文本，必需。message：徽章的右侧文本，必需。color：徽章的标签颜色，不指定则自动根据文本内容生成。logo：徽章右侧的 logo 图片地址，可选。
以下是一个基本示例：
const { badgeUp } = require('@rpl/badge-up');
const badgeSvg = badgeUp('flat', { label: 'build', message: 'passing' });
console.log(badgeSvg);输出结果如下所示：
<svg xmlns="http://www.w3.org/2000/svg" width="86.6" height="20"><linearGradient id="b" x2="0" y2="100%"><stop offset="0" stop-color="#bbb" stop-opacity=".1"/><stop offset="1" stop-opacity=".1"/></linearGradient><clipPath id="a"><rect width="86.6" height="20" rx="3" fill="#fff"/></clipPath><g clip-path="url(#a)"><rect width="45.4" height="20" fill="#555"/><rect x="45.4" width="41.2" height="20" fill="#4c1"/><rect width="86.6" height="20" fill="url(#b)"/></g><g fill="#fff" text-anchor="middle" font-family="DejaVu Sans,Verdana,Geneva,sans-serif" font-size="11"><text x="23.15" y="15" fill="#010101" fill-opacity=".3">build</text><text x="23.15" y="14">build</text><text x="65.7" y="15" fill="#010101" fill-opacity=".3">passing</text><text x="65.7" y="14">passing</text></g></svg>
将上述 SVG 代码复制到浏览器中打开，即可看到生成的徽章图片。默认情况下，@rpl/badge-up 会生成一个 Flat 样式的徽章，左侧文本为 label 参数指定的内容，右侧文本为 message 参数指定的内容。
@rpl/badge-up 另外还有一些辅助函数，用于帮助开发者快速生成某种特定样式的徽章。如：
plasticBadge(options)flatBadge(options)flatSquareBadge(options)forTheBadge(options)
这些函数的 options 参数与 badgeUp 相同。以下是一个使用 forTheBadge 函数生成徽章的示例：
const { forTheBadge } = require('@rpl/badge-up');
const badgeSvg = forTheBadge({ label: 'Made With', message: 'JavaScript' });
console.log(badgeSvg);输出结果如下所示：
<svg xmlns="http://www.w3.org/2000/svg" width="131.5" height="19" viewBox="0 0 131.5 19"><rect x="0.5" y="0.5" width="130.5" height="18" rx="3" fill="#c065db"/><path d="M42 6.2c4.4-4.4 4.4-11.6 0-16S35.4-1.1 31.1 3.3L11.9 22.5c-1.2 1.2-1.2 3.1 0 4.2s3.1 1.2 4.2 0l19.2-19.2c1.3-1.3 3.3-1.3 4.6 0l29.2 29.2c1.2 1.2 3.1 1.2 4.2 0 1.2-1.2 1.2-3.1 0-4.2L42 6.2z" fill="#fff"/></svg>
自定义样式
@rpl/badge-up 提供了若干种默认样式，但可能并不能完全满足您的需求。不用担心，在 @rpl/badge-up 中可以非常容易地自定义样式。
@rpl/badge-up 的样式定义对象必须包含以下属性：
default: 默认样式。styles: 其他样式，其中每个样式都应该包含一个subject属性（即左侧文本）和一个color属性（即标签颜色）。
以下是一个自定义样式的示例代码：
-- -------------------- ---- -------
----- - ------- - - -------------------------
----- ----------- - -
-------- -
-------- ---------
------ -------
---- ------
--
------- -
---------- - -------- ------------ ------ --------- --
-------- - -------- ---------- ------ -------- --
-------- - -------- ---------- ------ ------- --
--
--
----- -------- - -------------------- - ------ ------------ -------- ---- ---
----------------------在上述代码中，定义了一个名为 customStyle 的自定义样式对象，其中 default 属性指定了默认样式，styles 属性指定了其他样式。可以看到，自定义样式所需的定义非常简单，不过需要理解其中的属性含义。
结论
@rpl/badge-up 是一个非常实用的 npm 包，可以帮助我们快速生成自定义的徽章，方便展示项目的状态信息。学习使用 @rpl/badge-up 既可以提升项目的文档可读性，也可以提高自身在前端开发方面的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedc6a0b5cbfe1ea0612263