شرح علامة b:includable و b:include في بلوجر

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

بل هناك حل أخر ومفيد جداً وسوف يوفر عليك الوقت والجهد بدلاً من تكرار الأكواد ، حيث يمكنك استخدام علامة b:includable وتعتبر هذه العلامة من أهم العلامات التي سيتم استخدامها كثير ، وهذه العلامة قد تجدها في جميع الأدوات ، حيث يمكنك تضمين مجموعة من الأكواد وإعادة استخدامها مرة أخرى أو عدة مرات في صفحات مختلفة ، حيث يمكنك إعادة استخدام الأكواد من خلال سطر واحد فقط عن طريق علامة b:include

ملحوظة : تستخدم علامة b:includable لتضمين الأكواد أو تخزينها ويتم استخدام العلامة b:include لاستدعاء هذه الأكواد في أي مكان في القالب

مهم

يمكن إضافة علامة b:includable بداخل علامة b:defaultmarkup

يمكن إضافة علامة b:includable بداخل علامة b:widget

في حالة استخدام علامة b:widget يجب أن يكون هناك علامة b:includable وله معرف main

يمكن أن تحتوى العلامة b:widget على العديد من علامات b:includable

يمكن أن تحتوى العلامة b:includable على العديد من علامات b:include

كيفية استخدام العلامة b:includable

كما عرفنا منذ قليل أنه يتم استخدام العلامة b:includable لتضمين الأكواد ويكون الكود كما في الشكل التالي


<b:includable id="معرف فريد" var="إسم لإشارة ">
هنا تضع الأكواد الخاصة بك
</b:includable>

id يجب إضافة معرف فريد بحيث ألا يتكرر هذا المعرف مع أي علامة تضمين أخرى

var اختياري ويستخدم للإشارة إلى البيانات في هذه الأداة

كيفية استخدام العلامة b:include

كما عرفنا منذ قليل أنه يتم استخدام العلامة b:include لاستدعاء الأكواد التي تم تضمينها ضمن العلامة b:includable


<b:include name="إسم المعرف" data="إسم لإشارة " cond=""/>

name هذه السمة ضرورية ويجب إضافة القيمة المقابلة لـ id الخاص بالعلامة b:includable

data اختياري ويستخدم للإشارة إلى البيانات يجب أن تكون القيمة المقابلة للسمة var الموجودة ضمن علامة b:includable

cond اختياري للتحقق من شرط معين

مثال باستخدام العلامة b:includable بشكل عام

كما عرفنا أنه يمكن تضمين العلامة b:includable بداخل العلامة b:defaultmarkup ومن خلالها يمكن تضمين المحتوى في أي مكان في القالب وذلك بتحديد قيمة Common للسمة type والتي ستكون موجودة ضمن العلامة b:defaultmarkup


<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='socialIcon'>
      ضع هنا الأكواد الخاصة بمواقع التواصل الاجتماعي
    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

مثال عملي

هنا تم استخدام علامة b:defaultmarkups للإعلان عن العلامات الافتراضية أو المخصصة وتم إضافة علامة b:defaultmarkup بداخلها مع تحديد النوع type لـ Common بحيث تبقى هذه الأكواد بشكل عام أي يمكن إعادة استخدامها في أي مكان في القالب

يفضل إضافة العلامات المخصصة بعد العلامة <body> كما في المثال التالي


<body>
<b:defaultmarkups>
  <b:defaultmarkup type='Common'>
    <b:includable id='socialIcon'>
      <ul class="social social-link">
        <li class="social-item">
          <a class="social-link" href="#" target="_blank">
            <span class="social-icon fab fa-facebook"/>
            <span class="social-text">facebook</span>
          </a>
        </li>
         <li class="social-item">
          <a class="social-link" href="#" target="_blank">
            <span class="social-icon fab fa-twitter"/>
            <span class="social-text">twitter</span>
          </a>
        </li>
         <li class="social-item">
          <a class="social-link" href="#" target="_blank">
            <span class="social-icon fab fa-youtube"/>
            <span class="social-text">youtube</span>
          </a>
        </li>
      </ul>
    </b:includable>
  </b:defaultmarkup>
</b:defaultmarkups>

مثال باستخدام العلامة b:include لاستدعاء ايقونات التواصل الاجتماعي

بعد أن قمنا بتخزين مجموعة من الروابط بداخل العلامة b:includable حان الآن وقت استدعاء هذه الأيقونات لكي يتم اظهارها


<b:include name="socialIcon"/>

لا حظ في كود استدعاء ايقونات التواصل قمنا باستخدام علامة b:include وأضفنا سمة name وهي ضرورية وتم إضافة القيمة socialIcon ولاحظ أن هذه القيمة هي نفسها التي قمنا بتعريفها ضمن الأداة b:includable ، فيجب أن يكون نفس الإسم

هذا هو مثال بسيط جداً لطريقة استخدام العلامات b:includable و b:include ، وإن شاء الله في الدروس القادمة سوف يتم إضافة المزيد من الأمثلة وكيفية تغيير الأكواد الافتراضية الخاصة بالأدوات بأكواد خاصة بك مع الحفاظ على الأكواد الخاصة بك حتى لو قمت بإزالة الأداة وإضافتها من جديد