When visiting Gitee, Github and other major code repositories, you can often see the following badge-style web links, which are beautiful and convenient, so how is this badge made? This article will take you to make your own badge links.
Maker : shields, a concise, consistent, clear badge service in SVG or raster format that can be easily included in a GitHub README or any other web page; the service supports dozens of continuous integration services, package registries , distributions, app stores, social networks, code coverage services, and code analysis services. It serves over 770 million images per month and is used by some of the world's most popular open source projects such as VS Code , Vue.js , and Bootstrap .
- Official website: https://shields.io/
- Github：https://github.com/badges/shields/
Make the webpage : https://shields.io/#your-badge
We fill in the label, message and desired color of the badge, and then click Make Badgeto generate our badge, which consists of left and right halves, the left half is the label content we filled in, and the right half is the message content we filled in , the color of the right half is the color we fill in.
The final generated badge has a corresponding url in the format https://img.shields.io/badge/<标签>-<消息>-<颜色>, we can also directly modify the url parameter to get the desired label.
?In addition, we can also customize it by using some parameters after the url , and the parameters are &separated by:
-
logo: Specify the logo of the left half, for example https://img.shields.io/badge/zsr-gitee-red?logo=Gitee
More logo parameters can be viewed: https://simpleicons.org/
-
logoWidth: Specify the width of the left half of the logo, for example https://img.shields.io/badge/zsr-gitee-red?logo=Gitee&logoWidth=40
-
label: to cover the content of the left half, e.g. https://img.shields.io/badge/zsr-gitee-red?logo=Gitee&label=hello
-
labelColor: Used to set the color of the left half, supports hex, rgb, rgba, hsl, hsla and css named colors. For example https://img.shields.io/badge/zsr-gitee-red?labelColor=abcdef
-
color: User sets the color of the right half, supports hex, rgb, rgba, hsl, hsla and css named colors. For example https://img.shields.io/badge/zsr-gitee-red?color=fedcba
-
link=http://left&link=http://right: Specify the link to jump to the left/right of the badge, such as https://img.shields.io/badge/baidu-tencent-blue?link=http://www.baidu.com&link=http:// www.tencent.com
At this point, we click on the left half to jump to the Baidu homepage, and click the right half to jump to the Tencent homepage
So how do we introduce that badge? We can import it in the form of markdown or html:
// markdown
// html
<img src="https://raster.shields.io/badge/Maven-3.1+-red">
The effect is as follows:
