使用 Twig 在一行中制作信息

Question

简而言之，我需要在我的网站中嵌入这些信息：就这样:

Famille : Open Sans — Variante : Regular Italic

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

您必须重新格式化您想要 "group" 属性的数据。此时你正在传递一个大数组，这是不可能分组的。

{% 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>

demo

注意：我使用了 div 到 "group" 属性，请记住这是默认的块元素，因此您应该添加一些额外的 CSS 将它们并排放置

使用 Twig 在一行中制作信息

make infos in one line using Twig

html

css

twig