Originally, many TYPO3 templates were built using just TYPO3's own configuration language, TypoScript. TypoScript is not a traditional programming language; it is actually a declarative language to configure templates and extensions in TYPO3. For example, the following TypoScript code will output HELLO WORLD! through a TYPO3 page. I've added TypoScript comments marked with ## to explain what is happening:
## Create a default page object page = PAGE page.typeNum = 0 ## Create a text object inside the page page.10 = TEXT ## Assign some text to the text object page.10.value = HELLO WORLD!
You could add HTML to change the layout of the page, but it wasn't very intuitive. The biggest problem, though, was there was no easy way to integrate a whole HTML template. Designers created HTML files, and then a developer had to translate it all into TypoScript for the final templates.
Next, we started integrating external HTML files directly into the template process. Of course, the first step in creating templates was to build an HTML file to define the basic structure of our pages, and a designer could do this. For example, if we designed a basic template to show a headline and some content, we start with an HTML file like this:
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> </head> <body> <h1> Header </h1> <div> Content of our new page. </div> </body> </html>
Next, we needed to add markers into the HTML to define sections of dynamic content in our HTML. The markers were created as HTML comments within the static HTML document, and we wrapped the sections we wanted to replace with these identifying markers. The designers or the TYPO3 developers do this step. In the following example , we identified the document body, main heading, and a content area:
<!DOCTYPE HTML> <html> <head> <title>Page Title</title> </head> <body> <!-- ###DOCUMENT_BODY### --> <h1> <!-- ###HEADING### --> Header <!-- ###HEADING### --> </h1> <div> <!-- ###CONTENT### --> Content of our new page. <!-- ###CONTENT### --> </div> <!-- ###DOCUMENT_BODY### --> </body> </html>
Now that the HTML file is ready, we saved it on the fileadmin/ folder. For this example, we saved the HTML file in a subdirectory, templates/, as basic_template.html. That means the path to our file would be fileadmin/templates/basic_template.html.
The next step was creating a template in TypoScript to map content into our HTML template. We will look more at TypoScript templates when we start building our own example template later in this chapter, so we aren't going to step through the whole process right now. As an example, though, the following TypoScript code would be used to call the HTML file. You can find the sections that we wrapped with markers, and replace the static HTML content.
First, we created a template object and assigned our HTML file to it:
temp.mainTemplate = TEMPLATE
temp.mainTemplate {
template = FILE
template.file = fileadmin/templates/basic_template.html
}
Next, we created a page object and assigned the main template to it:
page = PAGE page.typeNum = 0 page.10 < temp.mainTemplate
After we associated our page with our template, we start working on the HTML between the DOCUMENT_BODY markers in our HTML file:
page.10.workOnSubpart = DOCUMENT_BODY
Now that we were working inside the DOCUMENT_BODY markers, we created text objects to go between the HEADING and CONTENT markers and assign values to them:
page.10.marks.HEADING = TEXT page.10.marks.HEADING.value = This is a heading page.10.marks.CONTENT = TEXT page.10.marks.CONTENT.value = This is our content
Of course, this isn't actually very dynamic as the content is being coded into the TypoScript template. The next step in the process was to map dynamic content elements in TYPO3 to the HTML through the TypoScript template. This process was more complicated and cannot be covered here, but you can learn more about it in the online tutorial, Modern Template Building (http://typo3.org/documentation/document-library/tutorials/doc_tut_templselect/current/).