Shields.io

SVG形式のバッジサービス

URLのパターンでカスタムバッジを作ることができる

[https://img.shields.io/badge/${subject}-${status}-${color}.svg]

subject : バッジの左側に入る文言

status : バッジの右側に入る文言

color : 色

https://img.shields.io/badge/Shields.IO-000.svg?style=for-the-badge&logo=Shields.io

https://img.shields.io/badge/Shields-IO-ccc.svg?style=social&logo=Shields.io

https://img.shields.io/badge/Scrapbox-suto3の大福帳-d8d8d8.svg?style=flat

https://img.shields.io/badge/Javascript-276DC3.svg?logo=javascript&style=flat

https://img.shields.io/badge/-TypeScript-007ACC.svg?logo=typescript&style=flat

https://img.shields.io/badge/-Python-F9DC3E.svg?logo=python&style=flat

https://img.shields.io/badge/-CSS3-1572B6.svg?logo=css3&style=flat

https://img.shields.io/badge/-HTML5-333.svg?logo=html5&style=flat

GitHub(Actions)やTravis CIなど他のサービスのステータスをshields.io経由でバッジを作成して表示することもできるらしい

Endpoint

code:s02.json

{

"schemaVersion": 1,

"label": "SBox",

"labelColor": "darkblue",

"message": "suto3の閻魔帳",

"color": "blue"

}

https://img.shields.io/endpoint?url=https://scrapbox.io/api/code/suto3/Shields.io/s02.json#.svg

Dynamic

table:Dynamic

label 左側に記載される文字

data url 今回の情報取得元のURL

query 取得したい情報の位置を示す文字列。JSONの場合は$. から初めてキー名を指定してあげる。

color 右側に記載される動的文字列の色名

prefix 動的取得した文字の前に記載する文字

suffix 動的取得した文字の後に記載する文字

例:

https://img.shields.io/badge/dynamic/json?color=green&label=Qiita&prefix=LGTM%E6%95%B0%E3%81%AF&query=%24.likes_count&suffix=LGTM&url=https%3A%2F%2Fqiita.com%2Fapi%2Fv2%2Fitems%2Ff2651073fb71416b6cd7#.svg

[https://img.shields.io/badge/dynamic/json.svg?color={COLOR}&style=for-the-badge&label={LABEL}&suffix=+pages&query=$.count&url=https://scrapbox.io/api/pages/{project_id}#.svg]

Scrapboxのページ数の監視

https://img.shields.io/badge/dynamic/json.svg?color=green&style=for-the-badge&label=井戸端&suffix=+pages&query=$.count&url=https://scrapbox.io/api/pages/villagepump#.svg

https://img.shields.io/badge/dynamic/json.svg?color=green&style=for-the-badge&label=アープラノート&suffix=+pages&query=$.count&url=https://scrapbox.io/api/pages/arpla#.svg

ページビューの監視もできる（日本語URLが通らないのか…）

https://img.shields.io/badge/dynamic/json.svg?color=green&style=for-the-badge&label=suto3%2fsuto3&suffix=+view&query=$.views&url=https://scrapbox.io/api/pages/suto3/suto3

https://img.shields.io/badge/dynamic/json.svg?color=green&style=for-the-badge&label=suto3%2fScrapboxPatterns&suffix=+view&query=$.views&url=https://scrapbox.io/api/pages/suto3/ScrapboxPatterns