التوثيق والمرجع

مرجع معلمات API الكامل، دليل تمييز النص، وضع عرض الأيقونات فقط

البنية الأساسية

hl_syntax_desc

# صيغة البنية
?text=نص عادي{{نص مميز}}نص عادي متابعة
&hlcolor=FF5733

تفاصيل المعاملات

hlcolor hl_param_hlcolor

hl_param_hlcolor_desc

hl_example_prefix： ?text=Mock{{Img}}.Dev&hlcolor=FF5733

hlcolor2 hl_param_hlcolor2

hl_param_hlcolor2_desc

hl_example_prefix： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6

hlgradient hl_param_hlgradient

hl_param_hlgradient_desc

horizontal أفقي (من اليسار لليمين) vertical عمودي (من الأعلى للأسفل) diagonal قطري (من أعلى اليسار لأسفل اليمين)

hl_example_prefix： ?text={{Hello}}&hlcolor=EC4899&hlcolor2=8B5CF6&hlgradient=vertical

hlfont hl_param_hlfont

hl_param_hlfont_desc

hl_example_prefix： ?text={{Brand}}&hlfont=Poppins-Bold

hlbold hl_param_hlbold

hl_param_hlbold_desc

hl_example_prefix： ?text={{Important}}&hlbold=true

أمثلة كاملة

hl_example_prefix 1：hl_ex1_title

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

hl_effect_prefix"MockImg.Dev" — Img يظهر باللون الأحمر

hl_example_prefix 2：hl_ex2_title

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

التأثير: "Gradient" يظهر بتدرج أفقي من الوردي إلى البنفسجي

hl_example_prefix 3：hl_ex3_title

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

التأثير: "MockImg" يظهر باللون الأزرق مع خط Poppins-Bold

hl_example_prefix 4：hl_ex4_title

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

التأثير: "Important" يظهر باللون الأحمر والخط العريض

hl_example_prefix 5：hl_ex5_title

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

التأثير: "Premium" يظهر بتدرج قطري (من الذهبي إلى الأحمر) مع خط Montserrat-Bold

hl_example_prefix 6：hl_ex6_title

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

التأثير: "MockImg" والنص البديل يظهران باللون الأزرق (نمط تمييز مشترك)

hl_example_prefix 7：hl_ex7_title

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

التأثير: "MockImg" يظهر باللون الأخضر، النص المتبقي يستخدم اللون الافتراضي

hl_example_prefix 8：hl_ex8_title

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

التأثير: في الوضع الداكن، "Mode" يظهر بتمييز ذهبي

ملاحظات

hl_note_1
hl_note_2
hl_note_3
hl_note_4
hl_note_5

شروط التفعيل

تم توفير معامل icon
لا يوجد معامل text، أو text فارغ

قواعد حجم الأيقونة

تلقائي: حجم الأيقونة = 80% من البُعد الأصغر للصورة (الحد الأدنى 24 بكسل، الحد الأقصى 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

التأثير: أيقونة مستخدم داخل دائرة مع إطار — مثالية للصور الرمزية البديلة

أيقونة+نص مقابل أيقونة فقط

الوضع	الرابط	التأثير
أيقونة فقط (بدون نص)	`?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
نتائج النسبة تُقرّب تلقائياً إلى بكسل صحيح
إذا تجاوز الهامش نصف أبعاد الصورة، قد تصبح منطقة المحتوى صغيرة جداً ويقل حجم الخط تلقائياً إلى 12px كحد أدنى

الميزات المتقدمة — مصحح واجهة برمجة تطبيقات تفاعلي

نظام الأيقونات

التوثيق والمرجع

البنية الأساسية

تفاصيل المعاملات

أمثلة كاملة

ملاحظات

شروط التفعيل

قواعد حجم الأيقونة

أمثلة

أيقونة+نص مقابل أيقونة فقط

ملاحظات

نظرة عامة

السلوك الافتراضي

تفاصيل التنسيق

أمثلة

ملاحظات