Emmet: محتوى النص `{text}` والحشو الصفري متعدد `$`

عبر الدروس الثمانية الأولى، تعلمت 8 عوامل هيكل HTML في Emmet (> + ^ * () .class #id [attr]) وعامل ترقيم واحد ($). لكن سيناريوهين "دلاليين" لا يزالان غير محلولين—"وضع 'اضغط هنا' داخل زر" و "10 بطاقات بمحتوى مرقم 001، 002." الأول يُحل بواسطة {text} إدخال محتوى النص، والثاني بواسطة الحشو الصفري متعدد $. يدمج هذا الدرس هذين العاملين، مرقيًا اختصاراتك من "بناء الهيكل" إلى "توليد المحتوى."

1. ما ستتعلمه

• محتوى النص {text} صيغة الأقواس المنحنية (بما في ذلك ا��تهريب التلقائي للأحرف الخاصة)
• {text} مجاور للأصل مقابل >{text} متداخل: الفرق بين "وضعي الموضع"
• دمج الترقيم $ مع {text}: كل سطر من المحتوى يحصل على رقم (عنصر 1، عنصر 2، ...)
• الحشو الصفري متعدد الأرقام $$ $$$ $$$$: توليد تلقائي لـ 001، 002، 003
• قيمة البداية $@N والعكسي $@-: بدء الترقيم من قيمة محددة، أو العد للخلف

2. قصة حقيقية لمطور واجهة أمامية

(1) نقطة الألم: الوسوم مبنية، لكن المحتوى لا يزال يحتاج كتابة حرفًا بحرف

كانت أليس تبني قسم "عرض الميزات" لصفحة هبوط منتج، يتطلب 6 بطاقات، كل منها تحتوي على أيقونة وعنوان ووصف وزر. كتبت أولاً هيكل البطاقة باستخدام () والوسوم الضمنية من الدرس 06:

section.features>(.card*6>i.icon+h3+p+button.btn)

اكتمل الهيكل في سطر واحد—وسع Emmet 6 بطاقات، كل منها بأيقونة و h3 و p و button. لكن بعد ذلك كان على أليس كتابة محتوى كل بطاقة: عناوين مثل "أداء عالي،" "سهولة الاستخدام،" "قابل للتوسع،" "آمن،" "متعدد المنصا��،" "مفتوح المصدر،" وصف من 30 حرفًا لكل منها، ونص الزر "اعرف المزيد" مكرر 6 مرات.

بدأت أليس يدويًا—HTML موسع بـ 30+ وسم فارغ، تملأ المحتوى واحدًا تلو الآخر. فقط العناوين استغرقت 5 دقائق، الأوصاف 10 دقائق أخرى، وأخيرًا كتبت "اعرف المزيد" 6 مرات (أو فقط نسختها ولصقتها).

الأسوأ كان الترقيم: قائمة منتجات من 100 صفحة مع <li>Page 1</li> حتى <li>Page 100</li> في أسفل كل صفحة. استسلمت أليس بعد 30 سطرًا. حاولت استخدام $: (ul.pagination>li>a{Page $})*100—أعطى التوسيع "Page 1" حتى "Page 100،" لكن الصفحات 1–9 خرجت كأرقام برقم واحد، بدت كخطأ. أرادت "01،" "02،" ...، "99،" "100"—الصفحات التسع الأولى تحتاج حشوًا صفريًا برقمين، بينما الباقي يمكن عرضه بشكل طبيعي.

(2) كيف يحلها {text} والحشو الصفري متعدد $

يوفر Emmet آليتين متكاملتين:

محتوى النص {text}: المحتوى داخل الأقواس المنحنية يُدرج كـ عقدة نصية داخل الوسم. يمكن كتابة 6 بطاقات أليس كـ:

section.features>(.card*6>(i.icon)+h3{High Performance}+p{This is the first description}+button.btn{Learn More})

لكن مع 6 بطاقات تحتاج كل منها محتوى مختلف، *6 لا يمكنه ببساطة تكرار نفس النص—هنا يأتي دور قوالب التكرار مع ترقيم $.

الترقيم $ والحشو الصفري متعدد الأرقام: $ هو رقم التسلسل الحالي؛ $$ يحشو صفريًا إلى رقمين؛ $$$ يحشو صفريًا إلى 3 أرقام. يمكن كتابة ترقيم أليس كـ:

(ul.pagination>li>a{Page $$})*100

الذي يتوسع إلى "Page 01،" "Page 02،" ...، "Page 99،" "Page 100"—التسعة الأولى محشوة صفريًا تلقائيًا إلى رقمين، ومن الصفحة 10 فصاعدًا تعرض بشكل طبيعي.

أعادت أليس كتابة قسم الميزات بالكامل في سطر واحد:

section.features>(h2{Product Features})+((.card>(i.icon)+h3{Feature $}+p{This is feature $ of 6}+button.btn{Learn More})*6)

والترقيم المكون من 100 سطر:

(ul.pagination>li>a{Page $$})*100

تحققت أليس وصاحت: "محتوى 6 بطاقات انتقل من 30 سطرًا مكتوبًا يدويًا إلى سطر واحد، والترقيم المكون من 100 سطر انتقل من 200 سطر إلى سطر واحد. زيادة كفاءة Emmet في سيناريوهات توليد المحتوى الدفعي هي 50 ضعفًا أو أكثر."

(3) الفوائد

{text} والحشو الصفري متعدد $ هما أساس Emmet لمعالجة سيناريوهات "مصنع المحتوى". الأول يتيح لك كتابة المحتوى مباشرة في الاختصار (لا حاجة لملئه بعد التوسيع)، بينما الثاني يجعل أرقام العناصر المتكررة تعمل تلقائيًا وتحشو صفريًا وتبدأ من وتعد للخلف. بعد هذا الدرس، تستطيع أليس كتابة 6 بطاقات ميزات في 15 ثانية وترقيم 100 صفحة في 10 ثوانٍ. يبدأ هذا الدرس أيضًا المرحلة 3—الدرس التالي يغطي نص Lorem Ipsum الوهمي وتفاصيل الوسوم الضمنية.

3. تعريف محتوى النص {text}

{text} هي صيغة Emmet لإدراج عقدة نصية داخل وسم. المحتوى داخل الأقواس المنحنية يصبح النص الداخلي للوسم حرفيًا—يمكن أن يتضمن أي أحرف (عربية، مسافات، علامات ترقيم، إلخ).

(1) قواعد الاختصار

نقطة أساسية: الأحرف الخاصة (< > &) داخل {text} يتم تهريبها تلقائيًا بواسطة Emmet إلى كيانات HTML (< > &). هذا متطلب أمان HTML5—يمنع إدخال المستخدم بأقواس زاوية من كسر هيكل المستند. إذا أردت إدراج وسوم HTML حقيقية (بحيث يتم تحليل <strong> كوسم بدلاً من نص)، ستحتاج إلى "المرشحات" المغطاة في الدرس 13، أو التعديل يدويًا بعد التوسيع.

(2) أين يمكن وضع {text} داخل وسم

4. وضعا {text}: مجاور للأصل مقابل متداخل

هذا هو التصميم الأكثر دقة في نظام محتوى النص في Emmet. عندما يتبع {text} اسم وسم مباشرة، لا يغير السياق الأصلي؛ لكن >{text} يدفع السياق مستوى واحدًا أعمق. الفرق هو الفخ الأكثر شيوعًا للمبتدئين.

(1) الوضع المجاور: a{click}+b{here}

عندما يتبع {text} اسم وسم مباشرة (بدون بادئة >)، يُعامل النص كـ ابن مباشر لذلك الوسم، لكنه لا يغير السياق الأصلي—مما يعني أن عناصر + الأخوة اللاحقة تبقى في نفس مستوى الوسم الحالي.

a{click}+b{here}

<a href="">click</a><b>here</b>

(2) الوضع المتداخل: a>{click}+b{here}

عندما يسبق {text} بـ >، يعامل Emmet >{text} كـ عنصر ابن ويدفع السياق الأصلي داخل a—عناصر + الأخوة اللاحقة تُلحق داخل a.

a>{click}+b{here}

<a href="">click<b>here</b></a>

(3) نص مختلط متعدد العناصر: p{Click }+a{here}+{ to continue}

هذا المثال الكلاسيكي من التوثيق الرسمي يوضح الفرق بين الوضعين:

p{Click }+a{here}+{ to continue}

<p>Click </p>
<a href="">here</a> to continue

p>{Click }+a{here}+{ to continue}

<p>Click <a href="">here</a> to continue</p>

نقطة أساسية: الاختصار الأول (الوضع المجاور) ينتج 3 عناصر على مستوى الجذر (p، a، نص مجرد)، بينما الثاني (الوضع المتداخل) يضع كامل "Click here to continue" داخل <p>. الفرق يأتي من >: في النسخة الأولى، {Click } يجعل p إلى "p مع نص click" (دون نزول)، بينما >{Click } في النسخة الثانية يدفع السياق من p إلى داخل p، لذا +a{here} و +{ to continue} اللاحقان كلاهما يُلحقان داخل p.

▶ مثال: محتوى نصي أساسي a{Click me} (الصعوبة ★)

أول مثال محتوى نصي من توثيق Emmet الرسمي—إضافة كتلة نص إلى وسم a.

الاختصار:

a{Click me}

التوسيع:

<a href="">Click me</a>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التفصيل: a هو اسم الوسم (الذي يتضمن افتراضيًا href="")، و {Click me} هو العقدة النصية. Emmet يضيف تلقائيًا سمة href="" إلى a (سلوك HTML5 الافتراضي)، ويصبح النص "Click me" عقدة ابنة لـ a. ملاحظة: {text} بعد وسم a لا يغير السياق الأصلي—إذا تبع بـ +b{some}، سيكون b أخًا لـ a، وليس ابنًا لـ a.

▶ مثال: نص مختلط متعدد العناصر p>{Click }+a{here}+{ to continue} (الصعوبة ★★)

استخدم الوضع المتداخل لوضع كامل "Click here to continue" داخل <p>.

الاختصار:

p>{Click }+a{here}+{ to continue}

التوسيع:

<p>Click <a href="">here</a> to continue</p>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التفصيل: p>{Click } يدفع السياق داخل p، ويصبح "Click " أول ابن نصي لـ p؛ +a{here} يلحق a مع نص "here" داخل p؛ +{ to continue} يلحق النص المجرد " to continue" داخل p. p النهائي يحتوي على 3 أبناء: نص "Click "، وسم a، ونص " to continue". بدون > (أي p{Click }+a{here}+{ to continue})، سيحتوي p فقط على "Click "، وسيصبح a والنص المجرد أخوة على مستوى الجذر—ينتج عنه <p>Click </p> متبوعًا بـ <a>here</a> ونص مجرد.

5. الترقيم $ والحشو الصفري متعدد الأرقام

$ هو عن��صر الترقيم النائب في Emmet (مقدم في الدرس 08). يوسع هذا الدرس استخدامه باستخدامين متقدمين: الحشو الصفري متعدد الأرقام و التحكم بالبدء/العكس.

(1) الحشو الصفري متعدد الأرقام $$ $$$ $$$$

استخدم الدرس 08 $ مفردًا لتوليد 1، 2، 3. عندما يتجاوز نطاق الأرقام 9 (مثل 100 رقم صف جدول)، $ المفرد يعرض عروض أرقام مختلطة: 1، 2، ...، 9، 10، 11. رموز $ المتعددة تجعل الترقيم يحشو صفريًا تلقائيًا إلى عرض أدنى ثابت:

نقطة أساسية: عدد رموز $ يحدد الحد الأدنى لعرض الحشو. إذا تجاوز الرقم الفعلي هذا العرض، لا يقتطع Emmet—*12 مع $$ يتوسع إلى 01، 02، ...، 09، 10، 11، 12 (التسعة الأولى محشوة صفريًا؛ الثلاثة الأخيرة تعرض بشكل طبيعي). هذه الدلالة هي "عرض الحشو = الحد الأدنى للعرض، وليس الأقصى."

(2) قيمة البداية $@N والعكسي $@-

افتراضيًا، يبدأ الترقيم من 1 تصاعديًا. استخدم @N للبدء من N، و @- للتنازلي:

ملاحظة: $@-3 مدعوم في Emmet 1.2+. التركيبات الشائعة هي $@N (قيمة البداية) و $@- (تنازلي بدءًا من عدد التكرارات). في @N، N هو قيمة البداية، وليس قيمة النهاية.

▶ مثال: ترقيم + نص ul>li{item $}*3 (الصعوبة ★)

تضمين $ داخل {text} بحيث يحمل محتوى كل li رقمًا تلقائيًا.

الاختصار:

ul>li{item $}*3

التوسيع:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التفصيل: li{item $} هو "وسم li + كتلة نص (عنصر + رقم حالي)،" و *3 يكرر هذا القالب 3 مرات. كل تكرار يستبدل $ برقم التكرار الحالي (1، 2، 3). عناصر li الثلاثة النهائية كل منها يحتوي على كتلة نص "عنصر N." هذا هو نمط Emmet الأساسي لسيناريوهات مثل قوائم المهام، قوائم الميزات، وترقيم الأسئلة الشائعة. ملاحظة: المسافة بعد "item" هي جزء من النص (وليست عاملًا).

▶ مثال: حشو صفري ul>li{$$}*5 (الصعوبة ★)

حشو صفري برقمين—العناصر التسعة الأولى تحشو صفريًا تلقائيًا؛ الأرقام بعد 9 تعرض بشكل طبيعي.

الاختصار:

ul>li{$$}*5

التوسيع:

<ul>
  <li>01</li>
  <li>02</li>
  <li>03</li>
  <li>04</li>
  <li>05</li>
</ul>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التفصيل: $$ تعني "اعرض الرقم الحالي برقمين." *5 يكرر li 5 مرات، بقيم $ هي 1، 2، 3، 4، 5—بعد الحشو الصفري برقمين، تصبح 01، 02، 03، 04، 05. مع *12، سيكون التوسيع 01، 02، ...، 09، 10، 11، 12—التسعة الأولى محشوة صفريًا، بينما الثلاثة الأخيرة تتجاوز رقمين وتعرض بشكل طبيعي (بدون اقتطاع). سيناريوهات الحشو الصفري: أرقام صفحات الترقيم، الأشهر، رموز SKU للمنتجات.

▶ مثال: قيمة بداية + عكسي ol>li{Step $@3}*5 (الصعوبة ★★)

عملية من 5 خطوات تبدأ من 3—استخدم $@3 للتحكم في قيمة البداية.

الاختصار:

ol>li{Step $@3}*5

التوسيع:

<ol>
  <li>Step 3</li>
  <li>Step 4</li>
  <li>Step 5</li>
  <li>Step 6</li>
  <li>Step 7</li>
</ol>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التفصيل: $@3 تعني "الرقم الحالي يبدأ من 3." ol>li يجعل li ابنًا مرتبًا لـ ol؛ {Step $@3} هو قالب النص حيث "Step " هي سلسلة ثابتة و $@3 هو الرقم الحالي بدءًا من 3. *5 يكرر li 5 مرات، بالأرقام 3، 4، 5، 6، 7. هذا هو نمط Emmet القياسي لسيناريوهات مثل "ترقيم يبدأ من صفحة معينة،" "فصول منتج تبدأ من الفصل 3،" و "أرقام خطوات لا تبدأ من 1." للعكسي (من 5 نزولاً إلى 1)، استخدم $@- بدلاً من ذلك (يتراجع تلقائيًا بناءً على عدد التكرارات).

6. مثال كامل: مرقم صفحات + ترقيم + محتوى نصي

ادمج {text}، الحشو الصفري متعدد $، وقيمة بدء $@N—مرقم صفحات من 100 صفحة مع عرض كل صفحة بصيغة محشوة صفريًا برقمين.

▶ مثال: مرقم صفحات 100 صفحة (الصعوبة ★★)

الاختصار:

(ul.pagination>li.page$$>a{Page $$})*100

التوسيع (مقتطف):

<ul class="pagination">
  <li class="page01"><a href="">Page 01</a></li>
  <li class="page02"><a href="">Page 02</a></li>
  <li class="page03"><a href="">Page 03</a></li>
  <!-- ... -->
  <li class="page09"><a href="">Page 09</a></li>
  <li class="page10"><a href="">Page 10</a></li>
  <li class="page11"><a href="">Page 11</a></li>
  <!-- ... -->
  <li class="page99"><a href="">Page 99</a></li>
  <li class="page100"><a href="">Page 100</a></li>
</ul>

الناتج:

TEXT 📖 للعرض فقط

📋 Copy

التفصيل: هذا المثال يدمج جميع عوامل هذا الدرس—{} (محتوى نصي)، $ (ترقيم)، $$ (حشو صفري برقمين)، () (تجميع)، * (ضرب)، .class، > (تداخل). الأقواس الخارجية تجعل قالب li الكامل وحدة قابلة للتكرار؛ li.page$$ يستخدم $$ في كل من اسم الفئة و {text}، مما يضمن بقاء الفئة وأرقام المحتوى متزامنة؛ وسم a يعمل كابن لـ li بمحتوى "Page XX." ملاحظة: HTML الفعلي لـ 100 صفحة يحتوي على 100 عنصر li؛ هذا المقتطف يظهر فقط أول 3، 9–11، و 99–100. عرض الحشو = 2: الصفحات 1–9 هي 01–09، ومن الصفحة 10 فصاعدًا تتجاوز الأرقام رقمين وتعرض بشكل طبيعي (10، 11، ...). للحشو الصفري بـ 3 أرقام (001–100)، استخدم $$$ بدلاً من ذلك.

❓ أسئلة شائعة

📖 ملخص

• {text} هي صيغة محتوى النص؛ المحتوى داخل الأقواس المنحنية يصبح عقدة النص للوسم (مثل li{item $}*3 → "item 1،" "item 2،" "item 3")
• < > & داخل {text} تُهرب تلقائيًا إلى كيانات HTML (< > &)
• الوضع المجاور a{text} لا يغير السياق الأصلي؛ الوضع المتداخل a>{text} يدفع السياق مستوى واحدًا أعمق
• $ هو عنصر الترقيم النائب؛ $ المتعددة تحشو صفريًا تلقائيًا: $$ = رقمان، $$$ = 3 أرقام، $$$$ = 4 أرقام (عرض الحشو = الحد الأدنى للعرض؛ لا اقتطاع عند التجاوز)
• $@N يبدأ الترقيم من N؛ $@- ينتج ترقيمًا تنازليًا (بناءً على عدد التكرارات)

📝 تمارين

1. أساسي (الصعوبة ★): اكتب اختصارات Emmet من سطر واحد تتوسع إلى: (أ) وسم button{Sign Up}؛ (ب) وسم <strong> بنص "تحذير"؛ (ج) فقرة p>lorem (أي <p>Lorem ipsum...</p>، غير مغطاة في هذا الدرس؛ Lorem مغطى في الدرس التالي).
2. متوسط (الصعوبة ★★): اكتب "قائمة أشهر" مكونة من 12 عنصرًا ol>li{Month $$}*12 وتحقق من التوسي�� (يجب أن يكون "Month 01" حتى "Month 12"). ثم أعد كتابتها كـ "قائمة أرباع" ol>li{Quarter $}*4، متحققًا من الترقيم من 1–4. أخيرًا، اكتب "قسم ميزات منتج" بـ 5 بطاقات، كل منها تحتوي على <h3>Feature $</h3> و <p>Description for feature $</p>، كلها في سطر Emmet واحد.
3. متقدم (الصعوبة ★★★): اكتب مرقم صفحات من 100 صفحة بحشو صفري بـ 3 أرقام (Page 001 حتى Page 100). المتطلبات: (أ) class باستخدام page$$$ (حشو صفري بـ 3 أرقام)؛ (ب) نص باستخدام Page $$$ (حشو صفري بـ 3 أرقام)؛ (ج) صفحة البداية باستخدام $@1 (نفس السلوك الافتراضي لكن مصرح به بشكل صريح). تحقق من التوسيع في سطر Emmet واحد، واشرح لماذا $$$ لا يقتطع الأرقام بعد 99 (تلميح: الحشو الصفري في Emmet = الحد الأدنى للعرض، وليس الحد الأقصى للعرض).

فريق Web-Tutorial التقني

منصة دروس برمجية يديرها عدة مطورين. كل درس يتم كتابته ومراجعته بواسطة مطورين متخصصين في المجال. نعمل على ضمان دقة وموثوقية المحتوى — إذا لاحظت أي مشكلة، فيرجى إخبارنا.

من نحن