Templates 一页排版3

我已经有了一个一页的HTML模板，现在我想在里面显示Typo3的内容。 如何在一个页面上显示不同子页面的内容

有什么例子吗

谢谢你的帮助

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 = |
            }
        }
    }
}

。。。但从你的问题来看，我想说你开始使用打字3

在这种情况下，我建议您使用以下扩展：从存储库。。。（这只是你第一次挂断电话）

开箱即用，它确实允许您的请求，您可以通过解析扩展来慢慢了解它是如何完成的

大优势：

您的站点很快就可以启动并运行了

很棒的文档（如果你说德语…）

这是使用extbase编写代码的正确推荐方式

我知道这似乎有些自以为是，但这确实是我能给你的最好的建议。。。（如果您的模板是BootstrapV3，那么只需使用较旧的版本，如3.2.43（我还是更喜欢它））

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

老但总是好的：（总是用德语）有一部特别的电影

还有另一个非常完整的系列：，只要你选择主题（他也有一个视频课程出售）

---

据说TYPO3很有趣，刚开始的时候有点头疼，但是你用它学到的东西会让你在编程的前10%中获得成功

最困难的方面可能是

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\u 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
        }
    }
}

所有的需求都可以通过打字来解决，而且还可能包含更困难的场景。

获取数据后，通常使用相同的设置呈现内容。 但是可以使用不同的函数和不同的内容模板来呈现它。 上显示了一些非常基本的渲染选项，但如果您深入了解TYPO3，则可以单独渲染每个数据集。

---

请注意，如果使用流体模板，渲染可能不再那么重要，因为许多事情都可以在模板中完成。

如果您不喜欢打字稿，可以轻松创建带有VHS扩展的ViewHelper的onepager

我对打字脚本所做的唯一一件事就是在

页面中添加布局

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

此布局可用于在onepager中创建不同的样式

我在我的页面模板中使用如下内容：

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

渲染后，这看起来像：

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


根据法律规定，所有人都必须遵守法律规定，必须遵守法律规定

根据法律规定，所有人都有权在法律规定的时间内获得劳动和财产权。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。同侧眼睑

根据法律规定，所有人都有权在法律规定的时间内获得劳动和财产权。在vero eos和accusam以及justo duo dolores和ea Reum。斯泰特·克莱塔·卡斯德·古伯格伦（Stet clita kasd gubergren），没有海洋保护区是属于同一领域的。同侧眼睑


中的ID是用PID（锚定-[PID]）创建的。
现在您可以创建一个导航，该导航使用该锚ID向下滚动

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