في هذ الدرس سوف نتعرف على طريقة إضافة سمة معينة ضمن عنصر HTML وذلك باستخدام b:attr المتوفر في بلوجر , من خلال استخدام هذا العنصر يمكنك إضافة سمة معينة ضمن عنصر HTML الأصلي ، حيث يمكنك إضافة سمة class أو id أو style أو أي سمة أخرى من سمات HTML.




بالإضافة يمكنك أيضا إضافة السمة مع استخدام العلامات الشرطية وذلك لطبع هذه السمة ضمن عنصر HTML في حالة تحقق الشرط ، أحيانا قد نريد إضافة سمة معينة ضمن عنصر HTML مع تغيير القيمة تلقائياً بناء على .نوع الصفحة الحالية



قد يهمك أيضا



  • b:attr: العنصر الذي سيتم استخدامه

  • cond: العلامة الشرطية حيث يمكنك إضافة الشرط الخاص بك وهذا اختياري

  • name: نوع السمة مثل id أو class أو style أو أي سمة أخرى

  • value: القيمة يمكنك اختيار أي اسم تريده







<b:attr cond="الشرط" name="نوع السمة" value="القيمة"/>




مثال عملي



<div>
<b:attr name="id" value="demo"/>




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



<div id="demo">



مثال أخر مع إضافة بعض الشروط



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




في حالة التحقق من الشرط الأول بنجاح سيتم طبعه ضم العنصر body أما إذا لم يتحقق منه سيتم الانتقال إلى الشرط التالي وهكذا ، نفترض أننا الآن موجودين في صفحة المقالة إذن سيتم إضافة سمة للعنصر body وهي سمة id والقيمة ستكون pt-post




<body id="pt-post">





استخدامات أخرى


<b:attr name="class" value='demo'/>
<b:attr name="id" value='demo'/>
<b:attr name="data-theme" value='dark'/>
<b:attr name="width" value='100'/>
<b:attr name="height" value='100'/>



تحديد الأرشيف الحالي



إذا كنت تريد تمييز رابط الأرشيف الحالي في الويدجات يمكنك إضافة شرط بحيث يتم التحقق من رابط الأرشيف الموجود ضمن الويدجيت ورابط الصفحة الحالية إذا كان هناك تطابق بين الرابط سيتم إضافة class والقيمة active لهذا الرابط كما يمكنك تنسيقه من خلال CSS حتى يظهر بشكل مختلف




	<a expr:href='data:i.url'>
	<b:attr cond='data:i.url == data:blog.url' name='class' value="active"/>


الإخراج


<a href='https://www.mohamed24119.com/2020' class='active'>





تحديد الأرشيف الحالي من القائمة المنسدلة



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




<option expr:value='data:i.url'>
<b:attr cond='data:i.url == data:blog.url' name='selected' value='selected'/>
<data:i.name/> ( <data:i.post-count/> مشاركة )
</option>


الإخراج


<option value='https://www.mohamed24119.com/2020' selected='selected'>




تحديد زر التسمية



قد ترغب أيضا بتمييز عنوان التسمية النشطة أو التسمية الحالية بشكل أو لون مختلف عن باقي التسميات الحالية ، يمكنك إضافة سمة معينة مثلا سمة class والقيمة label-active كما يمكنك تنسيق هذا الزر بشكل مختلف بحيث يتم تطبيق هذا التنسيق في حالة تطابق الشرط أو بمعني إذا كانت التسمية الحالية هي نفس التسمية الخاصة بالزر الذي تم الضغط عليه أو التسمية النشطة حاليا




<a expr:href='data:label.url'>
<b:attr cond='data:label.name == data:blog.pageName' name='class' value="label-active"/>



الإخراج


<a expr:href='https://www.mohamed24119.com/search/label/مطور بلوجر' class='label-active'>


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