FluidTYPO3 在 TYPO3 后端使用 Flux Grid 复制内容模块

Posted 2023-02-22

【中文标题】FluidTYPO3 在 TYPO3 后端使用 Flux Grid 复制内容模块

【英文标题】：FluidTYPO3 duplicated Content Modules with Flux Grid at TYPO3 Backend

【发布时间】：2016-12-02 17:15:55

【问题描述】：

我正在使用TYPO3 7.6和最新的Flux-、VHS- 和FluidcontentExtensions (FluidTYPO3)。我写了一个新的 FLUX-Content 元素，一个来自Zurb Foundation 6 的 Tab-Container。 该元素工作正常（前端），但在后端我有一行有我的选项卡和列.. sth。会复制我的标签和里面的内容吗？！已清除缓存。

这是一个屏幕截图。 Tab-Elements会被复制，不知道为什么？

我的 FLUX FCE：

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
    xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
    xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

    <f:layout name="Content" />

    <f:section name="Configuration">
        <flux:form id="tabs" options="group: 'LLL:typo3conf/ext/myelements/Resources/Private/Language/locallang.xlf:grid.elements'">

            <flux:form.sheet name="tabs">
                <flux:form.section name="tabs">
                    <flux:form.object name="tab">

                        <flux:field.input name="title" />
                        <flux:field.input name="class" />
                        <flux:field.checkbox name="active" />

                    </flux:form.object>
                </flux:form.section>
            </flux:form.sheet>

            <flux:grid>
                <flux:grid.row>
                    <f:if condition="tabs">
                        <f:for each="tabs" as="tab" iteration="iteration">
                                <flux:form.content name="content.iteration.index" label="Tab iteration.cycle" />
                        </f:for>
                    </f:if>
                </flux:grid.row>
            </flux:grid>

        </flux:form>
    </f:section>



    <f:section name="Preview">
        <flux:widget.grid />
    </f:section>



    <f:section name="Main">

        <f:render section="Tabs" arguments="_all" />

        <div class="tabs-content" data-tabs-content="tabs-record.uid">
            <f:if condition="tabs">
                <f:for each="tabs" as="tab" iteration="iteration">
                    <div class="tabs-panel f:if(condition: 'tab.tab.active == 1', then: 'is-active')" id="panel-record.uid-iteration.index">
                        <flux:content.render area="content.iteration.index" />
                    </div>
                </f:for>
            </f:if>
        </div>

    </f:section>



    <f:section name="Tabs">

        <f:if condition="tabs">

            <ul class="tabs" data-tabs id="tabs-record.uid">
                <f:for each="tabs" as="tab" iteration="iteration">
                    <li class="tabs-title f:if(condition: 'tab.tab.active == 1', then: 'is-active')">
                        <a href="#panel-record.uid-iteration.index" aria-selected="true">tab.tab.title</a>
                    </li>
                </f:for>
            </ul>

        </f:if>

    </f:section>

</div>

【参考方案1】：

这就是问题所在：

<flux:widget.grid />

根据Release Notes of flux 7.2：

已替换预览小部件

我们已经替换了 Flux 在 Grid 生成预览时的方式 涉及。之前，Flux 会从 Fluid 模板渲染 Grid 文件，这意味着模板必须被解析（或从 编译缓存）然后渲染，涉及大量 加工。内容元素容器区域现在由 特殊的视图类，工作时显着提高性能 具有多个嵌套元素。

新行为：

在页面模块中将 Grid 呈现为内容元素容器，如果您 模板定义一个，无论您是否有预览 部分。

弃用不再有任何功能的flux:widget.grid。

删除所有对设置用于渲染的流体模板的支持 网格。

基本上，我们牺牲了很少使用的模板替换 在非常频繁执行的代码中提高性能的功能。

因此，只需从模板中删除完整的 Preview 部分。

【讨论】：

谢谢 viktor，我下周可以改，但你是对的。我没有完全阅读发行说明；）非常感谢。祝你周末愉快！ - 斯蒂芬

【参考方案2】：

谢谢维克托。

必须从您的模板中删除 all flux.grid-stuff。 整个预览部分和配置部分的一些网格/行。

这是flux和zurb foundation的正确标签模板：

<div xmlns="http://www.w3.org/1999/xhtml" lang="en"
    xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
    xmlns:flux="http://typo3.org/ns/FluidTYPO3/Flux/ViewHelpers"
    xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers">

    <f:layout name="Content" />

    <f:section name="Configuration">
        <flux:form id="Tabs" options="group: 'LLL:typo3conf/ext/customerproject/Resources/Private/Language/locallang.xlf:grid.elements'">

            <flux:form.sheet name="tabs">
                <flux:form.section name="tabs">
                    <flux:form.object name="tab">

                        <flux:field.input name="title" />
                        <flux:field.input name="class" />
                        <flux:field.checkbox name="active" />

                    </flux:form.object>
                </flux:form.section>
            </flux:form.sheet>


            <f:if condition="tabs">
                <f:for each="tabs" as="tab" iteration="iteration">
                        <flux:form.content name="content.iteration.index" label="Tab iteration.cycle" />
                </f:for>
            </f:if>


        </flux:form>
    </f:section>






    <f:section name="Main">
        <div class="flux grid01Tabs">

            <f:render section="Tabs" arguments="_all" />

            <div class="tabs-content" data-tabs-content="tabs-record.uid">
                <f:if condition="tabs">
                    <f:for each="tabs" as="tab" iteration="iteration">
                        <div class="tabs-panel f:if(condition: 'tab.tab.active == 1', then: 'is-active')" id="panel-record.uid-iteration.index">
                            <flux:content.render area="content.iteration.index" />
                        </div>
                    </f:for>
                </f:if>
            </div>

        </div><!-- / tabWrap -->
    </f:section>



    <f:section name="Tabs">

        <f:if condition="tabs">

            <ul class="tabs" data-tabs id="tabs-record.uid">
                <f:for each="tabs" as="tab" iteration="iteration">
                    <li class="tabs-title f:if(condition: 'tab.tab.active == 1', then: 'is-active')">
                        <a href="#panel-record.uid-iteration.index" aria-selected="true">tab.tab.title</a>
                    </li>
                </f:for>
            </ul>

        </f:if>

    </f:section>

</div>

【讨论】：

上面的代码可以工作，但应该带有一个小警告：使用flux:form.content 是编写flux:grid 的一种简写方法，其中一个flux:grid.row 和一个flux:grid.column列接收用于flux:form.content 的“名称”。所以换句话说，上面的代码在内部生成多个网格，而不是在单个网格中创建多个列。实际上它呈现相同但尝试复制此方法的其他用例可能会发现问题，例如仅保留最后一个内容列。

@ClausDue 是否有任何替代 Flux:form.content 又名简单的flux.grid？

不，但是使用一个flux:grid、一个flux:grid.row 和一个flux:grid.column 可以获得相同的结果。另请参阅github.com/FluidTYPO3/flux/pull/1582，它非常适合原始问题中描述的用例，并且包含在 Flux 9.2+ 中