Github Badge 使用教程

Github Badge即在Github README文件中常出现的小图标,用于实时显示相关信息。

一、使用效果

使用效果

使用这类Badge后,能让README更加美观,同时让人能实时了解到项目相关的变化。

二、如何使用

以显示github仓库stars数为例

  • 打开Shields.io官网

  • 选择Social选项,然后点击Github Repo stars,进入以下界面

  • 填写相应的user即github用户,repo想要显示stars的仓库名,style图标风格选择,override label替换输出图标的stars内容,named logo表示可添加在stars前的小logo

  • 然后可以选择不同的复制类型,以下是markdown的语法复制结果

    1
    ![GitHub Repo stars](https://img.shields.io/github/stars/hexojs/hexo?style=flat-square)
  • 最后将复制的语句粘贴到README文件中就行了

普通效果:GitHub Repo stars
flat-square效果:GitHub Repo stars
override label改成Hexo:GitHub Repo stars
添加Hexo小logo:GitHub Repo stars

三、自定义Badge内容

在官网的YourBadge中,制作自定义Badge

如输入label:Olvi73 message:Blog color:orange

1
2
3
4
5
6
7
8
9
//可供选择的颜色
brightgreen
green
yellowgreen
yellow
orange
red
lightgrey
blue

显示效果:


如果想要在自定义徽标上添加链接可以使用以下格式

1
2
3
4
5
6
[![badge-link]][link]

以下两句放在文档最后,或者直接将链接写在上面的代码中

[badge-link]: https://img.shields.io/badge/%E6%95%99%E7%A8%8B-%E5%BE%BD%E6%A0%87%E4%BD%BF%E7%94%A8-brightgreen
[link]: https://olvi73.github.io/2020/10/12/Github%20Badge%20%E4%BD%BF%E7%94%A8%E6%95%99%E7%A8%8B/

带有链接的显示效果:badge-link

四、常见问题

徽标的访问速度过慢,导致在README中打开不了,或者无法显示。
官网提示:

If your GitHub badge errors, it might be because you hit GitHub’s rate limits. You can increase Shields.io’s rate limit by adding the Shields GitHub application using your GitHub account.

解决方法:授权Shields.io到你的github账号即可 授权地址