likes
comments
collection
share

Github 仓库 README.md 里面的 badge 怎么生成的?

作者站长头像
站长
· 阅读数 4

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

Github 仓库 README.md 里面的 badge 怎么生成的?

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

gitee stars 和 forks

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

Github 仓库 README.md 里面的 badge 怎么生成的?

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

Github 仓库 README.md 里面的 badge 怎么生成的?

生成的代码如下:

[![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)

点击进去会得到如下2图:

Github 仓库 README.md 里面的 badge 怎么生成的?

Github 仓库 README.md 里面的 badge 怎么生成的?

github 不同

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

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

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

github starts, forks 和 LICENSE

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

Github 仓库 README.md 里面的 badge 怎么生成的?

举个例子,如下图,

Github 仓库 README.md 里面的 badge 怎么生成的?

填入 node->=18-green 得到: Github 仓库 README.md 里面的 badge 怎么生成的?

stars badge

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

Github 仓库 README.md 里面的 badge 怎么生成的? 然后查看菜单,发现了我们要的目标 Github Repo stars

Github 仓库 README.md 里面的 badge 怎么生成的?

Github 仓库 README.md 里面的 badge 怎么生成的?

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

Github 仓库 README.md 里面的 badge 怎么生成的?

长这个样子:Github 仓库 README.md 里面的 badge 怎么生成的? 看起来不适合,放在 README.md 里面贼难看。原来还要选择 style,如下图有5种,分别是:flatflat-squareplasticfor-the-badgesocial,默认是 social.

Github 仓库 README.md 里面的 badge 怎么生成的?

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

Github 仓库 README.md 里面的 badge 怎么生成的?

对了这个时候生成的 badge 是不带 githublogo 的(只有默认的social 才带 logo),长这个样子:Github 仓库 README.md 里面的 badge 怎么生成的?

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

Github 仓库 README.md 里面的 badge 怎么生成的?

最终的链接如下:

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

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

[<display name>](<your-link>)

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

[![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 就出来了

Github 仓库 README.md 里面的 badge 怎么生成的? Github 仓库 README.md 里面的 badge 怎么生成的?

Github 仓库 README.md 里面的 badge 怎么生成的?

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

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

LICENSE badge

搜索框,一搜 license 就出来了

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

Github 仓库 README.md 里面的 badge 怎么生成的?

生成的图片: Github 仓库 README.md 里面的 badge 怎么生成的? 也是可以加 logo 的,但是我觉得没必要。

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

其他的

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

Github 仓库 README.md 里面的 badge 怎么生成的?

Github 仓库 README.md 里面的 badge 怎么生成的?

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

Github 仓库 README.md 里面的 badge 怎么生成的?

总结

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

往期好文

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

Github 仓库 README.md 里面的 badge 怎么生成的?