我们看一些知名项目的 README.md 时，经常看到如下图这样的 badge，这些 badge 是怎么来的呢？本文手把手告诉你怎么生成。
这里要分两类，gitee 和 github 的生成方式不同，gitee 通过仓库里面的 仓库挂件 生成，github 通过 shields.io 生成。下面一一说明~
gitee stars 和 forks
gitee 提供了一个 仓库挂件 菜单，可以生成本仓库的 star 和 forks，官方名字为标准挂件，如下图
标准挂件，有3种样式，点击右下角的"代码" 按钮，可以出现3种类型的代码： HTML, Markdown, Image。默认是HTML，我们要手动点击 Markdown。然后点击右下角的复制按钮可以复制，粘贴到自己的 README.md 文件中。
生成的代码如下：
md
[](https://gitee.com/codercup/unibest/stargazers)
[](https://gitee.com/codercup/unibest/members)与
github不同
gitee生成的stars badge链接会直接指向stargazers，即star你的仓库的用户；
gitee生成的forks badge链接会直接指向members，即fork你的仓库的用户。
github中没有这样的链接，只能指向仓库地址。
github starts, forks 和 LICENSE
github 的 stars, forks 和 LICENSE 是通过 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 是不带 github 的 logo 的(只有默认的social 才带 logo)，长这个样子：
我们需要手动设置 logo 为 github ，如下图：
最终的链接如下：
md
到了这里其实还没完，因为这只是一张图片，我们一般会设置成一个连接（就像 gitee 那样，点击可以跳转），指向我们的仓库地址。链接语法如下：
md
[<display name>](<your-link>)只需要把上面的 badge 放到 <display name> 里面就可以了，得到的字符串如下：
md
[](https://github.com/codercup/unibest)forks badge
搜索框，一搜 forks 就出来了
语法跟 stars badge 一样，不再赘述。
LICENSE badge
搜索框，一搜 license 就出来了
填入关键信息，即可生成，如下图。
生成的图片： 
也是可以加 logo 的，但是我觉得没必要。
其他的
其他的如 npm 下载量等，也可以在 https://shields.io/badges 里面搜对应的关键字得到：
再如 ci，可以搜出来，就可以生成对应的 badge
总结
- gitee 通过
仓库挂件直接生成stars和forks的badge - github 的
badge通过https://shields.io/badges得到：- stars 链接：shields.io/badges/git-...
- forks 链接：shields.io/badges/git-...
- license 链接：shields.io/badges/git-...
- 形如：
md
[](https://github.com/codercup/unibest)往期好文
- 【2023】uniapp+vue3+ts超实用模板
- 【2023】uniapp+vue3+ts超实用模板（续）
- 【2024】uniapp+vue3+ts超实用模板（终）
- 【2024】uniapp+vue3+ts超实用模板（番外篇）
最后把我每天都看的美女分享给大家~养眼啊
