使用 Twig 将数据分成 2 列列表

Question

我正在尝试将 divide 数据分为 2 列。

我想要这样的结构:

<div class="accordion">
    <div class="accordion__list">
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
    </div>
    <div class="accordion__list">
        <div class="accordion__item">
            <p class="accordion__text">Title</p>
            <div class="accordion__content">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

把divide.accordion__itemdiv块分成2列.accordion__list

为此，我用 TWIG 写了这个：

<div class="accordion">
    <div class="accordion__list">
        {% for liste in bloc.listes[:(bloc.listes|length / 2)|round(0, 'floor')] %}
        <div class="accordion__item">
            <p class="accordion__text">{{ liste.titre }}</p>

            <div class="accordion__content">
                {% for contenu in liste.contenu %}
                    <p>{{ contenu.texte }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
    <div class="accordion__list">
        {% for liste in bloc.listes[(bloc.listes|length / 2)|round(0, 'floor'):] %}
        <div class="accordion__item">
            <p class="accordion__text">{{ liste.titre }}</p>

            <div class="accordion__content">
                {% for contenu in liste.contenu %}
                    <p>{{ contenu.texte }}</p>
                {% endfor %}
            </div>
        </div>
        {% endfor %}
    </div>
</div>

但这是行不通的。每次我在 2 列中输入偶数并且列表中的最后一项替换最后一列中的最后一项。

这是我的问题的一个例子

我想要这个:

Answer 1

你为什么不把这个集合循环两次？这样就容易多了，

{% set items = ['item1', 'item2', 'item3', 'item4', 'item5', ] %}

<div class="half">
{% for item in items %}
    {% if not loop.index is even %}
    <div >{{ item }}</div>
    {% endif %}
{% endfor %}
</div>
<div class="half">
{% for item in items %}
    {% if loop.index is even %}
    <div >{{ item }}</div>
    {% endif %}
{% endfor %}
</div>

Answer 2

我会用 css 而不是 Timber 来解决它。只需将其设为一个使用宽度为 50% 的内联块的列表即可。

. accordion {
    position: relative;
}
. accordion__list {
    display: inline-block;
}

还是太简单了？

Answer 3

不要使用两个循环，你可以考虑性能...

  {% set firstHalf = "" %}
    {% set secondHalf = "" %}

    {% for item in items %}
        {% if loop.index is odd %}
           {% set firstHalf %}{{ firstHalf }} <div >{{ item }}</div> {% endset %}
        {% else %}
           {% set secondHalf %}{{ secondHalf }} <div >{{ item }}</div> {% endset %}
        {% endif %}
    {% endfor %}

    <div>
       {{ firstHalf }}
    </div>
    <div>
       {{ secondHalf }}
    </div>

使用 Twig 将数据分成 2 列列表

Divide datas into 2 columns list using Twig

twig

timber