Twig模板条件模式循环

时间:2016-12-30 20:54:23

标签: javascript loops twig conditional

我有一种感觉,这将是一个非常简单的解决方案,但我现在无法绕过它。我正在使用Twig构建一个Craft CMS模板,并希望以特定模式布局一些元素(图库图像块)。与此示例类似。 example photo

当我遍历每个元素时,我想要适当地显示它们,无论大小。 sm,sm,lg,lg,sm,sm,sm,sm,lg,lg ......等等。

我知道我显然可以像这样预先形成一个循环

{% if loop.index is even %}
...
{% endif %}

或者喜欢这个[sm,sm,lg,sm,sm lg]的结果

{% if loop.index is divisible by(3) %}
...
{% endif %}

但我的模式有点复杂。

谢谢你的帮助。

1 个答案:

答案 0 :(得分:0)

您想要的图案是sm sm lg正常打印,然后反转,然后通常......

sm sm lg lg sm sm sm sm lg ...

您可以创建一个输出此模式的macro(a function in Twig):

{% macro printPattern(reverse = false) %} {# the function AKA macro signature #}
    {% set sm = 'a small image' %} {# Make this an <img> tag. #}
    {% set lg = 'a large image' %}
    {% set pattern = (reverse) ? [lg, sm, sm] : [sm, sm, lg] %}

    {% for n in pattern %}{{ n }} {% endfor %}
{% endmacro %}

{# If you wanted to use the macro in the same file you must include: #}
{% import from _self as helper %}

{# Then call the macro: #}
{{ helper.printPattern(false) }}
{{ helper.printPattern(true) }}
{{ helper.printPattern() }} {# This does the same as helper.printPattern(false) #}
{# because we set a default value for the passed-in variable in the macro's signature. #}

Example

特别说明:

我在这一行使用了ternary运算符?

{% set pattern = (reverse) ? [lg, sm, sm] : [sm, sm, lg] %}

(回想一下reverseboolean值,即truefalse

该行相当于:

{% if reverse %}
    {% set pattern = [sm, sm, lg] %}
{% else %}
    {% set pattern = [lg, sm, sm] %}
{% endif %}

Ternary operator非常方便有条件地将某些数据分配给变量。