เอกสารและข้อมูลอ้างอิง

ข้อมูลอ้างอิงพารามิเตอร์ API ฉบับสมบูรณ์ คู่มือการไฮไลท์ข้อความ โหมดแสดงเฉพาะไอคอน

ไวยากรณ์พื้นฐาน

ใช้ {{...}} ในพารามิเตอร์ text เพื่อระบุส่วนที่ต้องการเน้น ข้อความที่เน้นทุกส่วนจะใช้สไตล์เดียวกัน เคล็ดลับ: คุณสามารถพิมพ์ {{...}} โดยตรงในช่อง เนื้อหาข้อความ ด้านบน — ระบบจะตรวจจับและใช้การเน้นอัตโนมัติ

# รูปแบบไวยากรณ์
?text=ข้อความปกติ{{ข้อความไฮไลต์}}ข้อความปกติต่อ
&hlcolor=FF5733

รายละเอียดพารามิเตอร์

hlcolor สีเน้นข้อความ

ตั้งค่าสีเน้นข้อความ รองรับรูปแบบ HEX (เช่น FF5733) หรือชื่อสี (เช่น red)

ตัวอย่าง： ?text=Mock{{Img}}.Dev&hlcolor=FF5733

hlcolor2 สีไล่ระดับสีเน้นข้อความ 2

ตั้งค่าสีที่สองสำหรับการไล่ระดับสีเน้นข้อความ การตั้งค่านี้จะเปิดใช้งานเอฟเฟกต์ไล่ระดับสีโดยอัตโนมัติ โดยใช้ hlcolor เป็นสีเริ่มต้น

ตัวอย่าง： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6

hlgradient ทิศทางการไล่ระดับสีเน้นข้อความ

ตั้งค่าทิศทางการไล่ระดับสี ค่าเริ่มต้นเป็น horizontal เมื่อไม่ได้ตั้งค่า

horizontal แนวนอน (ซ้ายไปขวา) vertical แนวตั้ง (บนลงล่าง) diagonal แนวทแยง (ซ้ายบนลงขวาล่าง)

ตัวอย่าง： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical

hlfont ฟอนต์เน้นข้อความ

ระบุฟอนต์อิสระสำหรับข้อความที่เน้น ค่าคือชื่อไฟล์ฟอนต์ (ไม่รวมนามสกุล .ttf)

ตัวอย่าง： ?text={{Brand}}&hlfont=Poppins-Bold

hlbold ตัวหนาเน้นข้อความ

ทำให้ข้อความที่เน้นเป็นตัวหนา ค่า: true หรือ 1

ตัวอย่าง： ?text={{Important}}&hlbold=true

ตัวอย่างเต็ม

ตัวอย่าง 1：เน้นสีแบบทึบ

https://mockimg.dev/600x400.png?text=Mock{{Img}}.Dev&hlcolor=FF5733

เอฟเฟกต์:"MockImg.Dev" — Img แสดงเป็นสีแดง

ตัวอย่าง 2：เน้นแบบไล่ระดับสี

https://mockimg.dev/600x400.png?text={{Gradient}}&hlcolor=EC4899&hlcolor2=8B5CF6

เอฟเฟกต์: "Gradient" แสดงเป็นไล่สีแนวนอนจากชมพูไปม่วง

ตัวอย่าง 3：เน้นด้วยฟอนต์ที่กำหนดเอง

https://mockimg.dev/600x400.png?text={{MockImg}}&hlfont=Poppins-Bold&hlcolor=3B82F6

เอฟเฟกต์: "MockImg" แสดงเป็นสีน้ำเงินด้วยฟอนต์ Poppins-Bold

ตัวอย่าง 4：เน้นแบบตัวหนา

https://mockimg.dev/600x400.png?text={{Important}}&hlbold=true&hlcolor=EF4444

เอฟเฟกต์: "Important" แสดงเป็นสีแดงตัวหนา

ตัวอย่าง 5：แบบผสม (ไล่ระดับสี + ฟอนต์ + ตัวหนา)

https://mockimg.dev/600x400.png?text={{Premium}}&hlcolor=FFD700&hlcolor2=FF6B6B&hlgradient=diagonal&hlfont=Montserrat-Bold

เอฟเฟกต์: "Premium" แสดงด้วยไล่สีแนวทแยง (ทองไปแดง) ในฟอนต์ Montserrat-Bold

ตัวอย่าง 6：เน้นหลายส่วน

https://mockimg.dev/600x400.png?text={{MockImg}}+和+{{占位图}}&hlcolor=3B82F6

เอฟเฟกต์: "MockImg" และข้อความตัวอย่างแสดงเป็นสีน้ำเงิน (ใช้สไตล์ไฮไลต์ร่วมกัน)

ตัวอย่าง 7：เน้นในข้อความ CJK

https://mockimg.dev/600x400.png?text={{MockImg}}+占位图服务&hlcolor=10B981

เอฟเฟกต์: "MockImg" แสดงเป็นสีเขียว ข้อความที่เหลือใช้สีเริ่มต้น

ตัวอย่าง 8：ธีมมืด + เน้นข้อความ

https://mockimg.dev/600x400.png?theme=dark&text=Dark+{{Mode}}&hlcolor=FBBF24

เอฟเฟกต์: ในธีมมืด "Mode" แสดงเป็นไฮไลต์สีทอง

หมายเหตุ

เครื่องหมาย {{...}} ไม่ถูกนับรวมในการคำนวณความกว้างของข้อความและไม่มีผลต่อการจัดวาง
ไม่รองรับเครื่องหมาย {{...}} แบบซ้อน — เครื่องหมายด้านในจะถูกจัดการเป็นข้อความธรรมดา
ข้อความที่เน้นทุกส่วนใช้การตั้งค่าสไตล์ hl* เดียวกัน
การเน้นข้อความทำงานกับรูปแบบผลลัพธ์ทั้งหมด (SVG, PNG, JPEG, WebP, AVIF ฯลฯ)
เครื่องหมายเน้นข้อความทำงานกับข้อความหลายบรรทัดได้เช่นกัน (ใช้ \n สำหรับขึ้นบรรทัดใหม่)

เงื่อนไขการทำงาน

ระบุพารามิเตอร์ icon
ไม่มีพารามิเตอร์ text หรือ text ว่างเปล่า

กฎขนาดไอคอน

อัตโนมัติ: ขนาดไอคอน = 80% ของมิติภาพที่เล็กกว่า (ขั้นต่ำ 24px, สูงสุด 90%)

กำหนดเอง: ใช้พารามิเตอร์ iconsize เพื่อแทนที่การคำนวณอัตโนมัติ

ตัวอย่าง

ไอคอนสีทึบ

https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FF5733

เอฟเฟกต์: ไอคอนหัวใจขยายและจัดกึ่งกลางอัตโนมัติในสีแดง

ไอคอนแบบไล่ระดับสี

https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&iconcolor2=FF6B6B&icongradient=diagonal

เอฟเฟกต์: ไอคอนดาวแบบไล่ระดับสีแนวทแยงจากทองไปแดง

โปร่งใส + ไอคอน

https://mockimg.dev/200x200.png?icon=outline/user&iconcolor=3B82F6&bg=transparent

เอฟเฟกต์: ไอคอนผู้ใช้บนพื้นหลังโปร่งใส — เหมาะสำหรับอวาตาร์

พื้นหลังไล่ระดับสี + ขอบมน

https://mockimg.dev/600x400.png?icon=outline/heart&iconcolor=FFFFFF&gradient=horizontal&bgcolor2=EC4899&radius=20

เอฟเฟกต์: ไอคอนหัวใจสีขาวบนพื้นหลังไล่สีชมพูพร้อมขอบมน

ธีมมืด + ไอคอน

https://mockimg.dev/600x400.png?icon=filled/star&iconcolor=FFD700&theme=dark

เอฟเฟกต์: ไอคอนดาวสีทองบนพื้นหลังมืด

ขอบวงกลม (อวาตาร์)

https://mockimg.dev/400x400.png?icon=outline/user&iconcolor=3B82F6&radius=200&border=4&bordercolor=3B82F6

เอฟเฟกต์: ไอคอนผู้ใช้ในวงกลมพร้อมเส้นขอบ — เหมาะสำหรับ Placeholder อวาตาร์

ไอคอน+ข้อความ เทียบกับ ไอคอนเท่านั้น

โหมด	URL	เอฟเฟกต์
ไอคอนเท่านั้น (ไม่มีข้อความ)	`?icon=outline/heart`	ไอคอนขยายและจัดกึ่งกลางอัตโนมัติ ไม่มีข้อความ
ไอคอน + ข้อความว่าง	`?icon=outline/heart&text=`	เหมือนกับโหมดไอคอนเท่านั้น
ไอคอน + ข้อความ	`?icon=outline/heart&text=Love`	ไอคอนและข้อความเคียงข้างกัน (พฤติกรรมเดิม)
ไม่มีไอคอนไม่มีข้อความ	`600x400.png`	ข้อความขนาด (พฤติกรรมเริ่มต้น)

หมายเหตุ

ทำงานกับรูปแบบผลลัพธ์ทั้งหมด (SVG, PNG, JPEG, WebP, AVIF ฯลฯ)
พารามิเตอร์ไอคอนทั้งหมด (iconcolor, iconcolor2, icongradient, iconsize) ทำงานได้ตามปกติ
เอฟเฟกต์พื้นหลังทั้งหมด (โปร่งใส, ไล่ระดับสี, ลาย, สัญญาณรบกวน, เส้นขอบ, มุมมน) สามารถใช้ร่วมกับโหมดไอคอนเท่านั้นได้
ทำงานกับขนาดเล็กได้เช่นกัน — เหมาะสำหรับไฟวิคอน: 32x32.ico?icon=filled/star&iconcolor=FFD700

ภาพรวม

พารามิเตอร์ padding ควบคุมช่องว่างรอบข้อความและไอคอน รองรับ 4 รูปแบบ: ค่าพิกเซลเดียว อัตราส่วนเดียว สองค่า (แนวตั้ง + แนวนอน) สี่ค่า (CSS ตามเข็มนาฬิกา)

# รูปแบบที่รองรับ
?padding=20
?padding=1/6
?padding=10,20
?padding=10,20,30,40

พฤติกรรมเริ่มต้น

หากไม่ระบุ padding จะใช้ค่าเริ่มต้น (เหมือนเวอร์ชันก่อนหน้า):

ซ้ายและขวา: 5% ของความกว้าง บนและล่าง: 20% ของความสูง

รายละเอียดรูปแบบ

20 ค่าพิกเซลเดียว

ทั้งสี่ด้านใช้ค่าพิกเซลเดียวกัน

padding=20

1/6 ค่าอัตราส่วนเดียว

ทั้งสี่ด้านใช้อัตราส่วน บน/ล่างตามความสูง ซ้าย/ขวาตามความกว้าง ผลลัพธ์ปัดเศษอัตโนมัติ

padding=1/6 → 600×400 → บน/ล่าง 67px ซ้าย/ขวา 100px

10,20 สองค่า (แนวตั้ง + แนวนอน)

ควบคุมช่องว่างแนวตั้งและแนวนอนแยกกัน ผสมพิกเซลและอัตราส่วนได้

padding=10,20 → บน/ล่าง 10px ซ้าย/ขวา 20px
padding=1/8,15 → บน/ล่าง = ความสูง/8 ซ้าย/ขวา 15px
padding=30,1/10 → บน/ล่าง 30px ซ้าย/ขวา = ความกว้าง/10

10,20,30,40 สี่ค่า (CSS ตามเข็มนาฬิกา)

ควบคุม CSS อิสระ: บน ขวา ล่าง ซ้าย บน/ล่างตามความสูง ซ้าย/ขวาตามความกว้าง ผสมพิกเซลและอัตราส่วนได้

padding=10,20,30,40 → บน 10 ขวา 20 ล่าง 30 ซ้าย 40 (ทั้งหมด px)
padding=1/8,1/6,15,1/10 → บน h/8 ขวา w/6 ล่าง 15px ซ้าย w/10 (ผสม)

ตัวอย่าง

ข้อความสั้น — ลดช่องว่าง

https://mockimg.dev/480x200.svg?text=IP&bold=true&padding=1/10

ข้อความสั้นเช่น "IP" ใช้ padding=1/10 เพื่อเลย์เอาต์ที่กระชับขึ้น

ไม่มีช่องว่าง

https://mockimg.dev/600x400.svg?text=Full&padding=0

ตั้ง padding=0 เพื่อให้เนื้อหาเต็มรูปภาพ

ไอคอน + ข้อความ — เลย์เอาต์กระชับ

https://mockimg.dev/600x400.svg?icon=outline/heart&text=Love&padding=1/8

ไอคอนและข้อความเรียงข้างกัน ช่องว่างปานกลาง

พื้นที่หัวข้อ — ช่องว่างด้านบนมาก

https://mockimg.dev/600x300.svg?text=Title&padding=40,10,5,10

ช่องว่างด้านบนมากเพื่อสร้างบรรยากาศหัวข้อ ด้านล่างกระชับ

เมนูซ้าย — ช่องว่างด้านซ้ายมาก

https://mockimg.dev/800x400.svg?text=Content&padding=20,10,20,60

ช่องว่างด้านซ้ายมากเพื่อรองรับแถบนำทาง

หมายเหตุ

ตัวเศษและตัวส่วนในค่าอัตราส่วนต้องเป็นจำนวนบวก
ค่าพิกเซลไม่สามารถเป็นลบได้ — ค่าลบจะถูกแก้เป็น 0 อัตโนมัติ
ผลลัพธ์อัตราส่วนจะถูกปัดเศษเป็นพิกเซลจำนวนเต็มอัตโนมัติ
หาก padding เกินครึ่งหนึ่งของขนาดรูปภาพ พื้นที่เนื้อหาอาจเล็กมากและขนาดฟอนต์จะลดลงเหลือ 12px ขั้นต่ำ

คุณสมบัติขั้นสูง — เครื่องมือดีบัก API แบบอินเทอแอคทีฟ

ระบบไอคอน

เอกสารและข้อมูลอ้างอิง

ไวยากรณ์พื้นฐาน

รายละเอียดพารามิเตอร์

ตัวอย่างเต็ม

หมายเหตุ

เงื่อนไขการทำงาน

กฎขนาดไอคอน

ตัวอย่าง

ไอคอน+ข้อความ เทียบกับ ไอคอนเท่านั้น

หมายเหตุ

ภาพรวม

พฤติกรรมเริ่มต้น

รายละเอียดรูปแบบ

ตัวอย่าง

หมายเหตุ