TypoScript templates
More Information: https://docs.typo3.org/typo3cms/TyposcriptReference/Introduction/Index.html
A TypoScript template is a record that contains the configuration information used to display content in a website.; the frontend. It is written in Typescript language. You will find templates in the “WEB” section of TYPO3 backend.
Go to the WEB > Template module. [Login as a user with administrator role required]
In the page tree, click on the “My Practice Root” Page. You will see this screen.
As you can see, there is no TypoScript record our root Page. Therefore our next goal is to create one so that TYPO3 CMS knows how it should display our root page- and also all its subpages. That means that the configuration, which we insert in the template record of our root page, will automatically be used for all subpages as well.
Create a new Template record by clicking on ” Create a template for a new site” as shown below.
we have now created new template whose name is “NEW SITE” and is ready for the update. Change the current view from “constant editor” to “info/Modify”.
This is the place where you can edit several important parts of the template record, in particular, its title, the constants, and the setup. If you want to edit the whole record, you can click on “Edit the whole template record”.
If you do not see the entry called “CSS Styled Content (css_styled_content)” in the right-hand list, it is most probably because the TYPO3 CMS system extension “css_styled_content” is not installed. You need to go to ADMIN TOOLS > Extensions and install extension “css_styled_content”. You can then come back and include the static template that it provides.
Now choose “Save and close” action and you will now land back on the Info/Modify screen.
“Constants” section is used to define TypoScript constants. These constants can then be used in the setup field of the template.
NOTE: need more information about TYPO3 constants here. Write new Blog for this.
The next field “Setup” is the one, in which we will write our TYPO3 script. This field contains already some lines as shown below.
Note that: t3editor ( ADMIN TOOLS > Extensions) is required to see highlighted text. If you are still missing color after successful activation of t3editor, make sure that at the option “Deactivate t3editor” at the bottom of the screen is not checked.
Now, let's start with the default contents inside setup.
# Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD!
so what we have by default in our new template:
- Lines starting with # are comments. They are not rendered in any way.
- Next object is a page and set to the value PAGE. This value rerefers to a page object, which is used to define the rendering of a website page.
- The Typescript Reference ( TSref ) lists the many properties of the PAGE object. Among others, it accepts a list of content objects (cObject) as a numbered array.
- For now, we will use simple TEXT object. For more information regarding Typoscript Reference (TSref) you can visit here. The TEXT object itself has several properties, including one called value which is used to set the text itself. Here it is set to “HELLO WORLD!”.
These lines will create a very simple output. It can be used to check the minimal configuration of TYPO2 setup.
This is not so nice output. It is like print Hello world! in any programming language.
To proceed with this, we first change the content of the PAGE object to use a
# Default PAGE object: page = PAGE # Define the template # TEMPLATE is a cObject page.10 = TEMPLATE
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
The object FILE returns the content of the file specified in the property “file”.
It is defined as PHP function fileResource() in typo3/sysext/frontend/Classes/ContentObject/ContentObjectRenderer.php
NOTE: DO NOT mix up cObject FILE with FILES.
Example: in this example, a page is defined, but the content between the body tags comes directly from the file “gs.html”.
page = PAGE page.typeNum = 0 page.10 = FILE page.10.file = fileadmin/gs/gs.html
Back to the main topic now. As we saw already, the data type of the file property is a resource. The TSref indicated 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 frontend, you will see that template is being used without CSS.
Next work will be to include a CSS file. We have 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.
In addition to this, we can also add shortcuts icon at the same time.
# 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 style included.
However, if you view the source code 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 bodytags and all the content. This is obviously not what we want and also not syntactically correct.
Let's fix this problem now.
Work with the subpart DOCUMENT
Currently, TYPO3 is just replacing our whole HTML template file between body tags. This is not valid. To be precise, we need only that part of our template code inside <body> tags of TYPO3, which really belongs between body tags.
A subpart is defined by two markers in the template. The markers must be wrapped by “###” on both sides. It is included in HTML comment section.
The resulting HTML output is a syntactically correct HTML page now. The “outer part” of the output like <html>,<head> and <body> tag itself are created by TYPO3 CMS and contents of the body are taken from our HTML template( index.html).
This text is static text and now we will move one step forward and insert dynamic contents into the HTML template at those places.
Continue reading Configure marks/subparts
Source: TYPO3.ORG
