Configure the PAGE in TypoScript

A TypoScript object of type PAGE is needed to display anything in the frontend of TYPO3.

The PAGE object is used to define a certain view of the content that was entered in the backend.

To display an HTML representation of your content usually a Fluid template is used to define the output of the HTML body while the PAGE object can additionally define meta data for the HTML head or even the HTTP response.

By default the top level variable page is used to define the main PAGE object. The following would display the empty skeleton of an HTML page:

page = PAGE
Copied!

If this line is missing, you get the error message "No page configured for type=0.".

See also Troubleshooting.

Overview

Displaying the page body with TypoScript

Numeral indexes on the PAGE object are used to output the actual content of the page. Many integrators like to use the index 10.

As we already saw in section First steps, the following code outputs "Hello World!":

TypoScript setup 
page = PAGE
page {
  10 = TEXT
  10.value = Hello World!
}
Copied!

In a more common use case you want to load the page content from a Fluid template:

TypoScript setup 
page = 10
page {
  10 = FLUIDTEMPLATE
  10 {
    templateName = TEXT
    templateName.value = Default

    templateRootPaths {
      0 = EXT:site_package/Resources/Private/Templates/Pages/
    }
  }
}
Copied!

You need at least a Minimal site package (see site package tutorial) to keep your templates in its private resources folder, for example /packages/site_package/Resources/Private/Templates:

/packages/site_package/Resources/Private/Templates/Pages/Default.html 
<main>
    <p>Hello World!</p>
</main>
Copied!

Loading CSS in TypoScript

You can write inline CSS using property cssInline.[array], or place your CSS file in the public resources of your Minimal site package:

TypoScript setup 
page = PAGE
page {
  10 = TEXT
  10.value = <div class="myTodo">TODO: Add Fluid template </div>
  cssInline {
    10 = TEXT
    10.value (
      .myTodo {
        border: 2px solid #ee7600;
      }
    )
  }
  includeCSS {
    styles = EXT:site_package/Resources/Public/Css/styles.css
  }
}
Copied!

Loading JavaScript in TypoScript

You can write inline JavaScript using property jsFooterInline.[array], or place your JavaScript file in the public resources of your Minimal site package:

TypoScript setup 
page = PAGE
page {
  10 = TEXT
  10.value = <div class="myTodo">TODO: Add Fluid template </div>
  jsFooterInline {
    10 = TEXT
    10.value (
      alert("Hello World! ");
    )
  }
  includeCSS {
    includeJSFooter = EXT:site_package/Resources/Public/JavaScript/main.js
  }
}
Copied!

Favicon / shortcut icon definition in the TypoScript PAGE

Use property shortcutIcon to define the favicon:

TypoScript setup 
page = PAGE
page {
  shortcutIcon = EXT:site_package/Ressources/Public/Icons/favicon.ico
  10 = TEXT
  10.value = TODO: Add Fluid template
}
Copied!

You need to have a Minimal site package (see site package tutorial) and put the favicon file in the public resources folder of that site package. If you followed the instruction from the site package tutorial that would be path /packages/site_package/Resources/Public/Icons.

Tracking code: Add content to the end of your page

You can use the property footerData.[array] to enter some HTML code just before the closing </body> tag:

TypoScript setup 
page = PAGE
page {
  10 = TEXT
  10.value = TODO: Add Fluid template
  footerData {
    10 = TEXT
    10.value (
      <!-- Enter some tracking code supplied by your provider -->
      <p>My tracking code</p>
    )
  }
}
Copied!