فهم أساسيات لغة Jade: تنظيم HTML بكفاءة وسهولة

في لغة Jade، التي تعرف أيضًا بـ Pug، يُستخدم الشريط العمودي (|) كوسيلة لتعريف نص نصي غير قابل للتنسيق أو العمليات الأخرى. يعمل الشريط العمودي على تضمين النص الذي يليه كمحتوى نصي خام داخل العنصر Jade الذي يتبعه، دون تنسيق أو تعديل.

عند تحويل الكود HTML إلى Jade الذي قمت بتوفيره، يمكن رؤية استخدام الشريط العمودي بوضوح في الكود المصدر الذي تم إنشاؤه. فمثلًا، في الجزء التالي:

  |   
  body
    .container
      .header
        ul.nav.nav-pills.pull-right
          li.active
            a(href='#') Home
          |           
          li
            a(href='#') About
          |           
          li
            a(href='#') Contact

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

تُستخدم لغة Jade أو Pug كلغة قالب لإنشاء صفحات HTML بطريقة أكثر انخراطًا وسهولة. إليك بعض المعلومات الإضافية حول بعض السمات والتقنيات المرتبطة بلغة Jade:

1. التعامل مع الهوامش:
   في Jade، يُمكن تحديد الهوامش (المسافات البيضاء) للتحكم في هيكل الصفحة. على سبيل المثال، إذا كنت تريد تضمين عنصر داخل عنصر آخر، يمكنك استخدام الهامش لتحديد تفاصيل التضمين.

   jadeCopy code
   body
     .container
       .header
         ul.nav.nav-pills.pull-right
           li.active
             a(href='#') Home
           li
             a(href='#') About
   

2. التعامل مع الأطفال والأشقاء:
   يُمكن استخدام Jade لتحديد العلاقات بين العناصر وتنظيمها بشكل هرمي. يمكن للعناصر أن تكون أطفالًا لعناصر آخرى، ويمكن تحديد العلاقات باستخدام الهوامش والترتيب الصحيح للسطور.

   jadeCopy code
   .parent
     .child
       p This is a child element.
     .sibling
       p This is a sibling element.
   

3. الشرطيات والدورة التكرارية:
   يُمكن استخدام Jade لتنفيذ الشرطيات والدورات التكرارية. يوفر ذلك إمكانية إدارة التكرار والعرض الشرطي بشكل أكثر فاعلية.

   jadeCopy code
   - var items = ['Item 1', 'Item 2', 'Item 3']
   each item in items
     li= item
   

4. التعامل مع المتغيرات والتعابير:
   يُمكن استخدام المتغيرات والتعابير في Jade لتحقيق ديناميكية أكبر في الصفحة. يمكن تعيين قيم للمتغيرات واستخدامها في الصفحة.

   jadeCopy code
   - var pageTitle = 'My Website'
   title= pageTitle
   

5. التعامل مع الوسوم والخصائص:
   يُمكن تحديد الوسوم والخصائص بوضوح في Jade بدون الحاجة إلى استخدام علامات الإغلاق. السمات يمكن تعيينها باستخدام القوس الزاوي.

   jadeCopy code
   a(href='#', class='link', target='_blank') Click here
   

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