shields.io 图标版本

今日话题

开源项目都会给出项目使用的软件版本

作者：栾树

时间：2024年6月21日 08时57分14秒

主线任务

https://shields.io/

使用 Shields.io 非常简单。你只需要构造一个 URL，并将其嵌入到你的项目文档（比如 README.md 文件）或网页中。以下是具体的步骤和示例：

步骤 1: 构建徽章 URL

Shields.io 提供了一个网站来帮助你生成徽章 URL：Shields.io。在该网站上，你可以选择不同的类型和样式的徽章，并根据你的需求进行自定义。

例如：

• 构建状态徽章：你可以选择显示项目的构建状态，如“passing”或“failing”。
• 版本号徽章：你可以显示项目的版本号。

步骤 2: 嵌入徽章 URL

一旦你生成了徽章 URL，你可以将它嵌入到你的 README 文件或者网页中。对于 Markdown 文件（如 GitHub 上的 README.md），你可以使用以下语法：

![描述文本](https://img.shields.io/badge/标签内容-状态-颜色)

示例

1. 构建状态徽章

假设你想要一个表示构建通过的徽章，URL 可以是：

![Build Status](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/54e042578d67425b9ebe852137628815~tplv-k3u1fbpfcp-image.image#?w=88&h=20&s=1135&e=svg&a=1&b=565656)

在 README.md 中，这段代码会生成如下的徽章：

2. 版本号徽章

假设你想要一个显示版本号为 v1.0.0 的徽章，URL 可以是：

![Version](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/1c5972e078f04bca9381731f7b1c254a~tplv-k3u1fbpfcp-image.image#?w=96&h=20&s=1142&e=svg&a=1&b=555555)

在 README.md 中，这段代码会生成如下的徽章：

3. 自定义徽章

你也可以创建自定义徽章。例如，你想要一个显示 “vue 3.2” 的徽章，URL 可以是：

![Vue](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f12911532e7047e29e5ad6c63144c1e8~tplv-k3u1fbpfcp-image.image#?w=58&h=20&s=1114&e=svg&a=1&b=565656)

在 README.md 中，这段代码会生成如下的徽章：

高级用法

Shields.io 还支持从各种服务获取动态数据，例如 npm、Travis CI、GitHub Actions 等，这些徽章会根据实时数据更新。

例如，显示 npm 包版本的徽章：

![npm version](https://img.shields.io/npm/v/package-name)

显示 GitHub 仓库的开源许可证类型：

![GitHub license](https://img.shields.io/github/license/user/repo)

往期内容

点击链接查看：https://www.yuque.com/chuxin-cs/it/ge9wybczy0wsq1l1