通过流体包装内容元素答案

【问题标题】：Wrapping Content Elements via Fluid通过流体包装内容元素
【发布时间】：2015-12-24 04:29:53
【问题描述】：

我正在试验 TYPO3 和 Fluid，目前我遇到了麻烦。这是关于我在 TYPO3 中创建的backendlayout。

它由两个内容区域组成：“left-column”和 “右栏”。

通过流体将它们带到前端外观是没有问题的。但后来我在“左列”中创建了四个内容元素（文本和图像）。我想用引导包装器包装这些内容元素中的每一个，例如发短信"col-md-8" 和img "col-md-4"。

不幸的是，我没有找到任何提示或文档如何做到这一点。也许有人可以帮助我解决这个问题并告诉我如何自定义我的内容元素的包装器。是否有可能通过流体来做到这一点？

【问题讨论】：

标签： typo3 fluid-layout fluid

【解决方案1】：

后端布局用于将列映射到您的模板，但它们不允许您决定每个列的显示方式。有几种解决方案……但上次我最喜欢的是扩展名Grid Elements。

它允许您为内容元素创建子容器，因此您可以添加 Bootstrap 网格布局的任意组合（即 2 columns - 4-8 或 3 columns - 3-3-3 等...），然后将其包装在 Bootstrap 类中。

提到的2 columns - 4-8 Grid Element 记录的示例：

标题： 2 columns: 4-8 或任何你想要的 ;)

别名： 2_columns_4_8（必须是唯一的）

网格配置：

backend_layout {
    colCount = 2
    rowCount = 1
    rows {
        1 {
            columns {
                1 {
                    name = Left
                    colPos = 221
                }
                2 {
                    name = Right
                    colPos = 222
                }
            }
        }
    }
}

最后在你的 TypoScript 模板中添加如下渲染定义：

tt_content.gridelements_pi1.20.10.setup {
    2_columns_4_8 < .default
    2_columns_4_8 {
        wrap = <div class="row">|</div>
        columns {
            221 < .default
            221.wrap = <div class="col-sm-4">|</div>

            222 < .default
            222.wrap = <div class="col-sm-8">|</div>
        }
    }
}

（在示例中观察 alias 以及 colPos 值在后面的 TypoScript 中使用的位置和方式）

提示：不要浪费时间在一开始就创建任何可能的列组合，而是在需要时创建一个ad hoc，通常您只需要其中的几个。

P.S. TYPO3 总是大写的！

【讨论】：