[玩转 Github] — 如何为仓库项目生成漂亮的徽章

这是我参与8月更文挑战的第3天，活动详情查看：8月更文挑战

前言

随便打开两个 Github 仓库，你是否会发现很多官方插件仓库都会带有如下图所示的小徽章？再去看看你自己的仓库里，是不是 README.md 文档空空如也，只有干涩的几行文字，今天小周同学就带着你一起继续美化我们的 Github 仓库。

更多《玩转 Github》系列文章：

• [玩转 Github] — 为你的 Github 添加一张与众不同的名片

生成徽章

工欲善其事，必先利其器，其实在前端很多事情我们只需要站在巨人的肩膀上即可，生成徽章其实非常的简单，前人已经帮我们做好了很多易用的小公举，今天给大家介绍几个帮助快速生成徽章的网站，记得点赞收藏哦：

• Shields.io 
• Badgen.net
• NodeICO

接下来我就分别用这三个徽章生成器，来给大家简单介绍如何快速方便的生成好看的徽章，然后美化我们的 Github 仓库。

生成静态徽章

我们来利用第一个网站 Shields.io ，来给我们的 next-antd-scaffold 仓库增加一个 MIT License 的徽章。

打开网站之后，我们找到如下图所示的位置，键入三个信息，然后点击生成徽章：

我这边键入的内容是 license - MIT - blue，最后生成的效果如下：

可以看到，非常的方便，既然写了，那么就在弄一个 build-passing-green 的徽章一起，接下来把它们放入到仓库 README.md 文档里，效果如下：

生成动态徽章

上面介绍了静态徽章的生成以及第一个徽章网站的使用方法，接下来，我们来用第二个网站 Badgen.net 来帮助我们生成一些动态徽章。

这次选中仓库，dynamic-antd-theme，这是笔者开发的一个小 react 插件，我这边想通过动态的 Badge 来获取最新可用的 release，这边有一个 scheme 如下： https://badgen.net/github/release/:username/:repo/stable，其中 :username = 用户名 :repo = 仓库名，效果如下：

可以看到，仓库的 release 确实是 0.8.2，确实自动帮我们生成了动态徽章，同样也是把这个 Badge 添加到我们仓库的 READMD.md 文档中，来看看效果：

生成 NPM 徽章

介绍完前面两个网站以及徽章的两种用法，接下来我们来介绍第三个网站 NodeICO 以及第三种类型徽章的用法，那就是针对各种 npm 包生成的 npm 徽章，还是不讲那么多废话，我们直接上 Demo 看效果就行，这里以 mini-dynamic-antd-theme 为例，为它生成一个 npm 徽章：

最后的效果：

可以看到生效了，不过下面那个 After gip: xxx 有点不好看，既然本文学的就是徽章，那么就来通过自动徽章的形式来生成一下

最后的仓库效果：

总结

关于生成项目相关的各种徽章，就简单介绍到这里，上面每个网站其实都能做很多事（静态徽章/动态徽章等...），这里只是为了帮助大家了解每一个网站的使用方法，所以拿出一个点来进行了介绍，如果你们感兴趣，可以去每个网站里面看看用用。

总的来说说大不大说小不小的点，对以后开源写各种插件还是有点帮助，最重要的是如果进行面试当面试官打开你的仓库的时候，可能会有眼前一亮的感觉～