前端超级好用的徽章生成网站shields的使用简介

前端超级好用网站shields的使用简介

在前端开发过程中，我们常常需要为项目添加各种标识和徽章来展示项目的状态、版本信息、依赖情况等。Shields.io这个网站提供了一个非常便捷的方式来生成各种漂亮且实用的徽章，以下是其详细的使用教程。

一、基本徽章生成

（一）通过URL参数生成

1. 标签、消息和颜色组合（最常用方式）
   • 格式为：https://img.shields.io/badge/label-message-color。例如，如果要生成一个表示项目构建状态为“通过”，颜色为绿色（brightgreen）的徽章，URL应为https://img.shields.io/badge/build-passing-brightgreen。在这个URL中，build是标签，passing是消息，brightgreen是颜色。
   • 注意，消息和颜色之间必须用-分隔，标签是可选的，如果没有标签，直接从消息开始，如https://img.shields.io/badge/passing-brightgreen也是合法的。
2. 仅消息和颜色
   • 格式为：https://img.shields.io/badge/message-color。例如，https://img.shields.io/badge/just%20the%20message-8A2BE2，这里just the message是消息，8A2BE2是颜色（十六进制颜色代码）。

（二）特殊字符处理

1. 空格
   • 在URL中，空格可以用_（下划线）或%20来表示。例如，https://img.shields.io/badge/any_text-you_like-blue和https://img.shields.io/badge/any%20text-you%20like-blue是等价的，都会生成一个显示“any text: you like”的徽章。
2. 下划线和破折号
   • 如果要在徽章文本中显示下划线_，需要在URL中使用__（双下划线）。例如，https://img.shields.io/badge/with__underscore-blue会显示“with_underscore”。
   • 要显示破折号-，在URL中使用--（双破折号）。例如，https://img.shields.io/badge/with--dash-blue会显示“with - dash”。

（三）颜色支持

• Shields.io支持多种颜色格式，包括十六进制（如#ABCDEF）、RGB（如rgb(100, 100, 100)）、RGBA（如rgba(100, 100, 100, 0.5)）、HSL（如hsl(120, 50%, 50%)）、HSLA（如hsla(120, 50%, 50%, 0.5)）以及CSS命名颜色（如red、blue等）。例如，https://img.shields.io/badge/label-message-red会生成一个红色背景的徽章。

二、徽章样式定制

（一）样式参数

• 通过style查询参数可以选择徽章的样式。可选值有flat（默认）、flat-square、plastic、for-the-badge、social。例如，https://img.shields.io/badge/build-passing-brightgreen?style=flat-square会生成一个扁平方形样式的徽章。

（二）添加图标

1. 简单图标库使用
   • 使用logo查询参数可以添加来自简单图标库（Simple Icons）的图标。你可以在简单图标库中找到图标对应的slug，然后添加到URL中。例如，要添加一个Appveyor图标，URL应为https://img.shields.io/badge/build-passing-brightgreen?logo=appveyor。
2. 图标颜色和大小设置（仅适用于简单图标库图标）
   • logoColor参数可以设置图标的颜色，支持上述提到的各种颜色格式。例如，https://img.shields.io/badge/build-passing-brightgreen?logo=appveyor&logoColor=violet会使Appveyor图标显示为紫色。
   • logoSize参数可以设置图标大小，设置为auto可以让图标自适应大小，对于一些较宽的图标很有用，如amd和amg图标。例如，https://img.shields.io/badge/build-passing-brightgreen?logo=amd&logoSize=auto。

三、文本覆盖和背景颜色定制

（一）文本覆盖

1. 左侧文本覆盖（标签）
   • 使用label查询参数可以覆盖徽章左侧的默认文本（如果有标签的话）。例如，如果默认徽章是https://img.shields.io/badge/build-passing-brightgreen，想要将左侧文本改为“健康状态”，则URL变为https://img.shields.io/badge/build-passing-brightgreen?label=healthiness。需要注意的是，如果标签中有空格或特殊字符，需要进行URL编码。
2. 左侧文本背景颜色定制
   • 通过labelColor参数可以设置徽章左侧文本的背景颜色。例如，https://img.shields.io/badge/build-passing-brightgreen?label=healthiness&labelColor=abcdef，这里abcdef是十六进制颜色代码，会将“健康状态”文本的背景颜色设置为指定颜色。

（二）右侧背景颜色定制

• 使用color参数可以设置徽章右侧（消息部分）的背景颜色。例如，https://img.shields.io/badge/build-passing-brightgreen?color=fedcba，会将“passing”文本的背景颜色改为fedcba（假设这是一个合适的颜色代码）。

四、徽章缓存设置

（一）缓存时间设置

• 通过cacheSeconds查询参数可以设置徽章的HTTP缓存生命周期。例如，https://img.shields.io/badge/build-passing-brightgreen?cacheSeconds=3600，表示该徽章将被缓存3600秒（1小时）。需要注意的是，网站会根据一些规则推断默认的缓存值，如果指定的值低于默认值，可能会被忽略。

五、徽章链接设置

（一）添加点击链接

• 使用link参数可以指定点击徽章左右两侧时的跳转链接。不过需要注意的是，此功能仅在将徽章集成到<object> HTML标签中时有效，在<img>标签或其他标记语言中无效。例如，https://img.shields.io/badge/build-passing-brightgreen?link=https://example.com，当在合适的<object>标签中使用该徽章时，点击徽章会跳转到https://example.com。如果要分别设置左右两侧的链接，可以使用数组形式，如https://img.shields.io/badge/build-passing-brightgreen?link[]=https://left.com&link[]=https://right.com（具体的左右侧分配可能需要根据实际使用场景进一步确定和调整）。

六、在项目中的使用

（一）Markdown中的使用

• 在Markdown文件中，可以直接使用生成的徽章URL。例如，![Build Status](https://img.shields.io/badge/build-passing-brightgreen)，这将在Markdown文档中显示一个带有“Build Status”标题（如果支持的话）和绿色“passing”字样的徽章。

（二）HTML中的使用

1. <img>标签使用（无链接功能）
   • 在HTML中，可以使用<img>标签来显示徽章，如<img src="https://img.shields.io/badge/build-passing-brightgreen" alt="Build Status">。这种方式简单直接，但不支持点击链接功能。
2. <object>标签使用（支持链接功能）
   • 如果需要添加点击链接功能，可以使用<object>标签，如<object type="image/svg+xml" data="https://img.shields.io/badge/build-passing-brightgreen?link=https://example.com"><param name="cacheSeconds" value="3600"></object>。这里同时设置了徽章的链接和缓存时间（如果需要的话）。

（三）其他标记语言或文档中的使用

• 对于其他标记语言或文档，也可以类似地根据其支持的图像嵌入方式来使用Shields.io生成的徽章，通常也是通过引用徽章的URL来实现显示。

Shields.io为前端开发者提供了一个强大且灵活的徽章生成工具，可以帮助我们更好地展示项目的各种信息，提升项目文档和展示的专业性和美观性。通过上述介绍的各种参数和使用方法，我们可以根据项目的实际需求定制出各种各样符合要求的徽章。