文章目录
1. 炫酷的标签
1.1 常见标签
1. Open in Colab
[![Open In Colab](https://colab.research.google.com/assets/colab-badge.svg)](https://colab.research.google.com/github/bipinKrishnan/fastai_course/blob/master/bear_classifier.ipynb)
其实语法很简单,就是将显示图像作为链接名称(图像就直接是colab的图标),后面再跟上对应的链接目标
2. Binder
[![Binder](https://mybinder.org/badge_logo.svg)](https://mybinder.org/v2/gh/bipinKrishnan/fastai_course/master)
结构同上。
3. 多个标签并列
这时候需要使用一点前端的小知识
<p>
<a href="https://github.com/zhanghang1989?tab=followers"> <img src="https://img.shields.io/github/followers/zhanghang1989?label=Followers&style=plastic" height="25px" alt="github follow" /> </a>
<a href="https://hangzhang.org/"> <img src="https://img.shields.io/badge/ℋ-homepage-3875B7.svg?labelColor=21438A&style=plastic" height="25px" alt="Hang Zhang">
<a href="https://scholar.google.com/citations?user=gCoWdkUAAAAJ"><img src="https://img.shields.io/badge/scholar-4385FE.svg?&style=plastic&logo=google-scholar&logoColor=white" alt="Google Scholar" height="25px"> </a>
<a href="mailto:zhang.hang@rutgers.edu"> <img src="https://img.shields.io/badge/gmail-%23D14836.svg?&style=plastic&logo=gmail&logoColor=white" height="25px" alt="Email">
<a href="https://www.linkedin.com/in/zhanghang0704/"><img src="https://img.shields.io/badge/linkedin-006CAC.svg?&style=plastic&logo=linkedin&logoColor=white" height="25px" alt="LinkedIn"> </a>
<a href="https://www.zhihu.com/people/zhanghang0704"><img src="https://img.shields.io/badge/知乎-0079FF.svg?style=plastic&logo=zhihu&logoColor=white" height="25px" alt="知乎"></a>
<a href="https://hangzhang.org/cvHangZhang/cvHangZhang.pdf"> <img src="https://img.shields.io/badge/-CV-black?style=plastic" height="25px"> </a>
</p>
只要把链接改成自己对应的账号url链接就行,这里使用a标签,是为了让标签大小可调节。如果无所谓这个东西的话,其实还是直接使用markdown语法来实现(但是很诡异,如果使用markdown的语法,会显示 外链图片无法转存。。。那就还是使用这种html的标签写法好了)
html的方式,如下
<a href="https://github.com/sindresorhus/123"><img src="https://camo.githubusercontent.com/abb97269de2982c379cbc128bba93ba724d8822bfbe082737772bd4feb59cb54/68747470733a2f2f63646e2e7261776769742e636f6d2f73696e647265736f726875732f617765736f6d652f643733303566333864323966656437386661383536353265336136336531353464643865383832392f6d656469612f62616467652e737667"></a>
markdown的方式,如下:
[![awesome](https://camo.githubusercontent.com/abb97269de2982c379cbc128bba93ba724d8822bfbe082737772bd4feb59cb54/68747470733a2f2f63646e2e7261776769742e636f6d2f73696e647265736f726875732f617765736f6d652f643733303566333864323966656437386661383536353265336136336531353464643865383832392f6d656469612f62616467652e737667)](https://github.com/sindresorhus/awesome)
html的写法:
<a href="https://creativecommons.org/licenses/by/4.0/"><img src="https://camo.githubusercontent.com/bca967b18143b8a5b2ffe78bd4a1a30f6bc21de83bd8336f748e96498af38b38/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f4c6963656e73652d43432532304259253230342e302d6c69676874677265792e737667
"></a>
其实最关键的地方是,如何去寻找这些标签的图像位置。。
6. 文档版本
html的写法:
<a href="https://creativecommons.org/licenses/by/4.0/"><img src="https://camo.githubusercontent.com/33126b4770aa6f169b2a93e75678d52647f19972fa8d205e478049966e3b1a07/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f646f63732d737461626c652d627269676874677265656e2e7376673f7374796c653d666c6174266c6f6e6743616368653d74727565
"></a>
7. python语言版本
html写法
<a href="https://github.com/allegroai/clearml"><img src="https://camo.githubusercontent.com/f60861e75a851f69a1fb8a5c671ef233147b7781a13dae226dcc2c32166654c0/68747470733a2f2f696d672e736869656c64732e696f2f707970692f707976657273696f6e732f636c6561726d6c2e737667
"></a>
1.2 标签图像来源
其实稍微观察一下,就知道上面这些公用标签,很多都来自于:https://camo.githubusercontent.com
这个网址。可惜打不开,改变搜索方式,
得到关于Camo的信息,包括以下链接:
但是这似乎只是一种保证图像可以及时更新/同步的方式。
感谢:GitHub Action to clear cache on Images in README
终于找到这些链接的正确名称了,不是tags,也不是images,而是badges
进而搜索找到了正确的位置:
2. 所有标签
2.1 标签列表
参考这两个网页: 150+ Badges for GitHub 和 github-badges/shields
其中,shields这个组织自主维护了github的badges图像服务,帮助人们快速找到/生成自己想要的badges图像。(所以可以看到下面的图像链接都是shields来源,而上面都是camo.githubusercontent来源)
只需要把图像链接改成对应的badges的url即可
<a><img src="https://img.shields.io/badge/WhatsApp-25D366?style=for-the-badge&logo=whatsapp&logoColor=white
"></a>
上面代码显示为(没加链接,不会跳转,就是个图):
为了防止有些人喷我抄袭,这里只放几个示意的截图,想要看全部和直接复制url链接的,还是去源链接(不要喷我抄袭,我标明了参考来源,我就是转运!!!搬运工!!!)
对应的github项目地址为:https://github.com/Envoy-VC/Badges-for-GitHub