Onepage Layout in Typo3

i already have a Onepage HTML template and now I want to show the content from Typo3 inside it. How is it possible to show content of different subpages at only one page?

Are there any examples?

Thanks for your help!

Solution

If you don't like Typoscript you can easily create a onepager with viewhelpers of the VHS Extension.

The only thing I did with Typoscript is adding Layouts to pages.

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

This Layouts you can use to create different styles inside the onepager.

I use something like this in my page-template:

<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" is the top page in your pagetree, wich subpages should be rendered in the onepager.

And the Partial thats rendered there looks like:

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

After rendering, this looks like:

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

The ID in <div id="anchor-4" class="container"></div> is created with the PID (anchor-[pid]). Now you can create a navigation which uses this anchor-IDs to scroll down.