Github项目标签微标微章样式

经常会在GitHub / gitee上项目介绍的README.md文件中看到许多漂亮的标签，这些标签可以显示version、stars、license等信息，非常眼馋。这次了解一下怎么制作的。

使用shields.io制作

我们可以通过 https://shields.io/badges/static-badge这个网站在线制作图标，填写label、message、color三个字段，点击execute Badge就可以生成图标，还有其他功能可以自己去体验。

徽标图标格式

https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg

带链接的徽标

[![](https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg)]({linkUrl})

变量说明

徽标标题：徽标左边的文字
徽标内容：徽标右边的文字
徽标颜色：徽标右边的背景颜色，可以是颜色的16进制值，也可以是颜色英文。支持的颜色英文如下：

更多效果

https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg?{参数名1}={参数值1}&{参数名2}={参数值2}

参数说明：
style：控制徽标主题样式，style的值可以是： plastic | flat | flat-square | social 。
label：用来强制覆盖原有徽标的标题文字。
colorA：控制左半部分背景颜色，只能用16进制颜色值作为参数，不能使用颜色英文。
colorB：控制右半部分背景颜色。

https://img.shields.io/badge/rocketmq-@liutx-orange.svg?style=plastic

https://img.shields.io/badge/rocketMQ-%40liutx-blue?style=plastic&label=aaa&labelColor=blue&color=red

html方式制作自己的微标

css样式

/*标签整体样式*/
.github-badge {
  margin-left: 5px;
  display: inline-block;
  border-radius: 4px;
  text-shadow: none;
  color: #fff;
  line-height: 15px;
  background-color: #abbac3;
  margin-bottom: 5px;
  font-size: 12px;
}
/* 超链接下划线隐藏 */
.github-badge a {
  text-decoration: none;
}
/* 标签左侧样式 */
.github-badge .badge-subject {
  background-color: #4d4d4d;
  padding: 4px 4px 4px 6px;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
}
/* 标签右侧样式 */
.github-badge .badge-value {
  padding: 4px 6px 4px 4px;
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
/* 标签背景色，随意自定义，渐变色也可以 */
.github-badge .bg-blue {
  background-color: #007ec6;
}
.github-badge .bg-pink {
    background-color: #F26BAE !important;
}
.github-badge .bg-green {
  background-color: #4dc820;
}
.github-badge .bg-red {
    background-color: #e05d44 !important;
}
.github-badge .bg-orange {
  background-color: orange;
}

.github-badge .bg-gradient {
  background: linear-gradient(to right, #3ca5f6, #a86af9);
}
.github-badge .bg-gradient {
  background: linear-gradient(to right, #3ca5f6, #a86af9);
}
.github-badge .bg-violet {
  background-color: #8833d7;
}
.github-badge .bg-brightgreen {
    background-color: #4DC820 !important;
}
.github-badge .bg-blueviolet {
    background-color: #8833D7 !important;
}
.github-badge .bg-lightgrey {
    background-color: #9F9F9F !important;
}

html标签

  <div class="github-badge">
    <span class="badge-subject">Powered</span><span class="badge-value bg-blue">Hexo</span>
  </div>
  <div class="github-badge">
    <span class="badge-subject">Hosted</span><span class="badge-value bg-brightgreen">GitHub</span>
  </div>
  <div class="github-badge">
    <span class="badge-subject">DNR</span><span class="badge-value bg-firebrick">Aliyun</span>
  </div>
  <div class="github-badge">
    <span class="badge-subject">CDN</span><span class="badge-value bg-orange">jsDelivr</span>
  </div>
  <div class="github-badge">
    <span class="badge-subject">PictureBed</span><span class="badge-value bg-blueviolet">SM.MS</span>
  </div>
  <div class="github-badge">
    <span class="badge-subject">Theme</span><span class="badge-value bg-blue">Material X</span>
  </div>
  <div class="github-badge">
    <span class="badge-subject"><i class="fa fa-copyright"></i>aaaaa</span><span class="badge-value bg-lightgrey">BY-NC-SA 4.0</span>
  </div>
<div class="github-badge">
  <a style="color:#fff" href="https://hexo.io/" target="_blank" title="由 Hexo 强力驱动">
    <span class="badge-subject">
      <!-- fa图标，也支持阿里图标 -->
      <i class="fa fa-copyright"></i>
      Powered
    </span>
    <span class="badge-value bg-blue">
      Hexo
    </span>
  </a>
</div>