codebadges

代碼徽章

您好開發人員...是時候展示您的進度和成就了！

請參閱行動中的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的一行激活您的徽章...

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

使用您的主要用戶名codeBadges("username")激活CodeBadges，然後在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
• 代碼學校
• 密碼
• FreecodeCamp
• github
• 樹屋

請求。

想要一個新的徽章嗎？通過問題發送請求或提交拉請請求。不要忘記將您的用戶名包括在請求的網站上，以便它可以特徵。該站點必須具有公共配置文件，以便可以通過API請求用戶信息或從公共個人資料頁面上刮擦。

執照

麻省理工學院許可證（MIT）

版權（C）2018 Codemzy