أساسيات تصميم قوالب بلوجر الجزء الثالث والاخير

باسم الله توكلنا
الدرس الأول تجده عبر  الرابط  التالي http://www.guercif.cf/2017/05/blog-post.html
الدرس الثاني تجده عبر  الرابط  التالي http://www.guercif.cf/2017/05/blog-post_26.html

أخي الكريم  هل  ازعجتك الإعلانات  بإمكانك تتبع هذه الدروس على الفيس بوك  عبر الرابط التالي أساسيات  تصميم قوالب بلوجر الجزء  الثالث والأخير

---------
في دروسنا  السابقة  شرحنا  القطعات  وخواصها وكيقيت  نقل  البينات  data اليها  ،  في هذه التدوينة  سنتطرق  ان  شاء  الله  عن الحلقات المفرغة  loop  وعن المواقف الشرطيةcondestional

الشرطية  إذن/غير ذلك if/else

الجمل  الشرطية  تستخدم  تماما  مثل استخدامها  في  لغات البرمجية
<b:if cond='condition'>
    [content to display if condition is true]
<b:else/>
    [content to display if condition is false]
</b:if>

الجملة الشرطية  كالعادة تعتمد  على  حرف  if  فانها  ستنفذ الشرط بحذافيره  لكن ان  وضعنا  else  فاننا وضعنا  خيارات  يتم  استثنائها  عدا  الشرط الذي وضعناه ،  
ولها  ايضا  استخدام في المنطقية  ( boolean ) كخيار نعم  او  لا  data:post.allowComments
مثلا نقول استخدام التعليقاتعل ىالبوست  او عدم استخدام التعليقات  في  البوست  
مثال اخر  للمحتوى  


  • <b:if cond='data:post.numComments > 1'> يسمح بتعليق واحد في الصفحة .
  • <b:if cond='data:blog.pageType == "item"'> يسمح بالعديد من التعليقات  بحجم الباجينغ pagging



ويمكنك ايضا وضع  قيمتين  

<b:if cond='data:post.numComments > 1'>
    [Comments are available]
<b:else/>
    [Comments are not available]
</b:if>


الحلقات المفرغة looping   or loop

العنصر b:loop يتيح لك  اعادة قطعات لمرات كثيرة  وهذا  يفيد في اللبل label مثلا  يمكنك الحصول على  علامات  اللليبل عدة  مرات  في كل  بوست  
<b:loop var='identifier' values='set-of-data'>
    [content that will be repeated]
</b:loop>



مثلا نريد  تكرار عنوان  ما  على  كل  صفحات  المدونة  عندما  يتنقل  المستخدم  في paging تبع  مدونتانا او  يختار على سبيل المثال labels ما  فقد  يجد العنوان   في  الصفحة الرئيسية او  في  الليبيل ،  في هذه الحالة  ان  قيمة العنصرattribut  يتم  تكريرها  ,ويتم  اتخاذها  عبر  المعرف var 
<b:loop var='post' values='data:posts'>
    <h2><data:post.title/></h2>
</b:loop>


وسم  الداتا data tag 

ان  قطعات  الداتاdata:  هي  الاهم  في  البلوجر  ببساطة  فهي   تنقل كل من العنوان  والمحتوى  والروابط  ... الخ 
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
</b:widget>    <data:title/> 

ان   محتوى  الداتا  يكون  مرتبط  بالقطعات  مثل  السكوبينغ في  الجافا  سكربت  تماما  في كبل  قطعات يكون هناك  عنوان  مختلف title وفي   حالة  عدم  تواجده   داخل  القطعات  مثل الداتا   العامة  فانها تحتوي على  معلومات  مختلفة  
<b:widget id='FollowByEmail1' title='Follow By Email' type='FollowByEmail' locked='false'>
    <b:includable id='main'>
        <h3><data:title/></h3>
    </b:includable>
</b:widget>
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
    <b:includable id='main'>
        <h3><data:title/></h3>
    </b:includable>
</b:widget>

في البلوجر الداتا بالكامل  اون الداتا العامة  يتم  توريثها كالجافا سكربت  الكائنية  يحتوي على  خواص يتم  توريثها  مثال 
// Consider the following scenario in JavaScript
// Consider blog is a property of "window" and window is identical to data.
blog = {
    'title': 'The title for the blog',
    'pageType': 'The type of the current page. One of "item", "index", "archive"',
    'homepageUrl': 'The homepage of the blog',
    'pageName': 'The title of the current page'
};

alert(blog.title);

if (blog.pageType == 'item') {
    alert(blog.pageName);
} else {
    alert(blog.title);
}

في  البلوجر تكون بهذا  الشكل 
<b:if cond='data:blog.pageType != "item"'>
    <data:blog.title/>
<b:else/>
    <data:blog.pageName/>
</b:if>

الوسم expr يستخدم لحساب  التعبيرات ولتعيين  السمات  والمعاملات  يمكن  تعيينها  ايضا لل data:
<tagName expr:attribute='expression'></tagName>

مثال :
<b:includable id="nextPrevLink">
    <div style="display: inline">
        <strong>
         <a expr:href="data:olderPageUrl" expr:title="data:olderPageTitle">Older Posts</a>
     </strong>
        <strong>
         <a expr:href="data:newerPageUrl" expr:title="data:newerPageTitle">New Posts</a>
     </strong>
    </div>
</b:includable>

إنتها  بفضل الله وأتمنى ان  يكون قد  أفادكم  إخوتي  الكرام  ولاتنسو  مشاركة الموضوع   مع اصدقائكم  حتى يستفيد  المزيد 






Post a Comment

0 Comments