Load the HTML template in the TypoScript template¶
As you could see above, our template does not currently produce an interesting output. What we really want is to:
- use our complete HTML template file
- display actual content from TYPO3 CMS within that template.
To proceed with this, we first change the content of the PAGE
object to use a TEMPLATE object:
# Default PAGE object:
page = PAGE
# Define the template
page.10 = TEMPLATE
Tip
When you are working with t3editor to edit the Setup field of your TypoScript template, you can press Ctrl+S to save what currently is in the Setup field. This can make your work noticeably faster.
The TEMPLATE cObject has a property called template
, in which we can define a cObject
which will be loaded with the template code. This is exactly what we want to do!
Since our template is a file, an HTML file, we choose the cObject
FILE and add:
# Our template is a file
page.10.template = FILE
Do you know what the next step is? Did you look up the content object FILE in TSref?
If not, do so now! You will see that for this object there is a property called file
.
The FILE
object returns the content of the file, which is set in this property.
But how exactly do you have to link your file now? This is also answered in the TSref.
The data type of the file
property is resource.
The TSref indicates that you can point to a file in your TYPO3 CMS installation using a relative path.
So we add to our template:
# Our template file is fileadmin/doc_tut_templating/index.html
page.10.template.file = fileadmin/doc_tut_templating/index.html
This loads our template file. If you now view your website (the frontend), you will notice that our template file is used, but that the CSS styles is missing.
Something is missing…
Going through the TSref for the PAGE
we can find several ways to include
a reference to CSS file. The favored one is the property called includeCSS
,
which is an array making it possible to include several files.
While we are at it, let’s also add a shortcutIcon
:
# Insert shortcut icon in the head of the website
page.shortcutIcon = fileadmin/doc_tut_templating/favicon.ico
# Insert stylesheet in the head of the website
page.includeCSS.base = fileadmin/doc_tut_templating/style.css
Now our frontend output already has the styles included.
However, if you view the sourcecode of the output, you will notice that TYPO3 CMS created its own HTML structure,
inside of which is our own HTML template, complete <html>
, <head>
and body
tags and all the content.
This is obviously not what we want and also not syntactically correct.
We will fix this in the next steps.