PAGEVIEW¶

New in version 13.1

This API is considered experimental until TYPO3 v13 LTS. It will be further adapted to be used for further rendering of custom Content Elements and Content Blocks.

The content object EXTBASEPLUGIN allows to render Extbase plugins.

The new PAGEVIEW content object has very specific conventions and defaults, that requires (and allows) less configuration. The benefit is that following these conventions means less boilerplate code to maintain.

If you follow these conventions, a few directories and files must follow the structure outlined below.

Table of contents

Example: Display a page with Fluid templates¶

EXT:my_sitepackage/Configuration/TypoScript/setup.typoscript

page = PAGE
page {
    10 = PAGEVIEW
    10 {
        paths {
            100 = EXT:my_sitepackage/Resources/Private/Templates/
        }
        variables {
            parentPageTitle = TEXT
            parentPageTitle.data = levelfield:-1:title
        }
        dataProcessing {
            10 = menu
            10.as = mainMenu
        }
    }
}

Default variables in Fluid templates¶

The following variables are available by default in the Fluid template.

Additional variables can be defined with property variables.

Default variables
Name	Type
language	`\TYPO3\CMS\Core\Site\Entity\SiteLanguage`
page	`\TYPO3\CMS\Frontend\Page\PageInformation`
settings	array
site	`\TYPO3\CMS\Core\Site\Entity\Site`

language ¶

Type: \TYPO3\CMS\Core\Site\Entity\SiteLanguage
Example: Example: Display the site title in the current language

The current SiteLanguage object, see also the SiteLanguage object.

page ¶

Type: \TYPO3\CMS\Frontend\Page\PageInformation
Example: Example: Display the title and abstract of the current page

The current PageInformation as object. See also Frontend page information.

settings ¶

Type: array
Example: Example: Use TypoScript constant in a Fluid template

The variable {settings} contains all TypoScript constants that are set on the current page.

site ¶

Type: \TYPO3\CMS\Core\Site\Entity\Site
Example: Example: Link to the root page of the current site

The current Site object. See also the Site object.

Examples for using default variables¶

Example: Display the site title in the current language¶

EXT:my_sitepackage/Resources/Private/Templates/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <main role="main">
        <p>The site title in the current template is: {language.websiteTitle}</p>
    </main>
</f:section>

Example: Display the title and abstract of the current page¶

EXT:my_sitepackage/Resources/Private/Templates/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <main role="main">
        <p>The title of the page with id {page.id} is: {page.pageRecord.title}. It has the
            following abstract:</p>
        <p>{page.pageRecord.abstract}</p>
    </main>
</f:section>

Example: Use TypoScript constant in a Fluid template¶

Let us assume, the current page loads the following TypoScript constants:

EXT:my_sitepackage/Configuration/TypoScript/constants.typoscript

page {
    uids {
        dataPrivacy = 42
        contact = 85
        imprint = 86
    }
}

EXT:my_sitepackage/Resources/Private/Templates/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <main role="main">
        <p>...</p>
    </main>
    <footer>
        See also our <f:page pageUid="{settings.page.uid.dataPrivacy}">data privacy policy</f:page>
    </footer>
</f:section>

Example: Link to the root page of the current site¶

EXT:my_sitepackage/Resources/Private/Templates/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <main role="main">
        <p>Go to the root page: <f:link.page pageUid="{page.rootPageId}">Home</f:link.page></p>
        <p>...</p>
    </main>
</f:section>

Properties¶

PAGEVIEW properties
Name	Type
cache	cache
dataProcessing.[key]	path with stdWrap
paths.[priority]	path with stdWrap
variables.[variable_name]	Content Object

cache ¶

Type: cache

See cache function description for details.

dataProcessing.[key] ¶

Type: path with stdWrap
Example: Example: Display a main menu and a breadcrumb on the page

Add one or multiple data processors. The sub-property options can be used to pass parameters to the processor class.

It is recommended to use the PageContentFetchingProcessor to fetch the content elements from the page, respecting the backend layout.

paths.[priority] ¶

Type: path with stdWrap
Example: Example: Define a path that contains all templates
Example 2: Example: Define fallbacks for a template paths

Sets an array of paths for the Fluid templates, usually EXT:my_extension/Resources/Private/Templates/ or a folder below that path like EXT:my_extension/Resources/Private/Templates/MyPages.

The templates are expected in a subfolder Pages.

Fluid partials are looked up in a sub-directory called Partials, layouts in Layouts.

The name of the used page layout (Backend layout) is resolved automatically.

The paths are evaluated from highest to lowest priority.

variables.[variable_name] ¶

Type: Content Object
Example: Example: Make additional variables available in the Fluid template

Sets variables that should be available in Fluid.

Examples¶

Example: Display a main menu and a breadcrumb on the page¶

EXT:my_sitepackage/Configuration/TypoScript/setup.typoscript

page = PAGE
page {
    10 = PAGEVIEW
    10 {
        paths {
            100 = EXT:my_sitepackage/Resources/Private/Templates/
        }
        dataProcessing {
            10 = menu
            10 {
                as = mainMenu
                titleField = nav_title // title
                expandAll = 1
            }
            20 = menu
            20 {
                as = breadcrumb
                special = rootline
                special.range = 0|-1
                includeNotInMenu = 0
            }
        }
    }
}

The page template could look like this:

EXT:my_sitepackage/Resources/Private/Templates/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <f:render partial="Navigation/MainNavigation.html" arguments="{mainMenu: mainMenu}"/>
    <main role="main">
        <f:render partial="Navigation/Breadcrumb.html" arguments="{breadcrumb: breadcrumb}"/>
        <p>...</p>
    </main>
</f:section>

With the following partials:

        EXT:my_sitepackage/Resources/Private/Templates/Partials/Navigation/Breadcrumb.html
    

<f:if condition="{breadcrumb}">
    <ol class="breadcrumb">
        <f:for each="{breadcrumb}" as="item">
            <li class="breadcrumb-item{f:if(condition: item.current, then: ' active')}" >
                <a class="breadcrumb-link" href="{item.link}" title="{item.title}">
                    <span class="breadcrumb-text">{item.title}</span>
                </a>
            </li>
        </f:for>
    </ol>
</f:if>

And

        EXT:my_sitepackage/Resources/Private/Templates/Partials/Navigation/MainNavigation.html
    

<ul class="nav nav-pills">
    <f:for each="{mainMenu}" as="menuItem">
        <li class="nav-item {f:if(condition: menuItem.hasSubpages, then: 'dropdown')}">
            <f:if condition="{menuItem.hasSubpages}">
                <f:then>
                    <!-- Item has children -->
                    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-expanded="false">
                        {menuItem.title}
                    </a>
                    <div class="dropdown-menu">
                        <f:for each="{menuItem.children}" as="menuItemLevel2">
                            <f:link.page pageUid="{menuItemLevel2.data.uid}"
                                         class="dropdown-item {f:if(condition: menuItemLevel2.active, then: 'active')}">
                                {menuItemLevel2.title}
                            </f:link.page>
                        </f:for>
                    </div>
                </f:then>
                <f:else>
                    <!-- Item has no children -->
                    <f:link.page pageUid="{menuItem.data.uid}" class="nav-link {f:if(condition: menuItem.active, then:'active')}">
                        {menuItem.title}
                    </f:link.page>
                </f:else>
            </f:if>
        </li>
    </f:for>
</ul>

Example: Define a path that contains all templates¶

This is a basic definition of a PAGEVIEW object with only one path to the templates:

EXT:my_sitepackage/Configuration/TypoScript/setup.typoscript

page = PAGE
page.10 = PAGEVIEW
page.10.paths.100 = EXT:my_sitepackage/Resources/Private/Templates/

The content of the folder could look like this:

EXT:my_sitepackage/Resources/Private/Templates/
- Layouts
  - Default.html
  - WithoutHeader.html
- Pages
  - Default.html
  - StartPage.html
  - TwoColumns.html
  - With_sidebar.html
- Partials
  - Footer.html
  - Sidebar.html
  - Menu.html

Note

If the name of the backend layout starts with a lowercase letter, the first letter of the template name is transformed into upper case.

However the template name is not necessarily transferred into CamelCase.

So for backend layout named "with_sidebar", the template file is then resolved to EXT:my_sitepackage/Resources/Private/Templates/Pages/With_sidebar.html.

If the backend layout is named "TwoColumns" it is resovled to EXT:my_sitepackage/Resources/Private/Templates/Pages/TwoColumns.html.

For all these templates partial are expected in folder EXT:my_sitepackage/Resources/Private/Templates/Pages/Partials and layouts in EXT:my_sitepackage/Resources/Private/Templates/Pages/Layouts.

Example: Define fallbacks for a template paths¶

You can use the directories defined in paths.[priority] to define fallback directories for the templates:

page = PAGE
page {
    10 = PAGEVIEW
    10.paths {
        100 = EXT:my_basic_sitepackage/Resources/Private/Templates/
        200 = EXT:my_general_sitepackage/Resources/Private/Templates/
        300 = EXT:my_special_sitepackage/Resources/Private/Templates/
    }
}

The template for a page with a certain backend layout is first searched in EXT:my_special_sitepackage/Resources/Private/Templates/Pages/ then in EXT:my_general_sitepackage/Resources/Private/Templates/Pages/ and last in EXT:my_basic_sitepackage/Resources/Private/Templates/Pages/.

Example: Make additional variables available in the Fluid template¶

EXT:my_sitepackage/Configuration/TypoScript/setup.typoscript

page = PAGE
page {
    10 = PAGEVIEW
    10 {
        paths {
            100 = EXT:my_sitepackage/Resources/Private/Templates/
        }
        variables {
            parentPageTitle = TEXT
            parentPageTitle.data = levelfield:-1:title
            another_variable =< lib.anotherVariable
        }
    }
}

The following variables are now available in the Fluid template:

EXT:my_sitepackage/Resources/Private/Templates/Pages/Default.html

<f:layout name="Default" />
<f:section name="Main">
    <f:render partial="Navigation/MainNavigation.html" arguments="{_all}"/>

    <main role="main">
        <p>The current parent page has the title {parentPageTitle}</p>
        <p>Another variable is {another_variable}</p>
    </main>
</f:section>