当前位置：首页 > news >正文

README.md文档如何添加丰富多彩的badge标识,五颜六色的tag标签

news 来源：原创 2025/5/1 7:10:30

标签制作网站：https://shields.io/

以下内容以获取github上的vue项目的stars为例

进入网站后找到一下目录

在这里插入图片描述

配置项里面进行参数的配置

我们在user参数中输入vuejs/vue 输入后点击执行就可以生成了
在这里插入图片描述

其他参数可以自行配置例如这里我们配置了这两项

在这里插入图片描述

就可以获取到不同的样式啦

在这里插入图片描述

配置说明：

Author：可以换成你想展示的label文字；
Ritusan：Author对应的值，换成你自己的；
orange：标签label颜色；

在标签制作网站页面下拉，直到看到和下方图片一样的 Your Badge Static，就可以开始自定义配置了：

依次填完 label，message，color 三个参数之后，点击 Make Badge，此时页面会跳转到一个新页面，你需要的就是复制新页面的地址为自己所用；

<img src="https://img.shields.io/github/languages/code-size/vuejs/vue" alt="code size"/>
<img alt="GitHub last commit" src="https://img.shields.io/github/last-commit/vuejs/vue">
<img alt="GitHub contributors" src="https://img.shields.io/github/contributors/vuejs/vue">
<img alt="GitHub User's stars" src="https://img.shields.io/github/stars/vuejs%2Fvue">

在这里插入图片描述

配置说明

vuejs：作者github名字；
vue：仓库名字；

last-commit: 最后一次提交的时间;

vuejs/vue: 用户的某个项目的stars数量; 如果不带/vue则是用户获取的stars数量

… 更多内容不在一一展示,需要可以去网站https://shields.io/自行探索