สร้าง GitHub Badge
ประกอบ badge URL จาก shields.io พร้อม label, message, สี, สไตล์ และ logo ดู preview สด ๆ คัดลอก Markdown/HTML ไปใช้ใน README ได้เลย ฟรี
Loading tool...
สร้าง GitHub Badge คืออะไร?
GitHub Badge Builder ช่วยประกอบ badge URL จาก shields.io ด้วยภาพ: ใส่ label, message, สี, สไตล์ และ logo ได้ พร้อม preview สด ๆ และ output ทั้ง Markdown และ HTML สำหรับ README ที่คัดลอกไปใช้ได้ทันที
ประโยชน์หลัก
- ไม่ต้องจำ URL syntax ของ shields.io
- Preview สด ๆ แสดง badge ตรงตามที่ GitHub จะเรนเดอร์
- output ทั้ง Markdown และ HTML คัดลอกได้คลิกเดียว
- รองรับ link ครอบ badge และ logo ได้
กรณีการใช้งาน
- •ใส่ build status และ version badge ใน README
- •สร้าง dashboard สถานะโปรเจกต์ใน repository
- •มาตรฐานสไตล์ badge ทั่วทั้งองค์กร
- •ใส่ badge ที่คลิกได้ link ไป docs หรือ release
- •ทำ badge สำหรับโปรเจกต์ส่วนตัวหรือ portfolio
สร้าง GitHub Badge
- ใส่ label และ message: พิมพ์ label (ฝั่งซ้าย) และ message (ฝั่งขวา) เช่น build กับ passing
- เลือกสไตล์และสี: เลือกจากห้าสไตล์และสิบสามสี preview จะอัปเดตทันที
- ใส่ link และ logo: ใส่ URL เพื่อให้ badge คลิกได้ และใส่ logo slug จาก simple-icons ได้
- คัดลอก Markdown หรือ HTML: กด Copy ที่รูปแบบที่ต้องการ แล้ววางลงใน README.md ของคุณ
คุณสมบัติหลัก
- Preview สด ๆ อัปเดตทุกครั้งที่พิมพ์
- ห้าสไตล์ badge: flat, flat-square, plastic, for-the-badge, social
- สี 13 แบบพร้อมรองรับ hex ผ่าน shields.io
- Output ทั้ง Markdown และ HTML พร้อมปุ่มคัดลอก
- รองรับ link ครอบ badge ให้คลิกได้
- ใส่ logo parameter สำหรับ icon โปรเจกต์ได้
คำถามที่พบบ่อย
shields.io คืออะไร?
shields.io คือบริการฟรีที่สร้างรูป badge จาก URL แบบ on the fly เป็นมาตรฐาน de facto สำหรับ badge ใน README บน GitHub รองรับ data source หลายพันตัวและปรับสไตล์ได้
dash และ underscore ทำงานอย่างไรใน badge?
ใน URL ของ shields.io dash ใช้แยก label, message, และ color ดังนั้น dash ตัวจริงต้อง escape เป็น double dash (--) ตัวสร้างจัดการ encoding นี้ให้อัตโนมัติ
ใช้สี hex แบบ custom ได้ไหม?
ได้ dropdown มีชื่อสีมาตรฐาน แต่ shields.io ยอมรับค่า hex โดยไม่ต้องใส่ # นำหน้า แทนส่วน color ใน URL ด้วยค่า hex 3 หรือ 6 หลักได้เลย
badge จะทำให้ README ช้าลงหรือไม่?
badge แต่ละตัวคือ request หนึ่งครั้งไป img.shields.io badge ไม่กี่ตัวไม่มีผล แต่ถ้าใส่เป็นสิบอาจทำให้ render ช้า ใช้พอประมาณและพิจารณารวมข้อมูลที่เกี่ยวข้องใน badge เดียว
