TypoScript is the scripting language that is used to tell TYPO3 how to create the web pages and is composed of two types of information as we mentioned before: constants and setup code.
Usually, the constants field is filled with extension configuration or values for repeatable use and setup—with the main setup to parse the HTML template.
To start editing TypoScript you need to create a page that will store the template TypoScript configuration. Usually, it is the parent page in the site tree. So let's create one:
Click on the + icon and choose the position of the newly created page:
- Untick the field Hide page and tick Hide in menu so that the page will not be displayed in the main menu, and designate a name by entering a Page title.
- Save and close the document. If needed, reload the page tree by clicking on the reload icon below the site tree to see the created page.
- Click on the Template button in the backend left menu, click on our new page Home, and hit the Create template for a new site button.
Now, when you have completed these steps you will have access to an already created template with the HELLO WORLD! example:
# Default PAGE object: page = PAGE page.10 = TEXT page.10.value = HELLO WORLD!
Now you can oversee the chosen page in the TYPO3 backend. For page view, choose your created template and click on the icon (or right-click on page item). The context menu will be open and you will be able to choose the section Show, as seen in the following screenshot:
And if the added information was correct, the parsed template on the frontend will look like the following:
For a better understanding of what you are dealing with, you can edit the text like this so that you will have the text and image object:
# Default PAGE object: page = PAGE # Edit the text page.10 = TEXT page.10.value = This is TypoScript written by me! # And add an image from our template folder: page.20 = IMAGE page.20.file = fileadmin/templates/berriesshop/logo.jpg
These are content objects: cObjects. You can use cObjects in your template such as the following:
TEXT—to insert plain text or to output text from marked fields:10 = TEXT 10.value = I wrote this text 10.lang.de = Ich schrieb diesen Text
IMAGE—to insert images:15 = IMAGE 15.file = fileadmin/img/logo.gif 15.stdWrap.typolink.parameter = 1 ## Wrap typolink and pointed to page with uid 1 15.alttext = Your slogan title
FILE—to insert a file; for example, to insert the HTML file for our webshop template:page.10 = FILE page.10.file = fileadmin/templates/berriesshop/index.html
HMENU—to insert a hierarchical menuTMENU—to insert a text menu- And others that you can find in the TSRef section of the TYPO3 documentation: http://typo3.org/documentation/document-library/references/doc_core_tsref/current