TypoScript configuration¶

Hello World: The PAGE object¶

In order to create any output at all we first need to define a PAGE. The example below would output an empty page:

page = PAGE
page {
  typeNum = 0
  // 10 = TEXT
  //10.value = Hello World!
}

If you remove the comments // before line 4 and 5 there would be an output of "Hello World!".

You can read more about the top-level PAGE object in the TypoScript reference.

The parameter typeNum is mandatory. Setting it to 0 enables the page to be called. If you would set it to any value above there the page would need to be called with an additional parameter like &type=12345 to the url.

Part 1: PAGEVIEW template section¶

First, create a file called Part1PageviewSection.typoscript in the folder Configuration/TypoScript/Setup/ with the following content:

// Part 1: PAGEVIEW section
page.10 = PAGEVIEW
page.10 {
  paths {
    0 = EXT:site_package/Resources/Private/Templates/
    10 = {$page.template.path}
  }
}

Line 1 is a comment. All lines starting with // or # will be ignored by the parser. In TypoScript it is however not possible to have a comment after code in a line as you might be used from PHP of Java.

Line 2 configures that the template rendering engine Fluid should be used to generate the page output. As mentioned in the changelog Feature: #103504 - New ContentObject PAGEVIEW the new ContentObject PAGEVIEW replaces the old ContentObject FLUIDTEMPLATE. We recommend to use the new ContentObject PAGEVIEW, because it needs less configurations and therefore reduces the susceptibility to errors. For example you do not have to define a TypoScript variable pageUid, instead use {page.uid} directly in your HTML file to use the current page id for any use cases. More examples you can find in the changelog mentioned before.

Before with the FLUIDTEMPLATE, one had to define which page layout and backend layout should be rendered in the frontend. Now this is done automatically. All files located in the given paths page.10.paths will be used as default templates. In our case this is Default and TwoColumns. Check our repository https://github.com/TYPO3-Documentation/TYPO3CMS-Tutorial-SitePackage-Code/tree/main to review this statement by your own. The paths for the templates are provided in line 5 ff and define the paths where the templates can be find. In line 6 we added the TypoScript constant defining the same path. It serves as an example on how one would add a TypoScript constant from file constants.typoscript to the page.10.paths paths. Remember the highest number will used in first place. When the parser does not find a fitting template it jumps to the next lower number.

Template files can be placed in the EXT:my_site_package/Resources/Private/Templates/Pages/ and EXT:my_site_package/Resources/Private/Templates/. The directory and file structure can be checked here. If you write a typo into your Default.html filename, for example default.html you get the following error in the frontend:

503
# Oops, an error occurred!
Could not find template source for "pages/default". Configured templateRootPaths: /var/www/html/vendor/my-vendor/my-site-package/Resources/Private/Templates/
More information regarding this error might be available online](https://typo3.org/go/exception/CMS/1711797936).
Request: 1d0a22b6a400e

The reason for this error is that the system expects a file named Default.html (with captial D) within EXT:my_site_package/Resources/Private/Templates/Pages/ or EXT:my_site_package/Resources/Private/Templates/.

Part 2 and 3: CSS and JavaScript file inclusion¶

We have combined part 2 and 3, because the inclusion of CSS and JavaScript files in TypoScript is pretty straight forward. Create a file called Part2CssFileInclusion.typoscript in the folder Configuration/TypoScript/Setup/ with the following content:

page {
  // Part 2: CSS file inclusion
  includeCSS {
    bootstrap = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css
    bootstrap.external = 1
    website = EXT:site_package/Resources/Public/Css/website.css
  }

  // Part 3: JavaScript file inclusion
  includeJSFooter {
    jquery = https://code.jquery.com/jquery-3.2.1.slim.min.js
    jquery.external = 1
    popper = https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js
    popper.external = 1
    bootstrap = https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js
    bootstrap.external = 1
    website = EXT:site_package/Resources/Public/JavaScript/website.js
  }
}

Section includeCSS { ... } instructs TYPO3 to include the CSS from the Bootstrap library from an external source. It also includes file website.css from the site package extension. We have copied this file into the appropriate folder before.

Section includeJSFooter { ... } includes four JavaScript files in total. The first three are externally hosted files (jQuery, Popper and Bootstrap). Therefore, .external = 1 forces TYPO3, not to check for their local existence. The fourth JavaScript file is the file we added before to the site package extension itself.

You can also include CSS or JavaScript per-component in your Fluid template or by PHP. See Assets (CSS, JavaScript, Media).

Part 4: Global site configuration¶

It is possible to configure multiple options globally in the section Typoscript object config. None of them is necessary to make the example here run. So we just included two configuration values as an example. Read more about them here: TypoScript Reference.

// Part 4: global site configuration
config {
  # Adjust the title tag to be displayed as “website - page title”
  pageTitleSeparator = -
  pageTitleSeparator.noTrimWrap = | | |

  # Display the Admin Panel at the bottom of pages to logged in backend users
  admPanel = 1
}

This is all required for the "TypoScript Configuration" part at this point. The next step deals with the extension configuration and adds a couple of PHP files, so let's move on.