شرح تصميم قالب بلوجر – الجزء الثالث

في الجزء الثاني من شرح تصميم ثيم بلوجر، تكلمنا عن عنصر widget من عناصر منصة بلوجر، وتكلمنا عن مكونات b:widget وهى includable و include. في هذا المقال (الجزء الثالث من شرح تصميم قوالب بلوجر) نتحدث عن جزء هام وضروري في قوالب بلوجر. وهو كود data الخاص بمنصة بلوجر. نشرح وسم data مع شرح التكرار loop والشرط conditional tags.

استخدام الشرط في قوالب بلوجر

كما تعرف من تعلمك للغات البرمجة، هناك دالة تُسمي if/else يتم عرض المعلومات بناءاً على تحقق شرط معين أو عدم تحققه. وهذه طريقة كتابة كود الشرط في منصة بلوجر.

<b:if cond='condition'>
       [content to display if condition is true]
   <b:else/>
       [content to display if condition is false]
   </b:if>

جزء الـ b:else اختياري. أى يمكنك ألا تكتبه إن أردت. إن لم يوجد جزء else فإن الكود داخل وسم الشرط b:if سيتم عرضه في حالة تحقق الشرط فقط.

لكتابة الشرط condition لابد أن تكتب شئ نتيجته تكون إما true أو false (أى boolean type إن كنت درست لغة برمجة من قبل). يُمكنك أن تضع قيمة من الـ data نفسها، ولكن لابد أن تكون عبارة عن true أو false. مثال data:post.allowComments . قيمة allowComments تكون true إن كان مسموح بكتابة التعليقات لهذا البوست، أما إن كانت التعليقات غير مسموح بها فإن قيمتها تكون false.

أمثلة أخرى لتوضيح الفكرة أكثر

• <b:if cond='data:post.numComments > 1'> : تكون true إن كان البوست أو التدوينة عليها أكثر من تعليق.
• <b:if cond='data:blog.pageType == "item"'> : تكون true إن كانت الصفحة الحالية هي صفحة مفردة على بلوجر (item page) وهي صفحة عرض البوست بالكامل على مدونات بلوجر.

أو يمكنك مقارنةً قيمتين، وتعرض كود معين عندما تكون true وكود آخر عندما يكون false. كما تجد في المثال التالي.

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

استخدام التكرار في منصة بلوجر

وسم b:loop يسمح لك أن تكرر نفس الكود أكثر من مرة كما تحب. التكرار مفيد جداً في عرض قوائم البيانات مثل الـ labels في البوست (التدوينة). ومفيد أيضاً في عرض التعليقات لكل بوست (تدوينة). ومفيد أيضاً في عرض البوستات (التدوينات posts) داخل المدونة.

طريقة كتابة التكرار في قوالب بلوجر

<b:loop var='identifier' values='set-of-data'>
       [content that will be repeated]
   </b:loop>

سمة values لابد أن تحتوي على قائمة من الداتا. ويتم التعامل مع كل عنصر من عناصر قائمة الداتا داخل كود التكرار. يتم التعامل مع الداتا داخل التكرار باستخدام المتغير identifier الذي تجده في سمة var.

لاحظ : سمة هي ترجمة لكلمة attribute في اللغة الإنجليزية. وهي تعنى خصائص الوسم (tag). وسم هي ترجمة لكلمة tag في اللغة الإنجليزية.

الداتا تاج (Data Tag)

وسم data: من أهم وسوم (عناصر) منصة بلوجر. هذا هو المكان الذي تأتي منه كل معلومات المدونة. معلومات المدونة مثل العنوان title والرابط url والتدوينات posts وكل المعلومات التي تظهر في المدونة.

مثال على استخدام تاج داتا في منصة بلوجر

<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
       <data:title/>
   </b:widget>

تاج داتا يحتوي على معلومات مختلفة بإختلاف مكان استخدامه داخل الكود. إن استخدمت تاج داتا داخل widget ستجد المعلومات خاصة بهذا الويدجت وتختلف باختلاف نوع الويدجت (widget type). أى أنها تعتبر scoped variable كما في لغات البرمجة.

أما إن استخدمت تاج داتا خارج الويدجت (أى global scope) فالمعلومات التي تحصل عليها منها تختلف عن معلومات الويدجت.

مثال توضيحي عن اختلاف مكان استخدام تاج داتا داخل كود قالب بلوجر

<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>

في الكود، استخدمنا <data:title/> في كلا الويدجت (both widgets). ولكن العنوان title لكل ويدجت سيختلف باختلاف الويدجت.

المعلومات العامة للمدونة يمكننا استدعائها عن طريق blog وهي معلومات متاحة في كل أجزاء الكود. طريقة استخدام داتا المدونة تشبه طريقة تعاملنا مع Javascript object.

يُمكننا تشبيه blog كإنها object في لغة جافاسكربت تحمل خصائص يمكن استدعائها عن طريق الـ dot notation كما نفعل في سكربتات جافاسكربت.

شكل الكود في جافاسكربت

// 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>

في بلوجر، جزء الـ blog وخصائصه تجد بها كل المعلومات عن مدونة بلوجر الحالية.

استخدام expr في منصة بلوجر

تستخدم expr لحساب قيمة معينة واضافتها لخاصية معينة (attribute). تُستخدم عادةً لحساب قيمة خاصية مُستدعاة من data: في بلوجر.

طريقة كتابة expr في قالب بلوجر

<tagName expr:attribute='expression'></tagName>

مثال لتوضيح استخدام expr في كود منصة بلوجر

<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>

استخدمنا expr في الكود السابق لإعطاء قيمة href وقيمة title التي استدعيناها من data. يمكننا استخدام نفس الطريقة لحساب الشرط في كود الشرط لإعطاء قيمة للخصائص (attributes) بشرط معين.

انتهينا من الحديث عن الشرط والتكرار في كود قوالب بلوجر واستخدامها داخل الثيمز.

أكمل شرح تصميم قوالب بلوجر – الجزء الرابع من هنا.

لمزيد من المعلومات عن البرمجة ولينكس وأندرويد وويندوز وماك وآيفون وتصميم المواقع، ابحث عن "موقع أبانوب حنا للبرمجيات" على جوجل وادخل للموقع وستجد موضوع جديد يشرح فكرة أو معلومة جميلة ومفيدة كل يوم.