给博客添加徽标

摘要：本文主要介绍了如何给博客添加自定义徽标。

环境

Windows 10 企业版 LTSC 21H2
Node 18.14.0
NPM 9.3.1
Git 2.37.3
Hexo 4.3.1

1 静态徽标

1.1 语法

通过访问特定链接就能生成自定义徽标，特定链接的语法：

url

1	https://img.shields.io/badge/前缀-后缀-颜色?参数

特定链接使用-短横线分隔，如果用到了特殊字符需要转义：

需要空格，则使用_下划线或者%20表示。
需要_下划线，则使用__双下划线表示。
需要-短横线，则使用--双短横线表示。

颜色支持十六进制、RGB、RGBA、HSL、HSLA和CSS进行表达。

样式：

可以使用img标签引用，也可以使用object标签引用：

1. img
2. object

不支持点击徽标跳转链接，需要包装跳转链接。

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/left-right-blue"></a>

支持点击徽标跳转链接。

写法：

html

1	<object data="https://img.shields.io/badge/left-right-blue"></object>

1.2 参数

1.2.1 类型

类型参数名为style，类型参数值支持多种。

扁平，默认，样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/left-right-blue?style=flat"></a>

方角扁平，样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/left-right-blue?style=flat-square"></a>

塑料质感，样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/left-right-blue?style=plastic"></a>

放大版，同时字母大写，样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/left-right-blue?style=for-the-badge"></a>

后缀改为聊天气泡，样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/left-right-blue?style=social"></a>

1.2.2 标签

左侧标签参数名为label，左侧标签颜色参数名为labelColor，右侧标签颜色参数名为color，支持重写左侧标签和自定义两侧标签颜色。

样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/left-right-90EE90?label=edit&labelColor=A9A9A9&color=FF0000"></a>

1.2.3 链接

链接参数名为link，链接参数值支持自定义链接，用于点击徽标进行跳转。

只有使用object标签才支持跳转，使用img标签需要包装跳转链接。

样式：

写法：

html

1	<a href="https://shields.io/" title="shields"><img src="https://img.shields.io/badge/left-right-90EE90"></a>

1.2.4 LOGO

LOGO参数名为logo，LOGO颜色参数名为logoColor，参数值支持从网站获取。

获取参数值：https://simpleicons.org/

在上述网站中可以找到支持的LOGO名称和颜色，也可以复制下载SVG格式的图标。

样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/left-right-90EE90?logo=hexo&logoColor=0E83CD"></a>

2 动态徽标

2.1 通过URL获取的文件内容

语法：

url

1	https://img.shields.io/badge/dynamic/类型?参数

支持的文件类型有：

json
toml
xml
yaml

参数沿用静态徽标的参数，并且新增了url参数和query参数，用于指定文件地址和属性名，属性名前使用$.作为前缀。

样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/badge/dynamic/json?url=https://github.com/badges/shields/raw/master/package.json&query=$.name"></a>

2.2 通过URL获取的响应内容

语法：

url

1	https://img.shields.io/endpoint?参数

参数沿用静态徽标的参数，并且新增了url参数，用于请求地址。

请求地址需要响应的内容：

schemaVersion：版本，必填，总是设置为1。
style：类型，非必填，默认是flat。
label：左侧标签内容，可以设置为空字符串，必填。
message：右侧标签内容，不能设置为空字符串，必填。
labelColor：左侧标签颜色，非必填，默认是grey。
color：右侧标签颜色，非必填，默认是lightgrey。
namedLogo：LOGO对应名字，非必填，默认不传。
logoSvg：LOGO对应的SVG字符串，非必填，默认不传。
logoColor：LOGO颜色，非必填，默认不传。
isError：非必填，默认否。

请求url得到的响应内容：

json

1	{ "schemaVersion": 1, "label": "is it monday", "message": "no", "color": "orange" }

样式：

写法：

html

1	<a href="javascript:void(0);" title="shields"><img src="https://img.shields.io/endpoint?url=https://shields.redsparr0w.com/2473/monday"></a>