codebadges

Lencana Kode

Halo Pengembang ... Saatnya memamerkan kemajuan dan pencapaian Anda!

Lihat CodeBadges Beraksi

Mulai

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 >

PENTING: CODEBADGES JS bergantung pada JQuery JS, jadi Anda perlu memuat jQuery JS sebelum CodeBadges JS

Penggunaan

Html.

Tambahkan satu lencana ...

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

Atau deretan lencana ...

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

Sekarang aktifkan lencana Anda dengan satu baris JS ...

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

Aktifkan CodeBadges dengan nama pengguna utama Anda codeBadges("username") dan kemudian rantai pada lencana yang Anda miliki di HTML Anda. Punya nama pengguna yang berbeda untuk beberapa platform? Jangan khawatir, lewati saja nama pengguna itu ke platform, misalnya .github("differentName") .

Menyesuaikan

Lencana kecil.

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

Cukup tambahkan badge-small ke lencana Anda untuk membuatnya lebih kecil.

Warna khusus.

Punya skema warna yang ketat dan ingin semua lencana Anda berwarna merah muda? Siapa saya untuk menilai?!

Tambahkan kelas Anda sendiri ...

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

Di CSS Anda sendiri, cukup tambahkan kelas lencana kode untuk .pink-badge seperti contoh di atas.

Berlaku untuk html Anda ...

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

Lencana

Tersedia.

• Codecademy
• Codeschool
• Codewars
• freecodecamp
• GitHub
• rumah pohon

Permintaan.

Ingin menambahkan lencana baru? Kirim permintaan melalui masalah atau kirimkan permintaan tarik. Jangan lupa untuk memasukkan nama pengguna Anda di situs yang diminta sehingga dapat ditampilkan. Situs harus memiliki profil publik sehingga info pengguna dapat diminta melalui API atau dikikis dari halaman profil publik.

Lisensi

Lisensi MIT (MIT)

Hak Cipta (C) 2018 Codemzy