codebadges

コードバッジ

こんにちは開発者...あなたの進歩と成果を披露する時間です！

動作中のコードバッジを参照してください

始めましょう

CDN

 <!-- codeBadges minified CSS -->
< link rel =" stylesheet " href =" https://cdn.jsdelivr.net/gh/codemzy/[email protected]/dist/codebadges.min.css " >
<!-- codeBadges minified JavaScript -->
< script src =" https://cdn.jsdelivr.net/gh/codemzy/[email protected]/dist/codebadges.min.js " > </ script >

重要： CodeBadges JSはJQuery JSに依存しているため、CodeBadges JSの前にJQuery JSをロードする必要があります

使用法

HTML。

単一のバッジを追加...

 < div class =" code-badge freecodecamp " > </ div >

またはバッジの列...

 < div align =" center " >
  < div class =" code-badge freecodecamp " > </ div >
  < div class =" code-badge github " > </ div >
  < div class =" code-badge codeschool " > </ div >
  < div class =" code-badge codecademy " > </ div >
  < div class =" code-badge treehouse " > </ div >
  < div class =" code-badge codewars " > </ div >
</ div > 

JavaScript。

JSの1つのラインでバッジをアクティブにします...

 codeBadges ( "codemzy" ) . freecodecamp ( ) . github ( ) . codeschool ( ) . codecademy ( ) . treehouse ( "ryancarson" ) . codewars ( ) ;

メインのユーザー名codeBadges("username")を使用してコードバッジをアクティブにし、HTMLにあるバッジにチェーンします。一部のプラットフォームには別のユーザー名がありますか？心配はありません。そのユーザー名を.github("differentName")に渡すだけです。

カスタマイズ

小さなバッジ。

 < div class =" code-badge badge-small freecodecamp " > </ div >

クラスbadge-smallをバッジに追加して、それらを小さくするだけです。

カスタムカラー。

厳格な配色を手に入れて、すべてのバッジがピンク色で欲しいですか？私は誰を判断しますか？！

あなた自身のクラスを追加してください...

. code-badge . pink-badge . outer {
  background-color : # DB0A5B ;
}

独自のCSSでは、上記の例のように.pink-badgeのコードバッジクラスを追加してください。

HTMLに適用してください...

 < div class =" code-badge freecodecamp pink-badge " > </ div >

バッジ

利用可能。

• Codecademy
• コードスクール
• Codewars
• FreeCodecamp
• github
• ツリーハウス

リクエスト。

新しいバッジを追加したいですか？問題を介してリクエストを送信するか、プルリクエストを送信します。リクエストされたサイトにユーザー名を含めることを忘れないでください。サイトには、ユーザー情報をAPIを介して要求したり、パブリックプロフィールページからスクレイプしたりできるように、パブリックプロファイルが必要です。

ライセンス

MITライセンス（MIT）

Copyright（c）2018 Codemzy