阅读 260

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

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

前言

本文大约花费你5分钟,结合更多的玩转 Github 系列,可以让你的 Github 看起来与众不同,更具吸引力。

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

image.png

image.png

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

生成徽章

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

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

生成静态徽章

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

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

image.png

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

image.png

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

image.png

生成动态徽章

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

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

image.png

image.png

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

image.png

生成 NPM 徽章

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

image.png

最后的效果:

image.png

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

image.png

最后的仓库效果:

image.png

实话实说,npm 仓库徽章有点丑不协调😂,不过也就这样了,只是为了给大家演示一下方法而已~

总结

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

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

文章分类
前端
文章标签