علامات الأدوات لأداة Layouts

عندما تستخدم مظهر Layouts لإنشاء قسم النص الرئيسي في مدونتك، يمكنك استخدام بعض الأدوات لإضافة عناصر الصفحة مثل الصور وقائمة المدونات الموصى بقراءتها.

أنواع العلامات

يصف هذا القسم تنسيق HTML الذي يمكنك استخدامه داخل علامات الإغلاق.

أوامر التضمين (b:include)

متى يتم أستخدم أوامر التضمين

يمكنك الاستفادة القصوى من أوامر التضمين إذا كان لديك قسم من الكود تريد إعادة استخدامه في عدة أماكن مختلفة، أو تضمينه في ظروف معينة فقط.

للقيام بذلك، اكتب المحتوى داخل b:includable، ثم استخدم b:include حيثما تريده أن يظهر.

التنسيق

 

<b:includable id='main' var='thiswidget'>
  [insert whatever content you want here]
</b:includable>

 

السمات

• id (مطلوب): معرّف فريد يتكون من حروف وأرقام. يجب أن تحتوي كل أداة على معرّف قابل للتضمين بـ id='main'.
• var (اختياري) معرّف يتكون من حروف وأرقام، للإشارة إلى البيانات داخل هذا القسم.

إذا أنشأت المزيد من العناصر القابلة للتضمين بمعرّفات مختلفة، فلن تظهر تلقائيًا. ولكن إذا أنشأت عنصر قابل للتضمين باستخدام id='new'، يمكنك الإشارة إليه في العنصر الرئيسي القابل للتضمين بـ <b:include name='new' /> وسيظهر بذلك الشكل.

في ما يلي السمات لعلامة b:include:

• name (مطلوب): معرّف يتكون من حروف وأرقام. يجب أن يطابق معرّف علامة b:includable حالية في نفس الأداة.
• data (اختياري): تعبير أو إحدى البيانات لتمريرها إلى القسم القابل للتضمين. وسيصبح هذا هو قيمة السمة var في العنصر القابل للتضمين.
• cond (اختياري) تعبير يمنع تنفيذ أمر التضمين إلا إذا كانت النتيجة true. ويتطابق ذلك تمامًا مع سمة cond في b:if.

مثال

إليك مثال يوضح كيفية استخدام b:includable وb:include.

أهم شيء هو أن تعرف كيف يتضمن القسم "الرئيسي" قسم "النشر" داخله. إنه يمرر مشاركة تسمى "p" ويشير القسم المضمن إليه باعتباره "مشاركة" var الخاصة به، ثم يطبع العنوان.

تجدر الإشارة إلى أنه لا يتم تشغيل أمر التضمين إلا عندما يكون المؤشر أقل من 10، وبناءً على ذلك لن يتم عرض سوى 10 مشاركات بحد أقصى في هذا المثال (يبدأ المؤشر عند 0).

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>

 

إخراج البيانات (:data)

أمثلة

• <data:title/> يطبع عنوان الأداة

• <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> يطبع سمات عنصر صورة. قد تحتوي الصورة على مكونات مثل عنوان url والارتفاع والعرض. يشير استخدام علامة "." إلى أننا نريد عنوان URL لهذه الصورة، وليس عنوان URL لأي شيء آخر.

عرض المزيد من الأمثلة

راجع القائمة الكاملة بـ علامات تنسيقات البيانات المدعومة.

 

تكرار (b:loop)

متى أستخدم b:loop

تسمح لك العلامة b:loop بتكرار قسم من المحتوى عدة مرات. وعادة ما يستخدم هذا الأمر لطباعة كل مشاركة في قائمة بالمشاركات لصفحة معينة، أو كل تعليق، أو كل تسمية، إلخ.

التنسيق

التنسيق العام لاستخدام التكرار هو:

 

<b:loop var='identifier' values='set-of-data'>
  [repeated content goes here]
</b:loop>

 

يمكن أن يكون جزء "المعرّف" (i) أي اسم تختاره، ويُستخدم ليحل محل كل عنصر جديد في القائمة، في كل مرة خلال التكرار. علمًا بأن مجموعة البيانات، التي تحددها للقيم، يمكن أن تكون أي من البيانات الموصوفة في مقالة علامات البيانات كقائمة بالعناصر.

على سبيل المثال، في أداة مشاركات المدونات، تكون posts قائمة. وسيتكرر أي كود مثل الكود التالي خلال كل مشاركة، ليطبع العنوان لكل مشاركة، مع علامات الرأس حوله.

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

لاحظ كيف يتخذ "i" قيمة كل مشاركة بالترتيب، كي تتمكن من الحصول على العنوان من كل مشاركة.

النطاق العددي

تسمح لك علامة التكرار بالتكرار عبر نطاق عددي شامل، مثل "من 1 إلى 3" أو " من 3- إلى 9-"، حيث يأخذ المتغير قيمة العدد. سينشئ المثال التالي قائمة غير مرتبة من الأرقام 1 و2 و3.

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

 

سمة الفهرس

يكون لعلامات التكرار أيضا سمة فهرس اختيارية، والتي تقدم الفهرس الصفري للتكرار الحالي خلال التكرار الحلقي.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>

 

سينشئ هذا المثال قائمة غير مرتبة من:

• الفهرس: 0، الرقم: 9
• الفهرس: 1، الرقم: 8
• الفهرس: 2، الرقم: 7

If وelseif وelse (b:if)

متى أستخدم if أو elseif أو else

يمكنك استخدام العلامات b:if وb:elseif وb:else لعرض محتوى معين في بعض الحالات، ومحتوى آخر في حالات أخرى. على سبيل المثال، قد ترغب في إظهار نص معين على الصفحة الرئيسية فقط، ولكن تريد عرض نص مختلف عند عرض المشاركات الفردية.

التنسيق

 

<b:if cond='condition'>
  [المتحوى الذي سيتم عرضه إذا كان الشرط true]
<b:elseif cond='another condition'/>
  [المحتوى الذي سيتم عرضه إذا لم تكن أي من شروط if أو elseif السابقة true، وكان شرط elseif هذا true]
<b:else/>
  
[المحتوى الذي سيتم عرضه إذا لم يتحقق أي من شروط if أو elseif]</b:if>

 

العلامتان b:elseif وb:else هي علامات اختيارية. بدونهما، ستكون النتيجة إما إدراج المحتوى في القسم b:if أو لا شيء. ولكن علامة الإغلاق </b:if> ستكون مطلوبة في كل حالة.

بالنسبة إلى "الشرط" يمكنك وضع أي شيء يكون قيمته true أو false. بعض علامات البيانات تكون قيّم true/false من تلقاء نفسها، على سبيل المثال allowComments على مشاركة. أما بالنسبة إلى البيانات الأخرى، يمكنك مقارنتها مع قيّم محددة للحصول على true أو false. وإليك بعض الأمثلة:

• <b:if cond='data:post.showBacklinks'>
  True إذا تم تعيين المشاركة الحالية على إظهار الروابط الواردة.
• <b:if cond='data:blog.pageType == "item"'>
  True إذا كانت الصفحة الحالية هي صفحة عنصر (صفحة مشاركة).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  True إذا كانت الصفحة الحالية هي صفحة عنصر (صفحة مشاركة) وتم تعيين المشاركة الحالية على إظهار الروابط الواردة.
• <b:if cond='data:displayname != "Fred"'>
  True إذا لم يكن هذا هو اسم العرض لـ Fred.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  True إذا كان Fred هو اسم العرض أو الصفحة الحالية هي صفحة ثابتة (وليست صفحة مشاركة).
• <b:if cond='data:post.numComments > 1'>
  True إذا كانت المشاركة الحالية بها أكثر من تعليق واحد.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  True إذا كانت الصفحة الحالية هي مشاركة أو صفحة محددة.

التبديلات (b:switch)

متى أستخدم التبديل

يمكنك استخدام العلامة b:switch كما تستخدم العلامة b:if التي يصحبها العديد من علامات b:elseif. الميزة التي تحصل عليها من عملية التبديل الفرعية هي أنك لا تحتاج إلى تكرار اسم المتغير. يمكنك قراءتها بسهولة لمعرفة ما يحدد كل حالة على حدة، وما هي الحالة الافتراضية.

التنسيق

<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [الإخراج إذا كان تقييم var يساوي Value 1]
<b:case value="[Value 2]" />
 [الإخراج إذا كان تقييم var يساوي Value 2]
[… أي قيّم أخرى]
<b:default />
 [الإخراج إذا كان تقييم var لا يساوي أي علامة b:case موضحة]
</b:switch>

مثال

يوضح هذا المثال كيفية إخراج رأس مختلفة، اعتمادًا على نوع الصفحة التي يتم عرضها.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Page</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Blog Posts</h2>
</b:switch>

تعبيرات السمات (:expr)

متى أستخدم التعبيرات

يمكنك استخدام السمة expr لتعيين قيم السمة على أساس القيم في قاموس البيانات. 

أمثلة

• <a expr:href='data:blog.homepageUrl'>Home</a>
  رابط الصفحة الرئيسية مع عنوان url لصفحة المدونة الرئيسية.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
  رابط به عنوان url لخلاصة RSS لمشاركة المدونة. يربط عامل التشغيل "+" السلسلتين بالتسلسل.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
  رابط بالفئة "comment" عندما يكون مسموحًا بالتعليقات و"no-comment" عندما لا يكون مسموحًا بها. يأخذ معامل التشغيل الثلاثي (?:) القيمة المنطقية وينتقي أول قيمة (بعد ?) إذا كانت القيمة المنطقية true، أو القيمة الثانية (بعد :) إذا كانت القيمة المنطقية false.

التعبيرات التي يتم تقييمها (b:eval)

متى أستخدم تعبيرًا تم تقييمه

يمكنك استخدام العلامة b:eval لتقييم تعبير أكثر تعقيدًا من علامة بيانات قياسية.

التنسيق

<b:eval expr='[Expression]' />

أمثلة

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  إخراج ارتفاع نسبي محسوب، على أساس قيمة العرض الجديدة.
• <b:eval expr="data:post.labels[0].url" />
  إخراج عنوان URL لتصنيف أول مشاركة.
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  إخراج "comment" عندما يكون مسموحًا بالتعليقات و"Comments Disabled" عندما لا يكون مسموحًا بها. تجدر الإشارة إلى أن هذا التعبير يستخدم المشغل الثلاثي.

الاسم المستعار للمتغير (b:with)

متى أستخدم الاسم المستعار للمتغير

يمكنك استخدام علامة b:with لتخزين قيمة تعبير محسوب مؤقتًا وتجنب التعبيرات المضمنة المعقدة.

التنسيق

<b:with var='myComputedValue' value='[Data expression]' />

أمثلة

بالنسبة إلى سمة نمط معقد يعتمد على متغيرات البيانات، يمكنك حسابها قبل بقية إخراج HTML، كي تتم قراءة HTML المتداخل بشكل أسهل.

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>My Header</h1>
   </div>
 </div>
</b:with>

ملاحظة: لن يوجد المتغير إلا في العُقد الفرعية لعلامة b:with.

اطلع على هذا المثال

انقر لمشاهدة مثال عن كيفية استخدام كل من هذه العلامات في HTML لأداة PageList في مدونتك.

مثال

في هذه الأداة، يمكنك مشاهدة أمثلة لاستخدامات العلامات b:widget وb:includable (وb:include) وb:if (وb:else) وb:loop.

 

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>