الفرق بين المراجعتين ل"Liquid/iteration"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
سطر 3: سطر 3:
  
 
=== for ===
 
=== for ===
ينفّذ كتلة من الشيفرة تكراريًا. اطّلع على قائمة كاملة بالسمات المتاحة attributes داخل حلقة <code>for</code> من خلال [https://shopify.dev/api/liquid/objects/for-loops forloop (object)].
+
ينفّذ كتلة من الشيفرة تكراريًا. اطّلع على قائمة كاملة بالسمات attributes المتاحة داخل حلقة <code>for</code> من خلال [https://shopify.dev/api/liquid/objects/for-loops forloop (object)].
 
{| class="wikitable"
 
{| class="wikitable"
 
|+
 
|+
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 12: سطر 13:
 
   {{ product.title }}
 
   {{ product.title }}
 
{% endfor %}
 
{% endfor %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
hat shirt pants
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
 
!الخرج
 
|-
 
|<code>hat shirt pants</code>
 
|}
 
 
 
==== else ====
 
==== else ====
 
يحدّد حالة احتياطية لحلقة <code>for</code> والتي ستُشغَّل إذا كان طول الحلقة صفرًا.
 
يحدّد حالة احتياطية لحلقة <code>for</code> والتي ستُشغَّل إذا كان طول الحلقة صفرًا.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 31: سطر 30:
 
   The collection is empty.
 
   The collection is empty.
 
{% endfor %}
 
{% endfor %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
The collection is empty.
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
 
!الخرج
 
|-
 
|<code>The collection is empty.‎</code>
 
|}
 
 
 
==== break ====
 
==== break ====
 
يسبّب توقف تكرار الحلقة عندما تواجه وسم <code>break</code>.
 
يسبّب توقف تكرار الحلقة عندما تواجه وسم <code>break</code>.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 52: سطر 49:
 
   {% endif %}
 
   {% endif %}
 
{% endfor %}
 
{% endfor %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
1 2 3
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
 
!الخرج
 
|-
 
|‎<code>1 2 3</code>
 
|}
 
 
 
==== continue ====
 
==== continue ====
 
يسبّب أن تتخطى الحلقة التكرار الحالي عندما تواجه وسم <code>continue</code>.
 
يسبّب أن تتخطى الحلقة التكرار الحالي عندما تواجه وسم <code>continue</code>.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 73: سطر 68:
 
   {% endif %}
 
   {% endif %}
 
{% endfor %}
 
{% endfor %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
1 2 3  5
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
+
=== عاملات حلقة for ===
!الخرج
 
|-
 
|‎<code>1 2 3    5</code>
 
|}
 
 
 
=== معاملات حلقة for ===
 
  
 
==== limit ====
 
==== limit ====
سطر 87: سطر 79:
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 93: سطر 86:
 
   {{ item }}
 
   {{ item }}
 
{% endfor %}
 
{% endfor %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
1 2
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
 
!الخرج
 
|-
 
|‎<code>1 2</code>
 
|}
 
 
 
==== offset ====
 
==== offset ====
 
يبدأ الحلقة عند دليل محدَّد.
 
يبدأ الحلقة عند دليل محدَّد.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 112: سطر 103:
 
{% endfor %}
 
{% endfor %}
 
</syntaxhighlight>
 
</syntaxhighlight>
|}
+
|<syntaxhighlight lang="liquid">
{| class="wikitable"
+
3 4 5 6
!الخرج
+
</syntaxhighlight>
|-
 
|‎<code>3 4 5 6</code>
 
 
|}
 
|}
 
مرّر الكلمة الخاصة <code>continue</code>، لبدء حلقة من حيث توقفت الحلقة الأخيرة باستخدام نفس المكرّر.
 
مرّر الكلمة الخاصة <code>continue</code>، لبدء حلقة من حيث توقفت الحلقة الأخيرة باستخدام نفس المكرّر.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 130: سطر 120:
 
   {{ item }}
 
   {{ item }}
 
{% endfor %}
 
{% endfor %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
1 2 3
 +
4 5 6
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
 
!الخرج
 
|-
 
|‎<code>1 2 3</code>
 
 
‎<code>4 5 6</code>
 
|}
 
 
 
==== range ====
 
==== range ====
يحدّد مجالًا من الأعداد لتكرارها. يمكن تحديد المجال من خلال كلِّ من الأعداد الحرفية والمتغيرة، ويمكن سحبها من المتغير.
+
يحدّد مجالًا من الأعداد لتكرارها. يمكن تحديد المجال من خلال كلِّ من الأعداد الحرفية literal والمتغيرة variable، ويمكن سحبها من المتغير.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 155: سطر 142:
 
   {{ i }}
 
   {{ i }}
 
{% endfor %}
 
{% endfor %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
3 4 5
 +
1 2 3 4
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
 
!الخرج
 
|-
 
|‎<code>3 4 5</code>
 
 
‎<code>1 2 3 4</code>
 
|}
 
 
 
==== reversed ====
 
==== reversed ====
يعكس ترتيب الحلقة. انتبه إلى أن هذا العامل يختلف عن الموشّح <code>reverse</code>.
+
يعكس ترتيب الحلقة. انتبه إلى أن هذا العامل يختلف عن المرشّح <code>reverse</code>.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 175: سطر 159:
 
   {{ item }}
 
   {{ item }}
 
{% endfor %}
 
{% endfor %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
6 5 4 3 2 1
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
 
!الخرج
 
|-
 
|‎<code>6 5 4 3 2 1</code>
 
|}
 
 
 
=== cycle ===
 
=== cycle ===
عبارة عن حلقات عبر مجموعة من السلاسل النصية وطباعة هذه السلاسل النصية بالترتيب الذي جرى تمريرها به كوسطاء، إذ يُطبَع وسيط السلسلة النصية التالية في كل مرة يُستدعَى بها <code>cycle</code>.
+
يدور ضمن حلقات عبر مجموعة من السلاسل النصية ويطبع هذه السلاسل النصية بالترتيب الذي مُرِّرت به كوسطاء، إذ يُطبَع وسيط السلسلة النصية التالية في كل مرة يُستدعَى بها <code>cycle</code>.
  
 
يجب استخدام <code>cycle</code> ضمن كتلة حلقة for.
 
يجب استخدام <code>cycle</code> ضمن كتلة حلقة for.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 196: سطر 178:
 
{% cycle "one", "two", "three" %}
 
{% cycle "one", "two", "three" %}
 
</syntaxhighlight>
 
</syntaxhighlight>
|}
+
|<syntaxhighlight lang="liquid">
{| class="wikitable"
+
one
!الخرج
+
two
|-
+
three
|<code>one</code>
+
one
 
+
</syntaxhighlight>
<code>two</code>
 
 
 
<code>three</code>
 
 
 
<code>one</code>
 
 
|}
 
|}
 
تشمل استخدامات <code>cycle</code> ما يلي:
 
تشمل استخدامات <code>cycle</code> ما يلي:
  
* تطبيق أصناف فردية أو زوجية على صفوف في جدول.
+
* تطبيق أصناف classes فردية أو زوجية على صفوف في جدول.
* تطبيق صنف فريد على product thumbnail الأخيرة للمنتج في صف.
+
* تطبيق صنف فريد على صور المنتج المُصغَّرة الأخيرة في صف.
  
=== معاملات cycle ===
+
=== عاملات cycle ===
تقبل <code>cycle</code> معامل "مجموعة الدورات" في الحالات التي تحتاج فيها إلى كتل <code>cycle</code> متعددة في قالب واحد. إذا لم يتوفر أي اسم لمجموعة الدورات، فيُفترَض أن تكون الاستدعاءات المتعددة التي لها المعاملات نفسها مجموعة واحدة.
+
يقبل <code>cycle</code> عامل "مجموعة cycle" في الحالات التي تحتاج فيها إلى كتل <code>cycle</code> متعددة في قالب واحد. إذا لم يتوفر أي اسم لمجموعة cycle، فيُفترَض أن تمثّل الاستدعاءات المتعددة التي لها العاملات نفسها مجموعةً واحدة.
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 223: سطر 201:
 
{% cycle "second": "one", "two", "three" %}
 
{% cycle "second": "one", "two", "three" %}
 
{% cycle "first": "one", "two", "three" %}
 
{% cycle "first": "one", "two", "three" %}
 +
</syntaxhighlight>
 +
|<syntaxhighlight lang="liquid">
 +
one
 +
one
 +
two
 +
two
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
{| class="wikitable"
 
!الخرج
 
|-
 
|<code>one</code>
 
 
<code>one</code>
 
 
<code>two</code>
 
 
<code>two</code>
 
|}
 
 
 
=== tablerow ===
 
=== tablerow ===
يولّد جدول HTML، إذ يجب أن يُغلَّف بوسم فتح <code><nowiki><table></nowiki></code> ووسم إغلاق <code><‎/table></code> خاصين بلغة HTML. اطّلع على قائمة كاملة بالسمات attributes المتاحة داخل حلقة <code>tablerow</code> من خلال  [https://shopify.dev/api/liquid/objects/tablerow tablerow (object)].
+
يولّد هذا الوسم جدول HTML، إذ يجب أن يُغلَّف بوسم فتح <code><nowiki><table></nowiki></code> ووسم إغلاق <code><‎/table></code> خاصين بلغة HTML. اطّلع على قائمة كاملة بالسمات attributes المتاحة داخل حلقة <code>tablerow</code> من خلال  [https://shopify.dev/api/liquid/objects/tablerow tablerow (object)].
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 249: سطر 222:
 
</table>
 
</table>
 
</syntaxhighlight>
 
</syntaxhighlight>
|}
+
|<syntaxhighlight lang="liquid">
{| class="wikitable"
 
!الخرج
 
|-
 
|<syntaxhighlight lang="html">
 
 
<table>
 
<table>
 
   <tr class="row1">
 
   <tr class="row1">
سطر 278: سطر 247:
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
 
+
=== عاملات حلقة tablerow ===
=== معاملات حلقة tablerow ===
 
  
 
==== cols ====
 
==== cols ====
سطر 285: سطر 253:
 
{| class="wikitable"
 
{| class="wikitable"
 
!الدخل
 
!الدخل
 +
!الخرج
 
|-
 
|-
 
|<syntaxhighlight lang="liquid">
 
|<syntaxhighlight lang="liquid">
سطر 291: سطر 260:
 
{% endtablerow %}
 
{% endtablerow %}
 
</syntaxhighlight>
 
</syntaxhighlight>
|}
+
|<syntaxhighlight lang="liquid">
{| class="wikitable"
 
!الخرج
 
|-
 
|<syntaxhighlight lang="html">
 
 
<table>
 
<table>
 
   <tr class="row1">
 
   <tr class="row1">
سطر 324: سطر 289:
 
</syntaxhighlight>
 
</syntaxhighlight>
 
|}
 
|}
 
 
==== limit ====
 
==== limit ====
 
يخرج من حلقة <code>tablerow</code> بعد دليل معين.<syntaxhighlight lang="liquid">
 
يخرج من حلقة <code>tablerow</code> بعد دليل معين.<syntaxhighlight lang="liquid">
سطر 333: سطر 297:
  
 
==== offset ====
 
==== offset ====
يبدأ حلقة <code>tablerow</code> بعد دليل معين.<syntaxhighlight lang="liquid">
+
يبدأ بحلقة <code>tablerow</code> بعد دليل معين.<syntaxhighlight lang="liquid">
 
{% tablerow product in collection.products cols:2 offset:3 %}
 
{% tablerow product in collection.products cols:2 offset:3 %}
 
   {{ product.title }}
 
   {{ product.title }}

مراجعة 16:00، 4 أغسطس 2021

الوسوم Tags ذات النوع التكراري Iteration

تشغّل الوسوم التكرارية كتلًا من الشيفرة تكراريًا.

for

ينفّذ كتلة من الشيفرة تكراريًا. اطّلع على قائمة كاملة بالسمات attributes المتاحة داخل حلقة for من خلال forloop (object).

الدخل الخرج
{% for product in collection.products %}
  {{ product.title }}
{% endfor %}
hat shirt pants

else

يحدّد حالة احتياطية لحلقة for والتي ستُشغَّل إذا كان طول الحلقة صفرًا.

الدخل الخرج
{% for product in collection.products %}
  {{ product.title }}
{% else %}
  The collection is empty.
{% endfor %}
The collection is empty.

break

يسبّب توقف تكرار الحلقة عندما تواجه وسم break.

الدخل الخرج
{% for i in (1..5) %}
  {% if i == 4 %}
    {% break %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}
1 2 3

continue

يسبّب أن تتخطى الحلقة التكرار الحالي عندما تواجه وسم continue.

الدخل الخرج
{% for i in (1..5) %}
  {% if i == 4 %}
    {% continue %}
  {% else %}
    {{ i }}
  {% endif %}
{% endfor %}
1 2 3   5

عاملات حلقة for

limit

يحدّد الحلقة بعدد محدّد من التكرارات.

الدخل الخرج
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
  {{ item }}
{% endfor %}
1 2

offset

يبدأ الحلقة عند دليل محدَّد.

الدخل الخرج
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
  {{ item }}
{% endfor %}
3 4 5 6

مرّر الكلمة الخاصة continue، لبدء حلقة من حيث توقفت الحلقة الأخيرة باستخدام نفس المكرّر.

الدخل الخرج
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit: 3 %}
  {{ item }}
{% endfor %}
{% for item in array limit: 3 offset: continue %}
  {{ item }}
{% endfor %}
1 2 3
4 5 6

range

يحدّد مجالًا من الأعداد لتكرارها. يمكن تحديد المجال من خلال كلِّ من الأعداد الحرفية literal والمتغيرة variable، ويمكن سحبها من المتغير.

الدخل الخرج
{% for i in (3..5) %}
  {{ i }}
{% endfor %}

{% assign num = 4 %}
{% assign range = (1..num) %}
{% for i in range %}
  {{ i }}
{% endfor %}
3 4 5
1 2 3 4

reversed

يعكس ترتيب الحلقة. انتبه إلى أن هذا العامل يختلف عن المرشّح reverse.

الدخل الخرج
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
  {{ item }}
{% endfor %}
6 5 4 3 2 1

cycle

يدور ضمن حلقات عبر مجموعة من السلاسل النصية ويطبع هذه السلاسل النصية بالترتيب الذي مُرِّرت به كوسطاء، إذ يُطبَع وسيط السلسلة النصية التالية في كل مرة يُستدعَى بها cycle.

يجب استخدام cycle ضمن كتلة حلقة for.

الدخل الخرج
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
{% cycle "one", "two", "three" %}
one
two
three
one

تشمل استخدامات cycle ما يلي:

  • تطبيق أصناف classes فردية أو زوجية على صفوف في جدول.
  • تطبيق صنف فريد على صور المنتج المُصغَّرة الأخيرة في صف.

عاملات cycle

يقبل cycle عامل "مجموعة cycle" في الحالات التي تحتاج فيها إلى كتل cycle متعددة في قالب واحد. إذا لم يتوفر أي اسم لمجموعة cycle، فيُفترَض أن تمثّل الاستدعاءات المتعددة التي لها العاملات نفسها مجموعةً واحدة.

الدخل الخرج
{% cycle "first": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "second": "one", "two", "three" %}
{% cycle "first": "one", "two", "three" %}
one
one
two
two

tablerow

يولّد هذا الوسم جدول HTML، إذ يجب أن يُغلَّف بوسم فتح <table> ووسم إغلاق <‎/table> خاصين بلغة HTML. اطّلع على قائمة كاملة بالسمات attributes المتاحة داخل حلقة tablerow من خلال tablerow (object).

الدخل الخرج
<table>
{% tablerow product in collection.products %}
  {{ product.title }}
{% endtablerow %}
</table>
<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
    <td class="col3">
      Batman Poster
    </td>
    <td class="col4">
      Bullseye Shirt
    </td>
    <td class="col5">
      Another Classic Vinyl
    </td>
    <td class="col6">
      Awesome Jeans
    </td>
  </tr>
</table>

عاملات حلقة tablerow

cols

يحدّد عدد الأعمدة التي يجب أن تحتوي عليها الجداول.

الدخل الخرج
{% tablerow product in collection.products cols:2 %}
  {{ product.title }}
{% endtablerow %}
<table>
  <tr class="row1">
    <td class="col1">
      Cool Shirt
    </td>
    <td class="col2">
      Alien Poster
    </td>
  </tr>
  <tr class="row2">
    <td class="col1">
      Batman Poster
    </td>
    <td class="col2">
      Bullseye Shirt
    </td>
  </tr>
  <tr class="row3">
    <td class="col1">
      Another Classic Vinyl
    </td>
    <td class="col2">
      Awesome Jeans
    </td>
  </tr>
</table>

limit

يخرج من حلقة tablerow بعد دليل معين.

{% tablerow product in collection.products cols:2 limit:3 %}
  {{ product.title }}
{% endtablerow %}

offset

يبدأ بحلقة tablerow بعد دليل معين.

{% tablerow product in collection.products cols:2 offset:3 %}
  {{ product.title }}
{% endtablerow %}

range

يحدّد مجالًا من الأعداد لتكرارها. يمكن تحديد المجال من خلال كلِّ من الأعداد الحرفية والمتغيرة.

<!--variable number example-->

{% assign num = 4 %}
<table>
{% tablerow i in (1..num) %}
  {{ i }}
{% endtablerow %}
</table>

<!--literal number example-->

<table>
{% tablerow i in (3..5) %}
  {{ i }}
{% endtablerow %}
</table>

مصادر