TypoScript setup and configuration

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:

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: