使用 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 = [&nbsp; &nbsp; [&nbsp; &nbsp; &nbsp; &nbsp; { 'title' : 'Famille', value: 'Fira Sans' },&nbsp; &nbsp; &nbsp; &nbsp; { 'title' : 'Variante', value : 'ExtraBold' },&nbsp; &nbsp; ],[&nbsp; &nbsp; &nbsp; &nbsp; { 'title': 'Taille', value: '50px' },&nbsp; &nbsp; &nbsp; &nbsp; { 'title': 'Interlignage', value : '50px' },&nbsp; &nbsp; &nbsp; &nbsp; { 'title': 'Paragraphe', value: '25px' },&nbsp; &nbsp; ],] %}<ul>{% for group in typo_hierarchisation %}&nbsp; &nbsp; <li>&nbsp; &nbsp; &nbsp; &nbsp; {% for item in group %}&nbsp; &nbsp; &nbsp; &nbsp; <div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{{ item.title }}</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span>{{ item.value }}</span>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; {% endfor %}&nbsp; &nbsp; </li>{% endfor %}</ul>演示注意：我使用了 adiv对属性进行“分组”，请记住，默认情况下这是一个块元素，因此您应该添加一些额外的 CSS 将它们放在一起