readme 里面的 badge 怎么来的?

我们看一些知名项目的 README.md 时,经常看到如下图这样的 badge,这些 badge 是怎么来的呢?本文手把手告诉你怎么生成。

这里要分两类,giteegithub 的生成方式不同,gitee 通过仓库里面的 仓库挂件 生成,github 通过 shields.io 生成。下面一一说明~

gitee stars 和 forks

gitee 提供了一个 仓库挂件 菜单,可以生成本仓库的 starforks,官方名字为标准挂件,如下图

标准挂件,有3种样式,点击右下角的"代码" 按钮,可以出现3种类型的代码: HTML, Markdown, Image。默认是HTML,我们要手动点击 Markdown。然后点击右下角的复制按钮可以复制,粘贴到自己的 README.md 文件中。

生成的代码如下:

md 复制代码
[![star](https://gitee.com/codercup/unibest/badge/star.svg?theme=dark)](https://gitee.com/codercup/unibest/stargazers)
[![fork](https://gitee.com/codercup/unibest/badge/fork.svg?theme=dark)](https://gitee.com/codercup/unibest/members)

github 不同

gitee 生成的 stars badge 链接会直接指向 stargazers,即 star 你的仓库的用户;

gitee 生成的 forks badge 链接会直接指向 members,即 fork 你的仓库的用户。

github 中没有这样的链接,只能指向仓库地址。

github starts, forks 和 LICENSE

githubstars, forksLICENSE 是通过 shields.io/badges 生成的,先学一下基本语法,后续可以自己美化 badge,(图里面显示的是 Static Badge,但是这个语法适用于全局)

stars badge

打开 shields.io/badges, 右侧搜索 stars,不出意外地出现了意外,居然没有想要的。(剧透:后面的 forks 是可以搜到结果的),先点击一个最符合的 Github Org's stars.

然后查看菜单,发现了我们要的目标 Github Repo stars

需要上图中箭头的4步,你将得到一个这样的 badge:

长这个样子: 看起来不适合,放在 README.md 里面贼难看。原来还要选择 style,如下图有5种,分别是:flat, flat-square, plastic, for-the-badge, social,默认是 social.

我们看看所有的都长啥样子:笔者很贴心地把所有的style都展示出来了,如下图,看起来 flat 才是我们的真命天子,就选他了~

对了这个时候生成的 badge 是不带 githublogo 的(只有默认的social 才带 logo),长这个样子:

我们需要手动设置 logogithub ,如下图:

最终的链接如下:

md 复制代码
![GitHub Repo stars](https://img.shields.io/github/stars/codercup/unibest?style=flat&logo=github)

到了这里其实还没完,因为这只是一张图片,我们一般会设置成一个连接(就像 gitee 那样,点击可以跳转),指向我们的仓库地址。链接语法如下:

md 复制代码
[<display name>](<your-link>)

只需要把上面的 badge 放到 <display name> 里面就可以了,得到的字符串如下:

md 复制代码
[![GitHub Repo stars](https://img.shields.io/github/stars/codercup/unibest?style=flat&logo=github)](https://github.com/codercup/unibest)

速记地址:shields.io/badges/git-...

forks badge

搜索框,一搜 forks 就出来了

语法跟 stars badge 一样,不再赘述。

速记地址:shields.io/badges/git-...

LICENSE badge

搜索框,一搜 license 就出来了

填入关键信息,即可生成,如下图。

生成的图片: 也是可以加 logo 的,但是我觉得没必要。

速记地址:shields.io/badges/git-...

其他的

其他的如 npm 下载量等,也可以在 https://shields.io/badges 里面搜对应的关键字得到:

再如 ci,可以搜出来,就可以生成对应的 badge

总结

md 复制代码
[![GitHub Repo stars](https://img.shields.io/github/stars/codercup/unibest?style=flat&logo=github)](https://github.com/codercup/unibest)

往期好文

最后把我每天都看的美女分享给大家~养眼啊

相关推荐
Boilermaker199210 分钟前
【Java EE】SpringIoC
前端·数据库·spring
中微子21 分钟前
JavaScript 防抖与节流:从原理到实践的完整指南
前端·javascript
天天向上102436 分钟前
Vue 配置打包后可编辑的变量
前端·javascript·vue.js
芬兰y1 小时前
VUE 带有搜索功能的穿梭框(简单demo)
前端·javascript·vue.js
好果不榨汁1 小时前
qiankun 路由选择不同模式如何书写不同的配置
前端·vue.js
小蜜蜂dry1 小时前
Fetch 笔记
前端·javascript
拾光拾趣录1 小时前
列表分页中的快速翻页竞态问题
前端·javascript
小old弟1 小时前
vue3,你看setup设计详解,也是个人才
前端
Lefan1 小时前
一文了解什么是Dart
前端·flutter·dart
时序数据说1 小时前
IoTDB:专为物联网场景设计的高性能时序数据库
大数据·数据库·物联网·开源·时序数据库·iotdb