嘿，刚好我之前研究过这类效果！你看到的那些CDNJS、NPM Version这类彩色标签，其实都是动态生成的徽章（Badges），业内最常用的工具就是Shields.io，完全能实现reactstrap README里的那种效果。下面我给你一步步拆解：

核心原理 #

这些彩色标签本质是带样式的图片，你只需要把Shields.io生成的图片链接插入到Markdown里就行，GitHub的README是直接支持图片渲染的。

常用徽章的生成方法 #

我把reactstrap用到的几个徽章的写法给你列出来，你替换成自己的项目信息就能用：

• NPM Version徽章：显示你的npm包当前版本，样式和颜色会自动适配

  ![NPM Version](https://img.shields.io/npm/v/你的包名.svg?style=flat-square)
  

  比如reactstrap的就是：

  ![NPM Version](https://img.shields.io/npm/v/reactstrap.svg?style=flat-square)
  

• CDNJS徽章：显示CDNJS上你的包的版本

  ![CDNJS](https://img.shields.io/cdnjs/v/你的包名.svg?style=flat-square)
  

• Build Status徽章：如果用GitHub Actions做CI，直接用这个格式（替换成你的仓库用户名、仓库名和工作流文件名）

  ![Build Status](https://github.com/你的用户名/仓库名/actions/workflows/你的工作流文件名/badge.svg)
  

• Coverage Status徽章：比如用Codecov统计测试覆盖率，写法是（替换成你的仓库用户名和仓库名）：

  ![Coverage Status](https://img.shields.io/codecov/c/github/你的用户名/仓库名.svg?style=flat-square)
  

• License徽章：显示你的项目许可证类型（比如MIT），替换成你的包名即可：

  ![License](https://img.shields.io/npm/l/你的包名.svg?style=flat-square)
  

样式自定义 #

reactstrap用的是flat-square（扁平方形）样式，你还可以换成其他样式，比如plastic（圆润默认款）、for-the-badge（粗体大徽章），只需要修改链接里的style参数就行。

给徽章加跳转功能 #

要是想让用户点击徽章跳转到对应页面（比如点击NPM徽章跳转到你的npm包详情页），可以把图片嵌套在Markdown链接里，把括号里的内容替换成你的目标页面链接就行：

[![NPM Version](https://img.shields.io/npm/v/你的包名.svg?style=flat-square)](你的目标页面链接)

最终效果示例 #

把这些徽章放在一起，就和reactstrap的README顶部效果一样了：

[![NPM Version](https://img.shields.io/npm/v/reactstrap.svg?style=flat-square)](你的npm包页面链接)
[![CDNJS](https://img.shields.io/cdnjs/v/reactstrap.svg?style=flat-square)](你的CDNJS页面链接)
[![Build Status](https://github.com/reactstrap/reactstrap/actions/workflows/test.yml/badge.svg)](你的CI工作流页面链接)
[![Coverage Status](https://img.shields.io/codecov/c/github/reactstrap/reactstrap.svg?style=flat-square)](你的覆盖率统计页面链接)
[![License](https://img.shields.io/npm/l/reactstrap.svg?style=flat-square)](你的许可证文件页面链接)

这样操作下来，你就能轻松在自己的README里实现同款彩色标签啦！

内容的提问来源于stack exchange，提问作者Thomas James Thorstensson