如何在Twig中根据元素现有类添加指定类？（Drupal 10）

我在开发Drupal 10网站，需要在Twig模板里给带有views-field views-field-title类的卡片标题添加Card-label类，试了几次都没成功。

现有Twig模板片段 #

<div class="Cardlist">
    {% if title %}
        <h3>{{ title }}</h3>
    {% endif %}
    {% for row in rows %}
        {%
            set row_classes = [
                default_row_class ? 'views-row',
            ]
        %}
        <div class="Card">
            <div{{row.attributes.addClass(row_classes)}}>
                {{ row.content }}
            </div>
        {% endfor %}
    </div>
</div>

之前尝试的代码 #

{% if 'views-field views-field-title' in row.content['#row'].attributes.class %}
    <div class="Card-label">
        {{ title }}
    </div>
{% else %}
    {{ title }}
{% endif %}

当前生成的HTML #

<div class="views-field views-field-title">
    <span class="field-content">My Title</span>
</div>

期望实现的HTML #

<div class="Card">
    <div class="Card-label">
        <h3>My Title</h3>
    </div>
</div>

解决方案 #

之前的判断逻辑有误：row.content['#row'].attributes.class获取的是行的类属性，而目标元素是行内标题字段的类。正确做法是遍历row.content里的每个字段元素，判断字段类后再包裹自定义容器：

将模板中{{ row.content }}的部分替换为以下代码：

{% for field in row.content %}
    {% set field_classes = field.attributes.class %}
    {% if 'views-field-title' in field_classes %}
        <div class="Card-label">
            {{ field }}
        </div>
    {% else %}
        {{ field }}
    {% endif %}
{% endfor %}

如果需要把标题内容用<h3>包裹，可进一步调整：

{% for field in row.content %}
    {% set field_classes = field.attributes.class %}
    {% if 'views-field-title' in field_classes %}
        <div class="Card-label">
            <h3>{{ field.content }}</h3>
        </div>
    {% else %}
        {{ field }}
    {% endif %}
{% endfor %}

这样就能精准匹配带有views-field-title类的字段，为它添加Card-label容器，实现预期的HTML结构。

内容的提问来源于stack exchange，提问作者svenjaleo