Featured image of post Shields.io Badge 徽章使用方式记录

Shields.io Badge 徽章使用方式记录

XalaokGPT
文章介绍了如何使用 Shields.io 的 API 创建徽章,包括基本用法和进阶功能。基本用法包括徽章的标签、信息和颜色设置。进阶功能包括添加查询参数如颜色、标签、标签颜色、样式、图标和图标颜色。通过示例展示了不同参数的应用,帮助读者了解如何定制和设计各种风格的徽章。这篇文章总结了 Shields.io 徽章的基本操作和高级定制功能,为读者提供了详细的使用指南。

你肯定在一些开源仓库的 Readme 或者一些博客上看到过类似这样的徽章👇 这些都是用 Shields.io 的 API 做出来的,前段时间研究这玩意咋用研究了蛮长时间,今天来记录研究成果(目前只研究了最基本的使用,官网有其他玩法以后再说🤣)

基本

https://img.shields.io/badge/:badgeContent

:badgeContent 的内容是 label-message-color?Query Parameters

lablel:徽章左侧字符
message:徽章右侧字符(可选)
color:颜色(可填入 hex, rgb, rgba, hsl, hsla, css 颜色名)
Query Parameters:查询参数(可选,见下)

示例:
https://img.shields.io/badge/label-red
https://img.shields.io/badge/label-message-red
https://img.shields.io/badge/label-message-fdfesf

进阶(加查询参数)

color

类型:字符串
内容:颜色值(支持 hex、rgb、rgba、hsl、hsla 和 css 颜色名)
右侧部分的背景颜色
在前面基础款徽章里面就有此项,因此此项并不必要,两处任意选一处即可。

label

类型:字符串
左侧文本(空格或特殊字符需要百分比编码
在前面基础款徽章里面就有此项,因此此项并不必要,两处任意选一处即可。

labelColor

类型:字符串
内容:颜色值(支持 hex、rgb、rgba、hsl、hsla 和 css 颜色名)
左侧部分的背景颜色
示例:
https://img.shields.io/badge/label-message-red?labelColor=green

style

类型:字符串
内容:flat, flat-square, plastic, for-the-badge, social
不添加该参数则默认为 flat 样式
示例:
flat
flat-square
plastic
for-the-badge
social

类型:字符串
内容:bitcoin、dependabot、gitlab、npm、paypal、serverfault、stackexchange、superuser、telegram、travis 或 Simple Icons 图标(单击图标标题来复制 slug)或 Base64 编码图片
示例:
https://img.shields.io/badge/label-这里的图标是指定图标之一-red?logo=dependabot
https://img.shields.io/badge/label-这里的图标是simple%20icon图标-red?logo=creativecommons

logoColor

类型:字符串
内容:颜色值(支持 hex、rgb、rgba、hsl、hsla 和 css 颜色名)
支持 Simple-Icon 图标和 Shields 图标,但不支持自定义图标
示例:
https://img.shields.io/badge/label-message-red?logo=dependabot&logoColor=blue

阅读量: 0
Licensed under CC BY-NC-SA 4.0 转载请在留言板告知