使用 Twig 将信息写在一行中

Question

简而言之，我需要将这些信息内嵌在我的网站中：就像这样：系列：Open Sans — 变体：常规斜体大小：15 像素 — 行距：25 像素 — 段落：15 像素颜色：灰色_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",                    }                ]            }%}

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>

演示

---

注意：我使用了 adiv对属性进行“分组”，请记住，默认情况下这是一个块元素，因此您应该添加一些额外的 CSS 将它们放在一起