ما هو صانع الشارات والأزرار؟

صانع الشارات والأزرار ينشئ شارات ودروعاً مخصصة بالنص والألوان والأشكال التي تختارها. أدخل تسمية وقيمة، اختر نمطاً، وحمّل بصيغة PNG أو SVG.

ينتج شارات على نمط shields.io (كبسولة ملوّنة مقسومة إلى عنوان رمادي وقيمة ملوّنة) تُعرض كملف SVG مضمَّن. اختر بين أشكال flat وflat-square وrounded وpill وfor-the-badge؛ اضبط ألوان hex لكل نصف ولوناً مستقلاً لنص الوسم ونص القيمة؛ أدرج شعار تقنية شائعة (GitHub وnpm وDocker وPython وNode.js وغيرها) ودع لون العلامة التجارية يُطبَّق تلقائيًا؛ لفّ الشارة برابط URL قابل للنقر؛ انسخ النتيجة بصيغة Markdown لملف README، أو HTML لرسالة بريد أو صفحة ويب، أو نزِّلها بصيغة SVG حادّة أو PNG بدقة ثلاثية. أضف عدّة شارات إلى قائمة وانسخ كل مقاطع Markdown دفعة واحدة أو احفظها كملف ‎.md. يتمدّد العرض تلقائيًا مع النص، فتظهر 'Build / Passing' و'License / Apache 2.0' متوازنتَين دون أي تعديل يدوي.

كيفية الاستخدام

1. أدخل نص الشارة — اختر تسمية (الجانب الأيسر) وقيمة (الجانب الأيمن) مثل "الإصدار" و"2.0".
2. اختر ألوانًا لخلفية العنوان والقيمة، حدّد الشكل، وأضف اختياريًا شعار تقنية إلى اليسار.
3. شاهد الشارة تتحدّث مباشرة، ثم نزِّلها بصيغة PNG أو SVG، أو انسخها بصيغة Markdown أو HTML للصقها داخل README أو صفحة.

متى تستخدم

• إضافة شارة بناء أو إصدار أو تغطية إلى README على GitHub دون مزوّد CI.
• وضع وسوم 'Beta' أو 'New' أو 'Pro' على ميزات صفحة الهبوط أو خطط التسعير.
• إبراز شريحة من مكدّس التقنيات على ملف شخصي أو سيرة ذاتية PDF.

النتيجة

أنشئ شارة حالة لمشروع: التسمية "Build" بالرمادي، القيمة "Passing" بالأخضر، نمط مسطح. تحصل على شارة حالة مثل تلك الموجودة في مستودعات GitHub.

الأسئلة الشائعة

هل ستبقى الشارات تعمل إذا استضفتها كملفات PNG بدلاً من shields.io؟

نعم. ملفات SVG وPNG التي تنزّلها مكتفية بذاتها ولا تستدعي أي خادم. السلبية مقارنةً بـ shields.io هي غياب البيانات الحيّة: شارة 'version 1.2' تظل 1.2 حتى تعيد توليدها.

ما الفرق بين الأنماط Flat وRounded وPill؟

نمط flat له زوايا حادّة مع تدرّج خفيف، وflat-square يحمل الشكل ذاته بلا تدرّج، وrounded يستخدم زوايا بنصف قطر 4 بكسل، وpill يجعل الطرفَين دائرتَين كاملتَين، وfor-the-badge هو النمط العريض المرتفع بحروف كبيرة المعروف في صفوف شارات README. اختر ما يتناسق مع الواجهة المحيطة.

هل يمكن استخدام ألوان علامتي التجارية بدلاً من الأخضر والرمادي الافتراضيين؟

نعم، لون الوسم ولون القيمة ولون نص مستقل لكل نصف كلها منتقيات سداسية. جرّب وسماً داكناً بنص فاتح مع قيمة زاهية لتباين عالٍ. تتحدّث المعاينة فور الكتابة.

هل أستخدم SVG أم PNG؟

SVG لـ README على GitHub وللمواقع وأي مكان قابل للتكبير (يظل حاداً دائماً). PNG حين تلصق في مكان لا يعرض SVG: ملفات Word أو رسائل Slack أو بعض أدوات لقطات الشاشة.

لماذا يكون PNG أكبر حجماً من SVG؟

يُولَّد PNG بثلاثة أضعاف حجم العرض على الشاشة ليظهر حاداً على الشاشات عالية الدقة. SVG الشارة العادي أقل من 1 ك.ب، وPNG غالباً بين 5 و15 ك.ب. اختر SVG عند الاهتمام بالحجم، وPNG عند الحاجة للتوافق.

أدوات ذات صلة