تعرف على طريقة إضافة class معين في قالب بلوجر الخاص بك وتطبيقه على حسب نوع الصفحة الحالية




من خلال عنصر <b:class> يمكنك إضافة class معين لعنصر HTML ، كما يمكنك إضافة الـ class لعنصر HTML في حالة تطابق شرط معين.




مثلا يمكنك إضافة class معين لعنصر HTML إذا كانت الصفحة الحالية هي صفحة التدوينة و class أخر إذا كانت الصفحة الحالية هي الصفحة الرئيسية أو التسميات وذلك باستخدام العلامات الشرطية






  <b:class cond="الشرط" name="اسم الكلاس"/>



مثال عملي



  <div></div>
  <b:class name="demo">



سوف ينتج الكود السابق الشكل التالي في جميع الصفحات


  <div class="demo">




عنصر <b:class> مهم جداً إذا كنت تريد إضافة فئات معينة لعنصر HTML بحيث يمكنك اظهار تنسيق مختلف على حسب الصفحة الحالية ، هيا بنا نأخذ مثالاً أخر لكي تفهم أكثر وذلك باستخدام الشروط سوف نقوم بإضافة class معين للعنصر <body> ويتم تغيير الـ class على حسب نوع الصفحة الحالية




مثال عملي




  	<body>
    	<b:class cond='data:view.isPreview' name='pt-preview'/>
    	<b:class cond='data:view.isHomepage' name='pt-index pt-home'/>
    	<b:class cond='data:view.isLabelSearch' name='pt-index pt-label'/>
    	<b:class cond='data:view.isSearch and !data:view.isLabelSearch' name='pt-index pt-search'/>
    	<b:class cond='data:view.isArchive' name='pt-index pt-archive'/>
    	<b:class cond='data:view.isPost' name='pt-single pt-post'/>
    	<b:class cond='data:view.isPage' name='pt-single pt-page'/>





في الكود السابق أضفنا مجموعة من الشروط وذلك لإضافة class معين للعنصر body بناء على نوع الصفحة الحالية ، سيتم التحقق من الشرط الأول فإذا تم التحقق منه بنجاح سيتم طباعة الـ class الذي تم تعيينه مسبقاً ، أما إذا لم يتم التحقق من الشرط الأول سيتم الانتقال للشرط الثاني وهكذا



نتيجة الكود السابق


أنت الآن تقرأ هذه المقالة وأنت موجود حالياً في صفحة المقالة ونوع الصفحة الحالية هو isPost وذلك أضفنا قيمة للـ name وهي pt-single pt-post أي أضفنا 2 class سيتم طباعتهم ضمن العنصر body إذا كانت الصفحة الحالية هي صفحة المقالة



سوف يظهر الكود في المتصفح بالشكل التالي


  <body class="pt-single pt-post">





هذه الشروط تم إضافتها ضمن هذا القالب يمكنك التحقق من ذلك من خلال الضغط على زر F12 من لوحة المفاتيح وانظر للعنصر body هل وجدا class باسم pt-single pt-post بالفعل أم لا ، كما يمكنك الانتقال للصفحة الرئيسية أو صفحة التسميات أو الأرشيف ستجد تم إضافة class مختلف على حسب نوع الصفحة الحالية ،






من خلال هذه الإضافة الجميلة يمكنك تخصيص تنسيق معين يتم تطبيقه على هذه الصفحة في حالة التحقق من الشرط بنجاح


مشاركات ذات صلة