Typo3 中的单页布局

Question

我已经有一个 Onepage HTML 模板，现在我想在其中显示来自 Typo3 的内容。如何在一个页面上显示不同子页面的内容？

有例子吗？

感谢您的帮助！

Answer 1

temp.content = COA
temp.content {
    10 = CONTENT
    10 {
        table = pages
        select {
            pidInList.field = uid
            orderBy = sorting ASC
        }
        renderObj = COA
        renderObj {
            10 = CONTENT
            10 {
                table = tt_content
                select {
                    languageField = sys_language_uid
                    pidInList.field = uid
                    orderBy = sorting
                }
                stdWrap.wrap = |
            }
        }
    }
}

...但是根据您的问题我会说您开始使用 TYPO3...

在这种情况下，我建议您使用以下扩展名：EXT:t3sbootstrap 来自存储库...（这只是您的第一次挂断）

开箱即用它确实允许您的请求，您可以通过剖析扩展慢慢弄清楚它是如何完成的！！

大优势：

您的网站已启动并运行很快。
很棒的文档（如果你说德语......）Website
这是使用 extbase 编码的正确推荐方式

我知道这看起来有点自以为是，但这确实是我能给你的最好的建议......（如果你的模板是 bootstrap v3 就去旧版本，比如 3.2.43（无论如何我更喜欢))

如果这不适合您，您将不得不构建一个自定义发行版，该发行版在 TYPO3 docs

中有详细记录

老但总是好的：PanadeEdu on Yoututbe (always in german) with a specific film on the template

还有另一个非常完整的系列：Wolfgang wagner on youtube，随便选一个主题（他也有视频课程出售）

据说TYPO3很好玩，一开始有点头疼，但是你用它学到的东西会让你进入编程的前10%!!!

Answer 2

最困难的方面可能是 onepager 的设置在 TYPO3 中并不典型。尽管如此，TYPO3 可能是实现您的请求的最佳系统之一，因为它非常容易从多个页面抓取和排序内容。

假设这样的设置：

page = PAGE
page {
    10 = CONTENT
    10 {
        table = tt_content
        select {
            where = colPos = 0
            pidInList = 10,11,12,13,14,15
            orderBy = crdate
        }
    }
}

像这样，您可以从 uid 在 10-15 范围内的页面中获取所有内容元素。使用命令 orderBy 和字段 cr_date 作为值来完成排序。

我必须承认，此处的排序可能不是您所需要的，并且所需的排序不同于您通过为所有页面添加单个排序字段而实现的排序。不心疼，一步步收集资料：

page = PAGE
page {
    10 = CONTENT
    10 {
        table = tt_content
        select {
            where = colPos = 0
            pidInList = 10
            orderBy = crdate
        }
    }

    20 = CONTENT
    20 {
        table = tt_content
        select {
            where = colPos = 0
            pidInList = 11
            orderBy = subheader
        }
    }

    30 = CONTENT
    30 {
        table = tt_content
        select {
            where = colPos = 0
            pidInList = 12
            orderBy = header
        }
    }
}

上面每个页面的记录按不同的字段排序，因此您会看到可能存在更多变化。
如果这还不够作为排序选项，它仍然可以从数据库中检索单个记录的列表。我现在不是 100% 确定，但我想内容 uid 的排序决定了你得到的数据的排序：

page = PAGE
page {
    10 = CONTENT
    10 {
        table = tt_content
        select {
            where = colPos = 0
            uidInList = 33,34,355,556,789
        }
    }
}

所有的要求都可以通过 TypoScript 解决，并且仍然可以包含更困难的场景。 Here you find the reference for TypoScript.

获取数据后，通常始终使用相同的设置呈现内容。但是可以使用不同的功能和使用不同的内容模板来呈现它。 this page 上显示了一些非常基本的渲染选项，但如果你在 TYPO3 中深入挖掘，你可以单独渲染每个数据集。请注意，如果您使用流体模板，渲染可能不再那么重要，因为很多事情都可以在模板中完成。

Answer 3

如果您不喜欢 Typoscript，您可以使用 VHS Extension 的 viewhelpers 轻松创建一个 onepager。

我对 Typoscript 所做的唯一一件事就是将布局添加到 pages。

TCEFORM.pages.layout {
    removeItems = 1,2,3
    altLabels.0 = None
    addItems {
        10 = Class 1
        20 = Class 2
        30 = Class 3
        40 = Class 4
    }
}

您可以使用此布局在单页内创建不同的样式。

我在我的页面模板中使用了这样的东西：

<main>
    <v:page.menu pageUid="1" as="page">
        <f:for each="{page}" as="pageObject">
            <f:render partial="OnepagerContainer" section="Main" arguments="{pageObject:pageObject}"/>
        </f:for>
    </v:page.menu>
</main>

pageUid="1" 是您的 pagetree 中的首页，子页面应该在 onepager 中呈现。

在那里呈现的部分看起来像：

<html xmlns="http://www.w3.org/1999/xhtml" lang="en"
      xmlns:f="http://typo3.org/ns/TYPO3/Fluid/ViewHelpers"
      xmlns:v="http://typo3.org/ns/FluidTYPO3/Vhs/ViewHelpers"
      data-namespace-typo3-fluid="true">

<f:section name="Main">

    <f:switch expression="{pageObject.layout}">
        <f:case value="10">
            <v:variable.set name="containerClass" value="container-class1"/>
        </f:case>
        <f:case value="20">
            <v:variable.set name="containerClass" value="container-class2"/>
        </f:case>
        .
        .
        .
    </f:switch>

    <div id="anchor-{pageObject.uid}" class="container{f:if(condition: containerClass, then:' {containerClass}')}">
        <div class="col-12">
            <v:content.render pageUid="{pageObject.uid}"/>
        </div>
    </div>
</f:section>

</html>

渲染后，看起来像：

<main>
    <div id="anchor-2" class="container container-tiles">
        <div class="col-12"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam</p></div>
    </div>
    <div id="anchor-3" class="container">
        <div class="col-12"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum</p></div>
    </div>
    <div id="anchor-4" class="container">
        <div class="col-12"><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum</p></div>
    </div>
    <div id="anchor-5" class="container">
        <div class="col-12"></div>
    </div>
    <div id="anchor-6" class="container">
        <div class="col-12"></div>
    </div>
    <div id="anchor-7" class="container">
        <div class="col-12"></div>
    </div>
</main>

<div id="anchor-4" class="container"></div>中的ID是用PID（anchor-[pid]）创建的。现在您可以创建一个使用此锚点 ID 向下滚动的导航。

Typo3 中的单页布局

Onepage Layout in Typo3

templates

typo3

typoscript