生成hexo底部自定义小徽章
生成hexo底部自定义小徽章
Tom生成hexo底部自定义小徽章
1.什么是徽章
徽章是一种小巧精美的小图标，一般配有相关文字进行辅助说明，富有表现力，本质是一种 svg格式的矢量图标
2.如何生成自定义徽章
标题／内容／颜色／链接
shields.io提供了添加自定义徽标的功能，通过修改如下URL即可获取自定义徽标图片：
1 | https://img.shields.io/badge/{徽标标题}-{徽标内容}-{徽标颜色}.svg |
{徽标标题} ：徽标左半部分的文本（短线：—，下划线：_，空格： 或）；{徽标内容} ：徽标右半部分的文本，同上；{徽标颜色} ：徽标右半部分背景颜色，可以是 red、green、blue 等颜色英文单词，也可以直接写十六进制的颜色值，如 ff69b4
将其中的 {徽标标题}、{徽标内容}、{徽标颜色} 分别替换为需要的内容即可：
1 |  |
做出如下代码和效果如下
：
附加参数
可以在徽标图片 URL 后面带上一些参数来控制徽标的样式，这一部分是可选的，不想折腾的话默认的样式就挺好了，可以不看这里的。
使用方法就是在徽标图片 URL 后面跟上 ?{参数名}={参数值}
多个参数联用的话就是 ?{参数名1}={参数值1}&{参数名2}={参数值2}...
style
style 控制徽标的主体样式，有四种，不设置的话默认是 flat 的，示例代码和效果如下：
plastic
塑料？大概是指立体效果
1 |  |
flat
正常的样子，扁平化
1 |  |
flat-square
扁平化 + 去除圆角
1 |  |
social
扁平化 + 去除圆角
1 |  |
- label
该参数可以用来强制覆盖原有的徽标标题文字，效果如下，原有的 pod 字样已经被覆盖了：
1 |  |
logo
该参数可以用来为徽标添加 logo，logo 图片会出现在左半部分的徽标标题左边，logo 图片高度必须 ≥ 14px，logo 图片需要先转为 base64 编码然后直接插入到 URL 中（可以用 b64.io将图片转为 base64 编码的字符串），格式如下。
1 | ?logo={base64 编码后的图片数据} |
示例代码和效果如下：
1 | 
logoWidth
该参数可以设置在上一个参数 logo 中添加的图标的宽度，设为 0 的话即为忽略该参数，示例代码和效果如下：
1 |  |
link
据说该参数是用来设置点击后跳转的 URL 的（嗯，俗称超链接），官方描述如下：
Specify what clicking on the left/right of a badge should do (esp. for social badge style)
不过试了一下好像没啥效果（并且实在是没想明白怎么通过返回的图片控制不同点击区域的跳转），如果有大佬知道的求指点，感谢！
colorA
该参数用来控制徽标左半部分的背景色，只能用十六进制的颜色作为参数哦，不能直接写 red、green、blue 之类的，这里将左半部分的背景色改为 0xabcdef，代码和效果如下：
1 |  |
colorB
该参数用来控制徽标右半部分的背景色，同上，只能用十六进制的颜色作为参数哦，不能直接写 red、green、blue 之类的，这里将右半部分的背景色改为 0xabcdef，代码和效果如下：
1 |  |
maxAge
该参数用来设置 HTTP 缓存时间，以秒为单位，直接在 svg 地址后跟 ?maxAge={缓存秒数} 即可，好像没啥好预览的，不放效果图了。
备注
这里需要注意的是，如果你是引用的第三方 svg 然后添加自己的样式，如果该样式之前已经被第三方添加过，是不一定会覆盖第三方的设置的，也就是说自己设置的属性不一定会生效…例如下面的代码设置 colorB 就没生效：
1 |  |
右半部分应该变成黑色，但是毫无效果的说：
3.如何使用徽章
大多数徽章都是 svg 格式，当然也不排除默写徽章是 png 格式，不论怎么说，一律当成图标使用就可以了，如果你和我一样,希望在 markdown 文件中使用徽章,那么建议使用在线链接,或者引入本地 svg 相关文件.
- 在markdown中直接使用
1 |  |
- 想在点击图片后跳转到某个页面，可以这样写
1 | [](https://beian.miit.gov.cn/) |
- 如果你是在 html 文件使用徽章,同样先取得在线徽章地址,然后按照 html 语法插入图片即可.
1 | <a href="https://beian.miit.gov.cn/"> |
不论是什么语法,最核心最根本的获得到徽章链接,至于不同语言有着各自的语法,按照语言规则手动拼接就好.
工具网站
生成图标Shields.io
图片转base64b64.io
