Typo3 Fluid 实现了不同的前端布局

Question

我的 Typo3 后端需要不同的前端布局。所以我在

中创建了新的 html 文件

template\Resources\Private\Layouts\Page

所以在 Default.html 旁边，现在有 Layout1.html 和 Layout2.html

之后我尝试在 setup.typoscript

中声明这些文件

[globalVar = TSFE:page | layout=1]
page.10.template.file = FILE:EXT:template/Resources/Private/Layouts/Page/Layout1.html
[global]

[globalVar = TSFE:Page | layout=2]
page.10.template.file = FILE:EXT:template/Resources/Private/Layouts/Page/Layout2.html
[global]

当我将前端布局从默认布局切换到布局 1 或布局 2 时，我的前端没有任何变化。

缺少了什么，或者我做错了什么？

Answer 1

安全方法：

有多个 Layout 文件彼此相邻
使用后缀命名替代布局，例如MyLayoutSpecial.html 替代 MyLayout.html
分配包含 Layout 的 "type" 的模板变量以供使用，并让该变量不包含任何内容或包含 Special
在模板中，使用 <f:layout name="MyLayout{layoutType}" /> 来引用您的布局

结果是布局文件的安全解析，假设您检查值始终对应于物理布局文件。如果你不分配 {layoutType} 你的布局名称是 MyLayout 如果你分配它的值为 Special 你的布局名称是 MyLayoutSpecial.

请注意，同一模板中不能有多个 f:layout，因为只会使用第一个。提供多个可能的布局选项的唯一方法是使 name 属性值动态化，例如将一个简单的变量作为名称的一部分。

第二个选项 - 模板包装和 contentAs:

Fluid 还允许您从部分模板中呈现一个部分，但传递一个变量，您可以使用 f:render 的标签内容填充该变量。这会导致呈现的标签内容作为变量传递，然后您可以包装它。

将其与动态部分名称或动态部分名称结合使用（请参阅上文了解如何确保安全）意味着您可以引用任何类型的动态包装，而无需大量条件。例如：

<!-- In the template that renders the partial -->
<f:render partial="Wrap{specialWrap}" arguments="{_all}" contentAs="content">
    <div>The thing that needs to be wrapped with dynamic wrapping</div>
</f:render>

<!-- In the partial template, for example called `WrapDiv.html` -->
<div class="foo">
    <f:format.raw>{content}</f:format.raw>
</div>

Answer 2

为什么你不应该以这种方式工作的多个方面：

更喜欢.templateName而不是.template.file
它更灵活，因为您可以有多个输出 (.html、.xml、.json、...)
layout 字段默认不继承。
您需要为每个页面定义字段值
TS 条件导致拼写错误的多个缓存版本
后端并不代表您的编辑器的前端布局

选择：

像这样使用字段 backend_layout 和 backend_layout_next_level：

    templateName = TEXT
    templateName.cObject = CASE
    templateName.cObject {
        key.data = levelfield:-1, backend_layout_next_level, slide
        key.override.field = backend_layout

        #Default Template
        default = TEXT
        default.value = Default

        pagets__startpage = TEXT
        pagets__startpage.value = Startpage

        pagets__simple = TEXT
        pagets__simple.value = Simple

    }

或者您直接使用值：

templateName = TEXT
templateName {
    value = default
    override.cObject = TEXT
    override.cObject {
        data = levelfield:-1, backend_layout_next_level, slide
        override.field = backend_layout
    }
}

后端布局在页面 TSconfig 中定义（可从 EXT:my_site_ext/Configuration/TSconfig/page.tsconfig 部署）

## define backend-layouts
mod.web_layout.BackendLayouts {
    startpage {
        title = Startpage Layout
        config {
            backend_layout {
                colCount = 4
                rowCount = 4
                rows {
                     :
                }
            }
        }
    }
    simple {
        title = Simple Layout
        config {
            backend_layout {
                colCount = 2
                rowCount = 2
                rows {
                     :
                }
            }
        }
    }
    default {
        title = Default Layout
        config {
            backend_layout {
                colCount = 4
                rowCount = 3
                rows {
                     :
                }
            }
        }
    }
}

如果您希望 layout 字段适应通用前端模板，您需要将此信息传输到流体模板中：

variables {
    :
    layout = TEXT
    layout.field = layout
    :
}

然后你可以考虑你的模板（或布局）文件中的布局：

<f:if condition="{layout} == 1">
    <then><f:render partial="header1" /></then>
    <else><f:if condition="{layout} == 2">
        <then><f:render partial="header2" /></then>
        <else><f:render partial="header0" /></else></fi>
    </else>
</fi>

并且在这里您可以立即使用该值（确保所有部分都可用）：

<f:render partial="header{layout}" />

一般来说这两个字段可以有多种使用方式，这里有一些其他的用法：

打字错误：

page.10.template {
    templateName = Default

    variables {
        beLayout = TEXT
        beLayout.data = levelfield:-1, backend_layout_next_level, slide
        beLayout.override.field = backend_layout

        feLayout = TEXT
        feLayout.field = layout

        :
    }
}

1.

你使用的是静态模板，BE-和FE-布局字段是流体变量，决定了进一步的流体渲染：

在Templates/Default.html:

<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
  data-namespace-typo3-fluid="true">
<f:layout name="{beLayout}" />

<f:section name="Main">
    <f:if condition="{feLayout} == 1">
          <div class="col-visual">{content_visual->f:format.raw()}</div>
    </f:if>

    <div class="col-main">{content_main->f:format.raw()}</div>

    <f:if condition="{feLayout} == 2">
         <div class="col-infobox">{content_infobox->f:format.raw()}</div>
    </f:if>
</f:section>

2.

在Templates/Default.html:

<f:render partial="{beLayout}" section="{feLayout}" arguments="{_all}" />

3.

在Templates/Default.html:

Typo3 Fluid 实现了不同的前端布局

Typo3 Fluid implement different frontend layouts

typo3

fluid

typoscript