Shield 徽章生成
基础模式生成工具
1、输入左侧内容
2、输入右侧内容
3、输入右侧部分背景颜色(输入颜色的值，不要带'#',例如 10e4ef；或者输入颜色的英文简码,例如:blue)
URL结构示例
http://extool.cn/shield/svg?label=[左侧内容]&msg=[右侧内容]&color=[右侧背景颜色]
进阶模式生成工具
1、输入左侧内容
2、输入右侧内容
3、输入右侧部分背景颜色(输入颜色的值，不要带'#',例如 10e4ef；或者输入颜色的英文简码,例如:blue)
4、选择格式(默认为 plastic)
5、输入Logo 名称,例如:wechat(非必填)
URL结构示例
http://extool.cn/shield/svg?label=[左侧内容]&msg=[右侧内容]&color=[右侧背景颜色]&format=[格式]&logo=[LOGO]
参数
| 参数 | 类型 | 默认 | 描述 |
|---|---|---|---|
label |
String | 无 | 左侧内容 |
msg |
String | 无 | 右侧内容 |
color |
String | 无 | 右侧部分背景颜色，填写颜色时切记去掉 # 仅填写后面数字即可，或者填写颜色的字符串简称。 |
format |
String | plastic | 格式，可选值（plastic, flat, flat-square, for-the-badge, social） |
logo |
String | 无 | 最左侧的logo图标，请填写logo图标的名称即可。在本工具默认icon列表页面中查找你需要的icon图标，或者上传你自己的icon图标到本icon列表中 |
logoColor |
String | ececec | logo图标的颜色，填写颜色时切记去掉 # 仅填写后面数字即可，或者填写颜色的字符串简称，例如 red ,
brightgreen 等 |
自定义 logo 的颜色
如果想修改logo的颜色可以使用参数 logoColor 。
...&logo=[LOGO]&logoColor=[logoColor]
效果如:
URL参数为: /shield/svg?label=format&msg=flat&format=flat&logo=sinaweibo&logoColor=red
格式参数 format 的可选值
<img src="http://extool.cn/shield/svg?label=format&msg=plastic&color=44cc11&format=plastic&logo=wechat"/>
| 名称 | 说明 | 描述 | 样式参考 |
|---|---|---|---|
plastic |
默认的格式 | 带圆角的小徽标 | |
flat |
扁平格式 | 扁平化样式,带圆角 | |
flat-square |
扁平格式-直角方形 | 扁平化样式,直角方形 | |
for-the-badge |
标签格式 | 带圆角较大型样式 | |
social |
社会化格式 | 社会化分享数据展示样式 |
Github 仓库项目信息模式
URL结构
http://extool.cn/shield/github/[用户名]/[项目名称]/[获取参数]
第三个[获取参数]有三个可选值, (fork,watch,star)
例如:
<img src="http://extool.cn/shield/github/twbs/bootstrap/fork"/>
1.获取用户指定项目的的 fork 值
[用户名]为 twbs ;[项目名称]为 bootstrap ;[获取参数]为 fork
2.获取用户指定项目的的 watch 值
[用户名]为 twbs ;[项目名称]为 bootstrap ;[获取参数]为 watch
3.获取用户指定项目的的 star 值
[用户名]为 twbs ;[项目名称]为 bootstrap ;[获取参数]为 star
4.获取用户的 follow 值
使用如下URL结构
http://extool.cn/shield/github/[用户名]
[用户名]为 twbs
手机扫码访问H5
发表评论 取消回复