div 元素上带有 Twig 的条件类答案

【问题标题】：Conditional class with Twig on div elementdiv 元素上带有 Twig 的条件类
【发布时间】：2020-04-08 19:43:45
【问题描述】：

我可以根据 div 的内容更改添加到 div 元素的类吗？比如：“如果 div 为空，则添加此类，否则添加此类”并使用 id 或其他内容定位 div。

如果是，我该怎么做？谢谢

编辑：我找到了这样的解决方法

{% set vueBlocArchives_classes = [
'liste-archives',
'type-' ~ node.bundle|clean_class
]%}
{% set vuebloc_classes = [
'liste-vdl',
'type-' ~ node.bundle|clean_class
]%}
{% set vueBlocInfoAdmin_classes = [
'liste-info-admin',
'type-' ~ node.bundle|clean_class
]%}

然后我做：

  {% if node.field_inserer_liste_viewfield is not empty and node.id == 77 %}
      <aside {{ vuebloc_attribute.addClass(vueBlocArchives_classes) }}>
        {{ content.field_inserer_liste_viewfield.0 }}
      </aside>
      {# Change classe selon le Nid - Ici nid de la page Info Admin #}
    {% elseif node.field_inserer_liste_viewfield is not empty and node.id == 125 %}
      <aside {{ vuebloc_attribute.addClass(vueBlocInfoAdmin_classes) }}>
        {{ content.field_inserer_liste_viewfield.0 }}
      </aside>
    {% else %}
      <aside {{ vuebloc_attribute.addClass(vuebloc_classes) }}>
        {{ content.field_inserer_liste_viewfield.0 }}
      </aside>
    {% endif %}

但我需要重复代码，所以我考虑在这部分放入一个变量：

 {{ content.field_inserer_liste_viewfield.0 }}
          </aside>

@sakhunzai 提示可能是更好的方法，但我如何在我的代码中使用它？

EDIT2：测试将静态代码放入变量但语法错误

  {% set finAside = content.field_inserer_liste_viewfield.0 | render | trim "</aside>" %}
    {# Change classe selon Nid - Ici nid de la page archives #}
    {% if node.field_inserer_liste_viewfield is not empty and node.id == 77 %}
      <aside {{ vuebloc_attribute.addClass(vueBlocArchives_classes) }}>
        {{ finAside }}

代替这项工作：

{% if node.field_inserer_liste_viewfield is not empty %}
      {# Change classe selon Nid - Ici nid de la page archives #}
      {% if node.field_inserer_liste_viewfield is not empty and node.id == 77 %}
        <aside {{ vuebloc_attribute.addClass(vueBlocArchives_classes) }}>

          {# Change classe selon le Nid - Ici nid de la page Info Admin #}
        {% elseif node.field_inserer_liste_viewfield is not empty and node.id == 125 %}
          <aside {{ vuebloc_attribute.addClass(vueBlocInfoAdmin_classes) }}>

          {% else %}
            <aside {{ vuebloc_attribute.addClass(vuebloc_classes) }}>
            {% endif %}
            {{ content.field_inserer_liste_viewfield.0 }}
          </aside>
        {% endif %}

灵感来自https://stackoverflow.com/a/42144678/2416915 我发布了另一个类似的问题：Is it possible to use Twig addClass with condition?

【问题讨论】：

纯在twig 或drupal?
这取决于 div 的内容是如何呈现的。如果它是静态内容，那么它与 twig 无关。如果内容是由 twig 提供的某种数据呈现的，那么这很简单。也许应该多说一点

标签： symfony twig drupal-8 theming

【解决方案1】：

这不是那么简单吗：

<div class="{{ divContent=='' ? 'emptyClass' :'notEmptyClass' }}">
 {{divContent}}
</div>

【讨论】：

如果 OP 想使用 drupal 的添加类的方法，则不会。见here
我看到即使那样它仍然可以工作，但是使用drupal约定会很好，谢谢你的链接
@DarkBee 您的链接没有举例说明我想做什么，不是吗？
@webmasterpf 当然不是，这是 sakhunzai 的资源
误解了;)