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 > 

자바 스크립트.

이제 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 >

배지

사용 가능.

• Codecademy
• Codeschool
• 코디 르
• Freecodecamp
• github
• 트리 하우스

요청.

새로운 배지를 추가하고 싶습니까? 문제를 통해 요청을 보내거나 풀 요청을 제출하십시오. 요청 된 사이트에 사용자 이름을 포함시킬 수 있도록 사용자 이름을 포함시키는 것을 잊지 마십시오. 사이트에는 API를 통해 사용자 정보를 요청하거나 공개 프로필 페이지에서 스크랩 된 공개 프로필이 있어야합니다.

특허

MIT 라이센스 (MIT)

저작권 (C) 2018 Codemzy