codebadges

Codeabzeichen

Hallo Entwickler ... Zeit, um Ihre Fortschritte und Erfolge zu zeigen!

Siehe Codebadges in Aktion

Fangen an

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 >

Wichtig: Codebadges JS stützt sich auf JQuery JS, daher müssen Sie JQuery JS vor Codebadges Js laden

Verwendung

Html.

Fügen Sie ein einzelnes Abzeichen hinzu ...

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

Oder eine Reihe von Abzeichen ...

 < 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.

Aktivieren Sie jetzt Ihre Abzeichen mit einer Zeile von JS ...

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

Aktivieren Sie Codebadges mit Ihren Hauptnutzernamen codeBadges("username") und ketten Sie dann die Abzeichen, die Sie in Ihrem HTML haben. Hast du einen anderen Benutzernamen für einige Plattformen? Keine Sorge, geben Sie diesen Benutzernamen einfach an die Plattform, z. .github("differentName") .

Anpassung

Kleine Abzeichen.

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

Fügen Sie einfach die Klassenabzeichen badge-small zu Ihren Abzeichen hinzu, um sie kleiner zu machen.

Benutzerdefinierte Farben.

Hast du ein strenges Farbschema und willst du alle deine Abzeichen in Pink? Wer bin ich, um zu urteilen?!

Fügen Sie Ihre eigenen Klassen hinzu ...

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

Fügen Sie in Ihrem eigenen CSS einfach eine Code-Abzeichenklasse für .pink-badge hinzu wie das obige Beispiel.

Bewerben Sie sich auf Ihre HTML ...

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

Abzeichen

Verfügbar.

• Codecademy
• Codoreschool
• Codewars
• Freecodecamp
• Github
• Baumhaus

Anfragen.

Willst du ein neues Abzeichen hinzufügen? Senden Sie eine Anfrage über die Probleme oder senden Sie eine Pull -Anfrage. Vergessen Sie nicht, Ihren Benutzernamen in die angeforderte Site aufzunehmen, damit sie vorgestellt werden kann. Die Website muss öffentliche Profile haben, damit die Benutzerinformationen über eine API angefordert oder von einer öffentlichen Profilseite abgekratzt werden können.

Lizenz

Die MIT -Lizenz (MIT)

Copyright (C) 2018 Codemzy