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改成HexoGitHub Repo stars
添加Hexo小logoGitHub 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账号即可 授权地址