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