сделать информацию в одну строку, используя Twig

Question

, чтобы сделать это коротким, мне нужно сделать эту информацию встроенной на моем сайте: Juste вот так:

Famille : Open Sans - Variante : Обычный Itali c

Taille : 15px - Interlignage : 25px - Paragraphe : 15px

Couleur : grey_3

Это мой код:

{% include "../component/1-atom/Typographies/sg-typo-hierarchisation.twig" with {
                typo_hierarchisation: [
                    {
                        title: "Famille",
                        value: "Fira Sans",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Variante",
                        value: "ExtraBold",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Taille",
                        value: "50px",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Interlignage",
                        value: "50px",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Paragraphe",
                        value: "25px",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    },
                    {
                        title: "Couleur",
                        value: "couleur de l’univers",
                        value_2: "primary_ {{ univers }}",
                        class_regular: "fw-regular-i",
                        class_bold: "fw-bold-i",
                    }
                ]
            }%}

В этом файле:

<ul class="sg-typo-hierarchisation">
    {% for item in typo_hierarchisation %}
    {% set trait = "<i class='trait'> — </i>" %}
        <li class="sg-typo-hierarchisation-item">
            <span class={{item.class_regdivar ? item.class_regular: ""}}>{{ item.title ? item.title : "" }}</span>
            <span class={{item.class_bold}}>{{ item.value ? " : " ~ item.value : "" }}</span>
            {{ item.value_2 ? ('<span class=' ~ item.class_bold ~ '>' ~ trait ~  item.value_2  ~ '</span>')|raw : '' }}
        </li>
    {% endfor %}
</ul>

Скажите, что у меня есть это рендер:

Famille : Fira Sans

Variante : ExtraBold

Taille : 50px

Interlignage : 50px

Paragraphe : 25px

Couleur : couleur de l'univers - primary_ {{univers}}

Редактировать: На веб-сайте у меня есть это в инспекторе:

<ul class="sg-typo-hierarchisation">
                <li class="sg-typo-hierarchisation-item">
            <span class="">Famille</span>
            <span class="fw-bold-i"> : Fira Sans</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Variante</span>
            <span class="fw-bold-i"> : ExtraBold</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Taille</span>
            <span class="fw-bold-i"> : 50px</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Interlignage</span>
            <span class="fw-bold-i"> : 50px</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Paragraphe</span>
            <span class="fw-bold-i"> : 25px</span>

        </li>
                <li class="sg-typo-hierarchisation-item">
            <span class="">Couleur</span>
            <span class="fw-bold-i"> : couleur de l’univers</span>
            <span class="fw-bold-i"><i class="trait"> — </i>primary_ {{ univers }}</span>
        </li>
    </ul>

Answer 1

Вы должны переформатировать свои данные, чтобы «сгруппировать» атрибуты. На данный момент вы передаете один большой массив, который невозможно сгруппировать.

{% set typo_hierarchisation = [
    [
        { 'title' : 'Famille', value: 'Fira Sans' },
        { 'title' : 'Variante', value : 'ExtraBold' },
    ],[
        { 'title': 'Taille', value: '50px' },
        { 'title': 'Interlignage', value : '50px' },
        { 'title': 'Paragraphe', value: '25px' },
    ],
] %}


<ul>
{% for group in typo_hierarchisation %}
    <li>
        {% for item in group %}
        <div>
            <span>{{ item.title }}</span>
            <span>{{ item.value }}</span>
        </div>
        {% endfor %}
    </li>
{% endfor %}
</ul>

демо

---

Примечание: я использовал div для "группировки" атрибутов, имейте в виду, что по умолчанию это элемент блока, поэтому вам нужно добавить несколько CSS, чтобы поместить их рядом друг с другом