shields.ioを使うことでGitHubのREADMEなどに貼れるおしゃれなバッジが作れるので試してみました。
shields.io
バッジを作る
shields.ioで指定されてるURLに値を埋め込むだけで簡単に作れます。
|
1 2 |
https://img.shields.io/badge/<LABEL>-<MESSAGE>-<COLOR> |
例えば、次のようなURLを指定すると
|
1 2 |
https://img.shields.io/badge/type-example-green |
こんな感じでバッジが出来ます。
Markdownで指定する場合
|
1 2 |
 |
クエリ
クエリでも指定できます。
|
1 2 |
https://img.shields.io/static/v1?label=type&message=example&color=green |
Markdownで指定する場合
|
1 2 |
 |
カラーコード指定
カラーコードで色を指定することも可能です。
|
1 2 |
https://img.shields.io/badge/type-example-FC02FF |
Markdownで指定する場合
|
1 2 |
 |
フォーマット指定
フォーマットを指定することも出来ます。
|
1 2 |
https://img.shields.io/badge/type-example-green?style=for-the-badge |
Markdownで指定する場合
|
1 2 |
 |
サイト指定
サイト（自作など）からshields.ioで指定されているJSONフォーマットが取得できれば、バッジを作成することも可能です。
|
1 2 3 4 5 6 7 |
{ "schemaVersion": 1, "label": "type", "message": "example", "color": "blue" } |
|
1 2 |
https://img.shields.io/endpoint?url=https://next.json-generator.com/api/json/get/VyyHXVnou |
Markdownで指定する場合
|
1 2 |
 |
他のサービスと連携する
GitHub(Actions)やTravis CIなど他のサービスのステータスをshields.io経由でバッジを作成して表示することも出来ます。
例えば travis で検索すると、そのサービスに対応したパス仕様が表示されます。
例えば、Travis CIで実行した結果を表示させる場合は以下のURLで表示可能です。
|
1 2 |
https://img.shields.io/travis/sky-joker/ansible-vmware-govcsim-provisioner/master?style=for-the-badge |
個人的には FOR THE BADGE のスタイルが好きなので今後はこっちを使っていこうと思います 🙂
見た目は重要ですね、やる気も出てきます 🙂
