बैज/बटन मेकर क्या है?

बैज/बटन मेकर आपकी पसंद के टेक्स्ट, रंग और आकार से कस्टम बैज और शील्ड बनाता है। लेबल और वैल्यू डालें, स्टाइल चुनें और PNG या SVG में डाउनलोड करें।

shields.io शैली के बैज बनाता है (एक रंगीन कैप्सूल जो ग्रे लेबल और रंगीन वैल्यू में बँटा होता है) जो इनलाइन SVG के रूप में रेंडर होते हैं। flat, flat-square, rounded, pill या for-the-badge आकारों में से चुनें; दोनों हिस्सों के लिए hex रंग और लेबल तथा वैल्यू के लिए अलग-अलग टेक्स्ट रंग सेट करें; GitHub, npm, Docker, Python, Node.js जैसे टेक्नोलॉजी लोगो जोड़ें और उनका ब्रांड रंग अपने आप लग जाए; बैज को एक क्लिक करने योग्य URL में लपेटें; README के लिए Markdown, ईमेल या वेब पेज के लिए HTML के रूप में कॉपी करें, या तेज़ SVG और 3x रिज़ॉल्यूशन वाला PNG डाउनलोड करें। कई बैज एक सूची में जोड़ें और सभी Markdown एक साथ कॉपी करें या उन्हें .md फ़ाइल के रूप में सहेजें। चौड़ाई टेक्स्ट के साथ अपने आप बढ़ती है, इसलिए 'Build / Passing' और 'License / Apache 2.0' बिना मैन्युअल पैडिंग के संतुलित दिखते हैं।

उपयोग कैसे करें

1. अपने बैज का टेक्स्ट दर्ज करें — बाईं ओर लेबल जैसे 'Version' और दाईं ओर वैल्यू जैसे '2.0' चुनें।
2. लेबल और वैल्यू की पृष्ठभूमि के लिए रंग चुनें, आकार चुनें, और चाहें तो बाईं तरफ एक टेक्नोलॉजी लोगो जोड़ें।
3. बैज को लाइव अपडेट होते देखें, फिर PNG या SVG में डाउनलोड करें, या Markdown या HTML में कॉपी करके README या पेज में चिपकाएँ।

कब उपयोग करें

• किसी CI सेवा के बिना GitHub README में बिल्ड, वर्ज़न या कवरेज बैज जोड़ना।
• लैंडिंग पेज की फ़ीचर पंक्ति या प्राइसिंग टियर पर 'Beta', 'New', 'Pro' टैग लगाना।
• व्यक्तिगत पोर्टफोलियो या PDF रिज़्यूमे में टेक्नोलॉजी स्टैक चिप उभारना।

परिणाम

एक प्रोजेक्ट स्टेटस बैज बनाएँ: लेबल "Build" ग्रे में, वैल्यू "Passing" हरे में, फ़्लैट स्टाइल। GitHub रिपॉज़ पर दिखने वाले जैसा स्टेटस बैज बनता है।

अक्सर पूछे जाने वाले प्रश्न

अगर मैं shields.io के बजाय PNG को खुद होस्ट करूँ तो भी बैज काम करेगा?

हाँ। डाउनलोड किए गए SVG और PNG आत्मनिर्भर हैं और किसी सर्वर को कॉल नहीं करते। नुक़सान यह है कि लाइव डेटा नहीं मिलता: 'version 1.2' बैज तब तक 1.2 ही दिखेगा जब तक आप उसे दोबारा जनरेट न करें।

flat, rounded और pill स्टाइल में क्या फ़र्क है?

Flat के कोने नुकीले होते हैं और उस पर हल्का ग्रेडिएंट चढ़ा होता है, flat-square वही आकार है लेकिन बिना ग्रेडिएंट, rounded में 4px का कोना-त्रिज्या होती है, pill के दोनों सिरे पूरे गोल होते हैं, और for-the-badge वह मोटा, ऊँचा, सब अपर-केस शैली है जो README बैज पंक्तियों में बहुत मिलती है। आसपास के UI से जो मेल खाए, वही चुनें।

क्या डिफ़ॉल्ट हरे और ग्रे की जगह अपने ब्रांड के रंग रख सकते हैं?

हाँ — लेबल रंग, वैल्यू रंग, और दोनों हिस्सों के लिए अलग-अलग टेक्स्ट रंग, सभी हेक्स पिकर हैं। गहरे लेबल पर हल्का टेक्स्ट और चमकदार वैल्यू आज़माएँ, ज़्यादा कंट्रास्ट मिलेगा। प्रीव्यू टाइप करते ही अपडेट होता है।

SVG लें या PNG?

GitHub README, वेबसाइटों और जहाँ बैज ज़ूम हो सकता है उन सब के लिए SVG (हमेशा क्रिस्प)। जब वहाँ चिपकाना हो जहाँ SVG नहीं रेंडर होता — Word, Slack संदेश, कुछ स्क्रीनशॉट टूल — तब PNG।

PNG SVG से बड़ा क्यों होता है?

PNG को स्क्रीन साइज़ के 3 गुना रिज़ॉल्यूशन पर रेंडर किया जाता है ताकि हाई-डीपीआई स्क्रीन पर भी साफ़ दिखे। सामान्य बैज का SVG 1 KB से कम होता है; PNG आमतौर पर 5-15 KB। साइज़ ज़रूरी हो तो SVG, अनुकूलता ज़रूरी हो तो PNG।

संबंधित उपकरण