Gitee、Github、およびその他の主要なコードリポジトリにアクセスすると、次のバッジスタイルのWebリンクがよく表示されます。これらは美しく便利ですが、このバッジはどのように作成されますか？この記事では、独自のバッジリンクを作成します。
メーカー：shields、GitHub READMEまたはその他のWebページに簡単に含めることができるSVGまたはラスター形式の簡潔で一貫性のある明確なバッジサービス。このサービスは、数十の継続的インテグレーションサービス、パッケージレジストリ、ディストリビューション、アプリストア、ソーシャルネットワークをサポートします。 、コードカバレッジサービス、およびコード分析サービス。1か月あたり7億7000万を超える画像を提供し、 VS Code、Vue.js、Bootstrapなどの世界で最も人気のあるオープンソースプロジェクトのいくつかで使用されています。
- 公式サイト：https：//shields.io/
- Github：https：//github.com/badges/shields/
Webページを作成します：https：//shields.io/#your-badge
バッジのラベル、メッセージ、希望の色を入力し、クリックMake Badgeしてバッジを生成します。バッジは、左半分と右半分で構成され、左半分は入力したラベルコンテンツ、右半分はメッセージコンテンツです。塗りつぶされた、右半分の色は私たちが塗りつぶした色です。
最終的に生成されたバッジには、対応するURLが形式https://img.shields.io/badge/<标签>-<消息>-<颜色>で含まれています。また、urlパラメータを直接変更して、目的のラベルを取得することもできます。
さらに、URLの後に?いくつかのパラメーターを使用してカスタマイズすることもでき、パラメーターは次のように&区切られます。
-
logo：左半分のロゴを指定します（例：https：//img.shields.io/badge/zsr-gitee-red？logo = Gitee）
その他のロゴパラメータを表示できます：https：//simpleicons.org/
-
logoWidth：ロゴの左半分の幅を指定します（例：https：//img.shields.io/badge/zsr-gitee-red？logo = Gitee＆logoWidth = 40）
-
label：左半分のコンテンツをカバーするため。例：https：//img.shields.io/badge/zsr-gitee-red？logo = Gitee＆label = hello
-
labelColor：左半分の色を設定するために使用され、hex、rgb、rgba、hsl、hsla、およびcssという名前の色をサポートします。例：https：//img.shields.io/badge/zsr-gitee-red？labelColor = abcdef
-
color：ユーザーは右半分の色を設定し、hex、rgb、rgba、hsl、hsla、cssという名前の色をサポートします。例：https：//img.shields.io/badge/zsr-gitee-red？color = fedcba
-
link=http://left&link=http://right：https：//img.shields.io/badge/baidu-tencent-blue？link = http：//www.baidu.com&link=http：/のように、バッジの左/右にジャンプするリンクを指定します/ www.tencent.com
この時点で、左半分をクリックしてBaiduホームページにジャンプし、右半分をクリックしてTencentホームページにジャンプします。
では、どのようにしてそのバッジを導入するのでしょうか。マークダウンまたはhtmlの形式でインポートできます。
// markdown
// html
<img src="https://raster.shields.io/badge/Maven-3.1+-red">
効果は次のとおりです。
