之前在看一些项目时,readme文件中往往有如下形式的一些标签:

感觉使用这些标签可以鲜明地标示项目的主要类别和使用的相关技术,我下载了相关的readme文件,看了一下markdown语言中的图片的网址,大致看了一下,终于搞懂了原理。标签制作网址是这个: https://shields.io,打开网站拉到下面,如下:

准确来说是这个:

试试在label、message、color分别输入评分、★★★☆☆、brightgreen后,再点击Make Badge,效果是这样的:

复制图片网址即可在需要的地方使用。
一些技巧
上面的网址如下:
https://img.shields.io/badge/评分-★★★☆☆-brightgreen.svg
分析这个网址即可发现不必每次都在这个网站制作,只需要替换相关部分字符即可。
eg:
更换颜色:
https://img.shields.io/badge/评分-★★★☆☆-blue.svg
效果:
KqB0g6tEKe.png
更换字符:
https://img.shields.io/badge/stars-★★★★★-brightgreen.svg
效果:
OiKVYoKDCf.png
另外
这个网站还有许多其它的图片制作工具,感兴趣可以自己研究一下o(^∀^)o
网友评论