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 ดังนั้นคุณต้องโหลด 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 ด้วยชื่อผู้ใช้หลักของคุณ 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
• โรงเรียนสอนศาสนา
• codewars
• Freecodecamp
• คนอื่น ๆ
• บ้านต้นไม้

คำขอ

ต้องการเพิ่มป้ายใหม่หรือไม่? ส่งคำขอผ่านปัญหาหรือส่งคำขอดึง อย่าลืมรวมชื่อผู้ใช้ของคุณไว้ในเว็บไซต์ที่ร้องขอเพื่อให้สามารถให้ความสำคัญได้ ไซต์จะต้องมีโปรไฟล์สาธารณะเพื่อให้ข้อมูลผู้ใช้สามารถขอผ่าน API หรือคัดลอกมาจากหน้าโปรไฟล์สาธารณะ

ใบอนุญาต

ใบอนุญาต MIT (MIT)

ลิขสิทธิ์ (c) 2018 Codemzy