HuBL / Twig: для l oop повторения одного и того же контента (необходима альтернатива break)

Question

Я использую for loop для создания cards для каждого сообщения в блоге, которое существует в системе.

Создаваемые карточки будут иметь разную ширину. Карта может быть large или small, и для этого я использую синтаксис HubL cycle ( do c здесь ). Наглядный пример ширины карты, которую я пытаюсь достичь, можно увидеть здесь:

Now, the third card in the first row will not be part of the for loop, it for example, will be an image.

.container{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.card{
  margin-bottom: 15px;
  border: 1px solid;
  padding: 20px;
}

.card--large{
  width: 40%;
}

.card--small{
  width: 20%;
}

.card--filler{
  width: 20%;
  background: lightblue;
}

<div class="container">

  <!-- first loop will get two latest cards, first card will be card--large, second card--small -->
  {% for content in contents %}
    {% if loop.index <=2 %}
      <div class="card {% cycle 'card--large','card--small' %}">
        Test
      </div>
    {% endif %}
  {% endif %}
  
  <!-- this is outside the loop -->
  <div class="card card--filler">
    This card is not part of the for loop
  </div>
  
  
  <!-- defining new loop where first two entries should be skipped -->
  {% for content in contents %}
    {% if loop.index >=3 %}
    <div class="card {% cycle 'card--small','card--small','card--large','card--large','card--small','card--small' %}">
      Test
    </div>
    {% endif %}
  {% endfor %}
  

</div>

В последнем l oop выше, поскольку я игнорирую первые два сообщения, он также игнорирует первые два элемента в параметре cycle . Карты должны иметь следующие классы независимо от l oop:

• Первая карта: карта - маленькая
• Вторая карта: карта - маленькая
• Третья карта: карта - большая
• Четвертая карта: карта - большая
• Пятая карта: карта - маленькая
• Шестая карта: карта - маленькая
• И затем он снова начнется сверху

Но что происходит:

• Первая карта: карта - большая
• Вторая карта: карта - большая
• Третья карта: карта - маленькая
• Четвертая карта: карта - маленькая
• ...

I ' Мы также пробовали {% if not loop.second %} вместо {% if loop.index >=3 %}, но он снова получил те же сообщения, например:

введите описание изображения здесь

Answer 1

Вы можете установить массив последовательности и использовать его с функцией цикла для циклического перебора последовательности классов, так как для первого l oop вы можете взять часть после второй элемент, использующий фильтр slice () или вы также можете использовать синтаксический сахар [start:length]

container.twig

{% set sequence = ['small','small','large','large','small','small'] %}

<div class="container">

  {% for content in contents[0:3] %}
      {% include 'card.twig' with { card: cycle(sequence[3:], loop.index0) } %}
  {% endfor %}
  
  <div class="card card--filler">
    This card is not part of the for loop
  </div>
  
  {% for content in contents[3:] %}
      {% include 'card.twig' with { card: cycle(sequence, loop.index0) } %}
  {% endfor %}
</div>

рабочий пример

Answer 2

Почему бы вам не позволить l oop go и не сделать if внутри вашего l oop, которое не нарушит ваш цикл, но отобразит ваш другой контент?

Помните, что cycle, , который также существует в Twig , кстати, дает циклическое значение на основе текущего индекса l oop, поэтому, если ваш l oop работает, даже с вашей «картой исключений» исправит вашу проблему.

<div class="container">
  {% for content in contents %}
    <div class="card {% cycle 'card--large','card--small','card--small','card--small','card--large'">
      Test
    </div>
    {% if loop.index == 2  }
      <!-- this is outside the loop -->
      <div class="card card--filler">
        This card is not part of the for loop
      </div>
    {% endif %}
  {% endif %}
</div>