避免在 Twig 模板中使用相同的语句

Question

我有

<div class="{{element.type == 'cover' ? 'cover-full' : 'fixed-width'}}">
    <div class="element 
        {% if element.type == 'text' %}
           element-text
        {% elseif element.type =='image' %}
           element-image
        {% endif %}">

        {% if element.type == 'text' %}
           ...
        {% elseif element.type == 'image' %}
           ...
        {% endif %}
   </div>

如您所见，我必须多次设置相同的 if 条件。如何避免每次都重复这种情况？我对 Twig 模板还很陌生。

Answer 1

你经常会有一点冗余。但是 IMO 最好重复 HTML 块而不是树枝。

{% if element.type == 'text' %}
    <div class="element element-text">
        content
    </div>
{% elseif element.type =='image' %}
     <div class="element element-image">
        content
    </div>
{% else %}
    {% include 'snippet.html' %}
{% endif %}

你有更多的有效性和可读性HTML
如果您更改条件，则只需更改一次
您可以使用 {% include 'snippet.html' %} 来减少 HTML 个块中的冗余

Answer 2

您可以简化代码：

{% if element.type in ['text','image'] %}element-{{element.type}}{% endif %}

您可以使用树枝宏。在该模板的顶部添加

{% macro element_class(type) -%}
    {% if type in ['text','image'] %}element-{{type}}{% endif %}
{%- endmacro %}
{% from _self import element_class %}

以后：

<div class="{{element.type == 'cover' ? 'cover-full' : 'fixed-width'}}">
    <div class="element {{ element_class(element.type) }}">

You can learn more about macros in Twig documentation.

避免在 Twig 模板中使用相同的语句

Avoid the same statement in Twig template

twig

template-engine