Question

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

有没有例子？

感谢您的帮助！

Answer 1

如果您不喜欢Typoscript，则可以使用VHS扩展程序的viewhelper轻松创建一个单页浏览器。

我对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
    }
}

您可以使用此版式在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>

pageUid="1"是页面树的首页，所有子页面都应在onepager中呈现。

在那里渲染的Partial thats看起来像：

<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向下滚动。

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％，但我想content-uids的排序决定了您获得的数据的排序：

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

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（总是德语），在the template上有特定的电影

和另一个非常完整的系列：Wolfgang wagner on youtube，请选择您要的主题（他也有出售视频课程）

据说TYPO3很有趣，一开始有点让人头疼，但是您从中学到的东西将使您进入编程的前10％！

Typo3中的一页布局

3 个答案: