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, поэтому вам нужно загрузить jQuery JS до CodeBadges 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") , а затем поместите значки, которые у вас есть в 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 >

Значки

Доступный.

• Кодексадемия
• Кода -школа
• надеды
• Freecodecamp
• GitHub
• Домик на дереве

Запросы

Хотите добавить новый значок? Отправьте запрос через проблемы или отправьте запрос на привлечение. Не забудьте включить свое имя пользователя на запрашиваемый сайт, чтобы оно могло быть представлено. Сайт должен иметь публичные профили, чтобы информация пользователя могла быть запрошена с помощью API или скрещиваться со страницы общедоступного профиля.

Лицензия

Лицензия MIT (MIT)

Copyright (C) 2018 Codemzy