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

你经常会有abit冗余。但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 %}

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

{% 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模板中使用相同的语句

2 个答案: