github的小徽章

前几天折腾 github 的 readme 文档真的烦死了，好在昨天弄好了，今天写一下，记录一下坑。

先看看效果吧 ==> 戳这

我一开始看到这个就会想这有什么难的，就用markdown语法引入几张图片而已嘛！

事实并非如此，这里面的坑多着呢！

图标来源

有些图标是和项目实际情况同步的，例如下载数量、 build status ，

这个是真实的实时反映下载量的，所以肯定要和项目联系起来。还有build status：

这些就要用到 shields.io 了,复杂一点的图标可能还会用到 travis-ci 等工具

下面是几篇图标用法文章：

travis 使用时需要注意的是：

必须要对应你的项目
travis 配置文件必须要上传，且要注意传到的分支，使用时要带上分支名

怎么使用

使用的过程很是抓狂。

如果用 shields.io 推荐的方法，

1	[![CocoaPods](https://img.shields.io/cocoapods/l/AFNetworking.svg)]()

可以引入，但是不能让他居中为了让他居中，还需要加上html标签

<p align='center'>
[![CocoaPods](https://img.shields.io/cocoapods/l/AFNetworking.svg)]()
<!-- 如果是多个图标的话 中间不能用换行，否则markdown会解析为 p 标签破坏原有结构 导致强行换行 -->
[![CocoaPods](https://img.shields.io/cocoapods/l/AFNetworking.svg)]()
</p>

现在传上github试试看。。你可能会发现怎么没有图标变成了一串文字， markdown的语法没有解析这还是 html标签的问题。

所以，涨了个姿势： md 如果用了 html标签它里面就尽量不要写md 语法了，要写就也写 html 。

换成下面这样：

<p align="center">
  <a href="https://travis-ci.org/LqqJohnny/VBlog"><img src="https://travis-ci.org/LqqJohnny/VBlog.svg?branch=develop" alt="Build Status"></a>
  <a ><img src="https://img.shields.io/badge/language-javascript-yellow.svg" alt="Build Status"></a>
</p>

这样在上传一下就 ok了。

总结

装逼是要付出代价的。