web-dev-qa-db-ja.com

複数のフィールド値のコンマ区切りリストを表示するにはどうすればよいですか?

たとえば、各分類用語の値を、フィールドテンプレートfield--node--field-tags.html.twigファイル、またはcssで視覚的に?

4
Mojtaba Reyhani

CSSを使用してこれを実現できます。

例えば:

HTML

<div class="field-items">
  <div class="field-item">
  Apple
  </div>
  <div class="field-item">
  Orange
  </div>
  <div class="field-item">
  Lemon
  </div>
</div>

CSS

.field-item {
  float: left; 

}

.field-item:after {
  content: ","; right: 3px; position: relative;
}

.field-item:last-child:after {
    content: none;
}

.field-item:last-child:before {
    content: " and ";
}

.field-item:first-child:before {
    content: none;
}

例のデモ

1
No Sssweat

このためにCSSを使用することは可能ですが、それを避ける方が良いと思います。フィールドtwigファイルを説明するために簡略化しましたが、次のようになります。

{% for item in items %}
  {% if loop.last %}
    {% set separator = '' %}
  {% else %}
    {% set separator = '/' %}
  {% endif %}
  {{ item.content }}{{ separator }}
{% endfor %}
6
Rene

ファイルfield--node--field-tags.html.twigで、Classyのfield.html.twigをReneの提案と組み合わせました。

{%
    set classes = [
    'field',
    'field--name-' ~ field_name|clean_class,
    'field--type-' ~ field_type|clean_class,
    'field--label-' ~ label_display,
]
%}
{%
    set title_classes = [
    'field__label',
    label_display == 'visually_hidden' ? 'visually-hidden',
]
%}
{% if label_hidden %}
    {% if multiple %}
        <div{{ attributes.addClass(classes, 'field__items') }}>
            {% for item in items %}
                {% if loop.last %}
                    {% set separator = '' %}
                {% else %}
                    {% set separator = ', ' %}
                {% endif %}
                <span{{ item.attributes.addClass('field__item') }}>{{ item.content }}</span>{{ separator }}
            {% endfor %}
        </div>
    {% else %}
        {% for item in items %}
            {% if loop.last %}
                {% set separator = '' %}
            {% else %}
                {% set separator = ', ' %}
            {% endif %}            <span{{ attributes.addClass(classes, 'field__item') }}>{{ item.content }}</span>{{ separator }}
        {% endfor %}
    {% endif %}
{% else %}
    <div{{ attributes.addClass(classes) }}>
        <div{{ title_attributes.addClass(title_classes) }}>{{ label }}</div>
        {% if multiple %}
            <div class="field__items">
        {% endif %}
        {% for item in items %}
            {% if loop.last %}
                {% set separator = '' %}
            {% else %}
                {% set separator = ', ' %}
            {% endif %}
            <span{{ item.attributes.addClass('field__item') }}>{{ item.content }}</span>{{ separator }}
        {% endfor %}
        {% if multiple %}
            </div>
        {% endif %}
    </div>
{% endif %}
0