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 > 

جافا سكريبت.

الآن قم بتنشيط شاراتك بخط واحد من 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
• جيثب
• الشجرة

الطلبات.

تريد إضافة شارة جديدة؟ أرسل طلبًا عبر المشكلات أو إرسال طلب سحب. لا تنس تضمين اسم المستخدم الخاص بك على الموقع المطلوب حتى يتمكن من الظهور. يجب أن يحتوي الموقع على ملفات تعريف عامة بحيث يمكن طلب معلومات المستخدم عبر واجهة برمجة تطبيقات أو كشط من صفحة ملف تعريف عام.

رخصة

ترخيص معهد ماساتشوستس للتكنولوجيا (MIT)

حقوق الطبع والنشر (C) 2018 Codemzy