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

问题描述 投票:0回答:2

我的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]

当我将前端布局从默认切换到layout1或layout2时,我的前端没有任何变化。

缺少什么,或者我做错了什么?

typo3 typoscript fluid
2个回答
0
投票

多方面为什么你不应该这样工作:

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

替代方案:

使用字段backend_layoutbackend_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字段适应常规前端模板,则需要将此信息传输到fluid-template:

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}" />

通常,您可以通过多种方式使用这两个字段,其中一些其他用法:

Typo脚本:

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中:


0
投票

安全的方式:

  • 有多个Layout文件彼此相邻
  • 命名带有后缀的替代布局,例如MyLayoutSpecial.html作为MyLayout.html的替代品
  • 分配一个模板变量,其中包含要使用的Layout的“类型”,并且该变量不包含任何内容或者像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>
© www.soinside.com 2019 - 2024. All rights reserved.