PAGE¶
This defines what is rendered in the frontend.
PAGE is an object type. A good habit is to use page as the top-level object name for
the content-page on a website.
TYPO3 does not initialize page by default. You must initialize this
explicitly, for example:
page = PAGE
Pages are referenced by two main values. The "id" and "type".
The "id" points to the uid of the page (or the alias). Thus the page is found.
Most of this code is executed in the PHP script
\TYPO3\CMS\Frontend\Http\RequestHandler.
Output of the PAGE object¶
An empty PAGE object without further configuration renders a HTML page
like the following:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!--
This website is powered by TYPO3 - inspiring people to share!
TYPO3 is a free open source Content Management Framework initially created by Kasper Skaarhoj and licensed under GNU/GPL.
TYPO3 is copyright 1998-2019 of Kasper Skaarhoj. Extensions are copyright of their respective owners.
Information and contribution at https://typo3.org/
-->
<title>Page title</title>
<meta name="generator" content="TYPO3 CMS">
</head>
<body>
</body>
</html>
This default behaviour can be changed by setting the property disableAllHeaderCode:
page.config.disableAllHeaderCode = 1
If the output represents another format different from HTML the HTTP header should also be set, for example:
page.config.additionalHeaders.10.header = Content-type:application/json
Multiple pages¶
The type is used to define how the page should be rendered. This is primarily used with different representations of the same content. Your default page will most likely have type 0 while a JSON stream with the same content could go with type 1.
When rendering pages in the frontend, TYPO3 uses the GET parameter "type" to define how the page should be rendered. This is primarily used with different representations of the same content. Your default page will most likely have type 0 (which is the default) while a JSON stream with the same content could go with type 1.
The property typeNum defines for which type, the page will be used.
Example:
page = PAGE
page.typeNum = 0
page {
# set properties ...
}
json = PAGE
json.typeNum = 1
# ...
See An example page type used for JSON data about an example for the latter page.
In the frontend, the original URLs that are generated will include the type and an id parameter (for the page id), example (for json and page id 22):
/index.php?id=22&type=1
Guidelines¶
Good, general PAGE object names to use are:
page for the main page with content
json for a json stream with content
xml for a XML stream with content
These are just recommendations. However, especially the name page for the content bearing page is very common and most documentation will imply that your main page object is called page.
Examples¶
Please see the dedicated example page about examples of how to use the PAGE object: PAGE Examples
Properties¶
Property |
Data Type |
Default |
|
|---|---|---|---|
<body> |
|||
<head> |
|||
(array of strings) |
|||
(array of strings) |
|||
(array of strings) |
|||
0 |
|||
1,2,3,4...¶
Property
1,2,3,4...
Data type
Description
These properties can be used to define any number of objects, just like you can do with a COA content object.
The content of these objects will be rendered on the page in the order of the numbers, not in the order they get defined in the TypoScript definition.
It is considered best practise to leave space between the numbers such that it will be possible to place objects before and after other objects in the future. Therefore you will often see that people use the number 10 and no number 1 is found.
Example
page = PAGE
page.20 = TEXT
page.20.value = World
page.10 = TEXT
page.10.value = Hello
This renders to HelloWorld.
bodyTag¶
bodyTagAdd¶
Property
bodyTagAdd
Data type
Description
This content is added inside of the opening <body> tag right
before the > character. This is mostly useful for adding
attributes to the <body> tag.
Example
# This will lead to <body class="example">
page.bodyTagAdd = class="example"
bodyTagCObject¶
Property
bodyTagCObject
Data type
cObject
Description
This is the default body tag. It is overridden by bodyTag, if that is set.
Note: Additionally to the body tag properties noted here, there also is the property disableBodyTag, which, if set, disables body tag generation independently from what might be set here.
config¶
Property
config
Data type
Description
Configuration for the page. Any entries made here override the same entries in the top-level object CONFIG & config.
CSS_inlineStyle¶
Changed in version 12.0: The TypoScript setting page.CSS_inlineStyle which was used to
inject a inline CSS string into the TYPO3 Frontend will be removed with
TYPO3 v12.
Use page.cssInline instead, which has been around since TYPO3 v4.
Property
CSS_inlineStyle
Data type
Description
This value is just passed on as CSS.
Note: To make TYPO3 actually output these styles as inline CSS
(in-document CSS encapsulated in <style> tags),
config.inlineStyle2TempFile
must be set to 0.
cssInline.[array]¶
Property
cssInline.[array]
Data type
Description
Allows to add inline CSS to the page <head> section.
The cssInline property contains any number of numeric keys, each representing one cObject.
Internally handled as PHP integer, maximum number is therefore restricted to PHP_INT_MAX.
Example
cssInline {
10 = TEXT
10.value = h1 {margin:15px;}
20 = TEXT
20.value = h1 span {color: blue;}
}
headerData.[array]¶
Property
headerData.[array]
Data type
Description
Inserts custom content in the head section of the website.
While you can also use this to include stylesheet references or JavaScript,
you should better use page.includeCSS
and page.includeJS for such files.
Features like file concatenation and file compression will not work on files,
which are included using headerData.
For meta tags, use the dedicated configuration page.meta.
By default, gets inserted after all the style definitions.
The headerData property contains any number of numeric keys, each representing one cObject.
Internally handled as PHP integer, maximum number is therefore restricted to PHP_INT_MAX.
Example
page.headerData {
3 = TEXT
3.value = <script src="...."></script>
50 = TEXT
50.value = <!-- Hello from the comment! -->
}
headTag¶
includeCSS.[array]¶
Property
includeCSS.[array]
Data type
Description
Inserts a stylesheet (just like the stylesheet property), but allows
setting up more than a single stylesheet, because you can enter files
in an array.
The file definition must be a valid resource data type,
otherwise nothing is inserted.
Each file has optional properties:
allWrap: Wraps the complete tag, useful for conditional comments.
allWrap.splitChar: Defines an alternative splitting character (default is "|" - the vertical line).
alternate: If set (boolean) then the rel-attribute will be "alternate stylesheet".
disableCompression: If config.compressCss is enabled, this
disables the compression of this file.
excludeFromConcatenation: If config.concatenateCss is
enabled, this prevents the file from being concatenated.
external: If set, there is no file existence check. Useful for inclusion of external files.
forceOnTop: Boolean flag. If set, this file will be added on top of all other files.
if: Allows to define conditions, which must evaluate to TRUE for the file to be included. If they do not evaluate to TRUE, the file will not be included. Extensive usage might cause huge numbers of temporary files to be created. See ->if for details.
Deprecated since version 11.5: The option to use the @import syntax for including external CSS
files through TypoScript has been deprecated. It is recommended to use
the <link> tag or instead create an inline CSS entry with TypoScript
to load a file with the @import syntax.
import: If set (boolean) then the @import way of including a
stylesheet is used instead of <link>
inline: If set, the content of the CSS file is inlined using
<style> tags. Note that external files are not inlined.
media: Setting the media attribute of the <style> tag.
title: Setting the title of the <style> tag.
Example
includeCSS {
styles = EXT:site_package/Resources/Public/Css/styles.css
print = EXT:site_package/Resources/Public/Css/print.css
print.title = High contrast
print.media = print
ie6 = EXT:site_package/Resources/Public/Css/ie6.css
ie6.allWrap = <!--[if lte IE 7]>|<![endif]-->
example = https://example.org/some_external_styles.css
example.external = 1
}
includeCSSLibs.[array]¶
Property
includeCSSLibs.[array]
Data type
Description
Adds CSS library files to head of page.
The file definition must be a valid resource data type,
otherwise nothing is inserted. This means that remote files cannot be referenced
(i.e. using https://...), except by using the .external property.
Each file has optional properties:
allWrap: Wraps the complete tag, useful for conditional comments.
allWrap.splitChar: Defines an alternative splitting character (default is "|" - the vertical line).
alternate: If set (boolean) then the rel-attribute will be "alternate stylesheet".
disableCompression: If config.compressCss is
enabled, this disables the compression of this file.
excludeFromConcatenation: If config.concatenateCss
is enabled, this prevents the file from being concatenated.
external: If set, there is no file existence check. Useful for inclusion of external files.
forceOnTop: Boolean flag. If set, this file will be added on top of all other files.
if: Allows to define conditions, which must evaluate to TRUE for the file to be included. If they do not evaluate to TRUE, the file will not be included. Extensive usage might cause huge numbers of temporary files to be created. See ->if for details.
Deprecated since version 11.5: The option to use the @import syntax for including external CSS
files through TypoScript has been deprecated. It is recommended to use
the <link> tag or instead create an inline CSS entry with TypoScript
to load a file with the @import syntax.
import: If set (boolean) then the @import way of including a
stylesheet is used instead of <link>
media: Setting the media attribute of the <style> tag.
title: Setting the title of the <style> tag.
Example
includeCSSLibs.bootstrap = https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css
includeCSSLibs.bootstrap.external = 1
includeJS.[array]¶
Property
includeJS.[array]
Data type
Description
Inserts one or more (Java)Scripts in <script> tags.
With moveJsFromHeaderToFooter set to TRUE all files
will be moved to the footer.
The file definition must be a valid resource data type,
otherwise nothing is inserted. This means that remote files cannot be referenced
(i.e. using https://...), except by using the .external property.
Each file has optional properties:
allWrap: Wraps the complete tag, useful for conditional comments.
allWrap.splitChar: Defines an alternative splitting character (default is "|" - the vertical line).
async: Allows the file to be loaded asynchronously.
crossorigin: Allows to set the crossorigin attribute in script tags.
Is automatically set to anonymous for external JavaScript files if an
.integrity is set.
defer Allows to set the HTML5 attribute defer.
disableCompression: If config.compressJs is enabled,
this disables the compression of this file.
excludeFromConcatenation: If config.concatenateJs is enabled,
this prevents the file from being concatenated.
external: If set, there is no file existence check. Useful for inclusion of external files.
forceOnTop: Boolean flag. If set, this file will be added on top of all other files.
if: Allows to define conditions, which must evaluate to TRUE for the file to be included. If they do not evaluate to TRUE, the file will not be included. Extensive usage might cause huge numbers of temporary files to be created. See ->if for details.
type: Setting the MIME type of the script. Default: The attribute is
omitted for frontend rendering when config.doctype is not set or
set to html5. Otherwise text/javascript is used as type.
integrity: Adds the integrity attribute to the script element to let browsers ensure subresource integrity. Useful in hosting scenarios with resources externalized to CDN's. See SRI for more details. Integrity hashes may be generated using https://srihash.org/.
Example
includeJS {
helloworld = EXT:site_package/Resources/Public/JavaScript/helloworld.js
helloworld.type = application/x-javascript
# Include the file only if myConstant is set in the TS constants field.
conditional = EXT:site_package/Resources/Public/JavaScript/conditional.js
conditional.if.isTrue = {$myConstant}
jquery = https://code.jquery.com/jquery-3.4.1.min.js
jquery.external = 1
jquery.integrity = sha384-vk5WoKIaW/vJyUAd9n/wmopsmNhiy+L2Z+SBxGYnUkunIxVxAv/UtMOhba/xskxh
}
includeJSLibs.[array]¶
Property
includeJSLibs.[array]
Data type
Description
Adds JS library files to head of page.
Same as includeJSFooterlibs, except that this block gets
included inside <head>.
tag).
The optional properties from includeJS can be applied.
inlineLanguageLabelFiles¶
Property
inlineLanguageLabelFiles
Data type
(array of strings)
Description
Adds language labels to the page. All labels will be then be available in
the JavaScript object TYPO3.lang.
Available sub-properties:
selectionPrefix: Only label keys that start with this prefix will be included. Default: ''.
stripFromSelectionName: A string that will be removed from any included label key. Default: ''.
errorMode: Error mode if the file could not be found: 0 - syslog entry, 1 - do nothing, 2 - throw an exception. Default: 0
Example
inlineLanguageLabelFiles {
someLabels = EXT:myExt/Resources/Private/Language/locallang.xlf
someLabels.selectionPrefix = idPrefix
someLabels.stripFromSelectionName = strip_me
someLabels.errorMode = 2
}
inlineSettings¶
Property
inlineSettings
Data type
(array of strings)
Description
Adds settings to the page as inline javascript, which is accessible within the variable TYPO3.settings.
Example
page.inlineSettings {
setting1 = Hello
setting2 = GoOnTop
}
Will produce following source
TYPO3.settings = {"TS":{"setting1":"Hello","setting2":"GoOnTop"}};
jsInline.[array]¶
Property
jsInline
Data type
Description
Use array of cObjects for creating inline JavaScript.
Note:
With config.removeDefaultJS = external, the inline JavaScript is moved
to an external file.
The jsInline property contains any number of numeric keys, each representing one cObject.
Internally handled as PHP integer, maximum number is therefore restricted to PHP_INT_MAX.
Example
page.jsInline {
10 = TEXT
10.stdWrap.dataWrap = var pageId = {TSFE:id};
}
meta¶
Property
meta
Data type
array of key names (string / stdWrap)
Description
Use the scheme meta.key = value to define any HTML meta tag.
value is the content of the meta tag. If the value is empty (after
trimming), the meta tag is not generated.
The key can be the name of any meta tag, for example description or
keywords. If the key is refresh (case insensitive), then the
http-equiv attribute is used in the meta tag instead of the name
attribute.
For each key the following sub-properties are available:
httpEquivalent
If set to 1, the http-equiv attribute is used in the meta
tag instead of the name attribute. Default: 0.
replace If set to 1, the tag will replace the one set earlier by a plugin. If set to 0 (default), the meta tag generated by the plugin will be used. If there is none yet, the one from TypoScript is set.
Examples:
Simple definition:
meta.description = This is the description of the content in this document.
meta.keywords = These are the keywords.
Fetch data from the keywords field of the current or any parent page:
meta.keywords.data = levelfield:-1, keywords, slide
Make a meta.refresh entry:
meta.refresh = [seconds]; [URL, leave blank for same page]
Usage of httpEquivalent:
meta.X-UA-Compatible = IE=edge
meta.X-UA-Compatible.httpEquivalent = 1
Result:
<meta http-equiv="X-UA-Compatible" content="IE=edge">.
Meta tags with a different attribute name are supported like the Open Graph meta tags:
page {
meta {
X-UA-Compatible = IE=edge
X-UA-Compatible.attribute = http-equiv
keywords = TYPO3
og:site_name = TYPO3
og:site_name.attribute = property
description = Inspiring people to share Normal
dc\.description = Inspiring people to share [DC tags]
og:description = Inspiring people to share [OpenGraph]
og:description.attribute = property
og:locale = en_GB
og:locale.attribute = property
og:locale:alternate {
attribute = property
value {
1 = fr_FR
2 = de_DE
}
}
refresh = 5; url=https://example.org/
refresh.attribute = http-equiv
}
}
They can be used like property used for OG tags in the example.
You may also supply multiple values for one name, which results in multiple meta tags with the same name to be rendered.
Result for og:description:
<meta property="og:description"
content="Inspiring people to share [OpenGraph]" />
See https://ogp.me/ for more information about the Open Graph protocol and its properties.
shortcutIcon¶
Property
shortcutIcon
Data type
Description
Favicon of the page. Create a reference to an icon here!
Browsers that support favicons display them in the address bar of the browser, next to the name of the site in lists of bookmarks and next to the title of the page in the tab.
Example: .. code-block:: typoscript
- caption
EXT:site_package/Configuration/TypoScript/setup.typoscript
page.shortcutIcon = EXT:site_package/Resources/Public/Images/favicon.ico
Note: The reference to this file will only be included in the output of your website, if the file actually exists! Should the file be missing, the tag will not be rendered.
stdWrap¶
Property
stdWrap
Data type
Description
Wraps the content of the cObject array with stdWrap options.
typeNum¶
Property
typeNum
Data type
Default
0
Description
This determines the typeId of the page. The &type= parameter in the URL
determines, which page object will be rendered. The value defaults to 0 for
the first found PAGE object, but it must be set and be unique as
soon as you use more than one such object (watch this if you use frames
on your page)!