السلام عليكم ورحمة الله وبركاته
اهلا بكم في مدونة عالم التقنية السورية
كما سبق وشرحت في الدروس السابقة من دورة تصميم وتكويد قوالب بلوجر من الصفر حتى الاحتراف بعض علامات الادوات في بلوجر منها
- العلامات الشرطية في بلوجر
- علامات بيانات تنسيقات بلوجر
- اوامر التضمين والتكرار في بلوجر
- التبديلات وتعبيرات السمات في بلوجر
سنكمل دورة تصميم قوالب بلوجر وبهذا الدرس ان شاء الله سنكمل باقي علامات الادوات والتي تعتبر من اساسيات تصميم او تكويد قوالب بلوجر بشكل احترافي
حيث نكمل مع:
التعبيرات التي يتم تقييمها في قوالب بلوجر b:eval
تستخدم في قوالب بلوجر لاخراج قيم اكثر تفصيلا او تعقيدا لقيمة علامات بينات تنسيقات بلوجر
مثال على ذلك في علامات بيانات تنسيقات بلوجر سيتم اظهار عنوان مقال بالعلامة التالية
<data:post.title/>
هنا سيتم استخراج عنوان اي مقال
اما لو كنت مثلا اريد اظهار عنوان اول مقال فقط هنا يجب استخدام b:eval حيث سيصبح الاستخراج بالشكل التالي
<b:eval expr="data:post[0].title" />
هنا سيتم استخراج عنوان اول مقال اما لو المقال ليس الاول فلن يستخرج اي قيمة
مثال اخر
<b:eval expr='data:post.allowComments ? "التعليقات" : "غير مسموح التعليقات" />
في هذا المثال استخدمت علامة بيانات تنسيقات بلوجر وشرط و استبدال المخرجات حيث اصبح الكود يمثل
لو التعليقات مسموحة اطبع التعليقات او اطبع غير مسموح التعليقات
حيث اشارة ? هنا بمثابة صحيح واشارة : بمثابة او تمام كما في جافا سكربت اي كانك تقوم بادراجها ضمن كود صغير من اكواد بلوجر
انصح بمشاهدة الفيديو على youtube لفهم افضل
الاسم المستعار للمتغير في قوالب بلوجر b:with
تستخدم في قوالب بلوجر لحفظ او تخزين قيم معينة باسم معين مثال على ذلك
<b:with var='test' value='"background-color:#000; " + " width: 50px; " '>
<div id='header-outer'>
<div id='header-inner' expr:style='data:test'>
<h1>My Header</h1>
</div>
</div>
</b:with>
حيث قمنا بتخزين الاسم ضمن var باسم test
وتخزين القيم ضمن value وهي لون خلفية ابيض وعرض 50 بيكسل
ثم استدعينا التخزين عن طريق expr:style والقيمة هي data:test لاستدعاء قيمة المتغير test
اعطاء كلاس في قوالب بلوجر حسب الشرط b:class
تستخدم في قوالب بلوجر لاعطاء كلاس لعنصر على حسب شرط معين مثال على ذالك
<div>
<b:class cond='data:blog.isMobileRequest' name='mobile'/>
<b:class cond='data:view.isPreview' name='preview'/>
<b:class cond='data:view.isHomepage' name='home'/>
......... محتوى الـ div .............
</div>
عند استخدام b:class يجب ان تكون اسفل تاج فتح العنصر المراد اعطاءه الكلاس مباشرة
وهنا لدينا شروط وعدة كلاسات وهي
<b:class cond='data:blog.isMobileRequest' name='mobile'/>
اذا كانت الصفحة المعروضة هي من الموبايل اعطي كلاس mobile
<b:class cond='data:view.isPreview' name='preview'/>
اذا كانت الصفحة المعروضة صفحة المعاينة اعطي كلاس preview
<b:class cond='data:view.isHomepage' name='home'/>
اذا كانت الصفحة المعروضة الصفحة الرئيسية اعطي كلاس home
وهكذا يمكننا اعطاء كلاسات لاي عنصر بحسب شروط نختارها ويكون اسم الكلاس ضمن name="اسم الكلاس هنا"
وبنهاية هذا الدرس نكون انتهينا من علامات الادوات في بلوجر التي تعتبر من اهم عوامل تكويد القالب وفي الدرس القادم من دورة تصميم قوالب بلوجر سنتعمق اكثر باكواد ال css ان شاء الله حيث لاحظت ان معظم الاستفسارات التي وصلتني تتعلق بطريقة ما بها من مالها دور كبير في تصميم القالب وكما تعلمون فانا من الاول بدأت هذه الدورة من الصفر لذالك غايتي ان يحترف اكبر قدر ممكن منكم ولاي استفسار دائما يمكنكم ترك تعليق او مراستلي ويسرني الر عليكم و السلام عليكم
شرح الفيديو
تعليقات: (1) إضافة تعليق