TYPO3 site package tutorial
A site package is a custom TYPO3 extension that contains files regarding the theme and functionality of a site.
This tutorial describes step by step how to come from your first TYPO3 installation to the first basic site.
You can download the example site package used in this tutorial from GitHub: https://github.com/TYPO3-Documentation/site_package
Note
The example site package is structured for educational purposes and is not intended for use in production environments.
Introduction
Here we define the benefits of the site package: like the concepts of encapsulation, the concepts of dependency management, the clean separation from the userspace (fileadmin/FAL), some important security benefits, deployment and distributability advantages.
Prerequisites
In this section we mention the prerequisites that you need before you start with this tutorial.
Create initial pages
Here we use t3docs/site-package-data to create a basic site configuration and some pages in the TYPO3 backend with some example content records.
Minimal site package
Create a minimal site package that outputs "Hello World".
Extension Installation
In this section we go through the process of installing the site package extension with composer.
Assets
Assets usually include CSS files, JavaScript and images / icons used for design purposes.
Fluid Template
We introduce the templating engine Fluid, that is used to render the html pieces in a logically manner. Then we describe the directory structure that is needed in a site package extension. We also explain the first steps to include the previously static files and html pieces using Fluid.
Content mapping
Here we explain the purpose of backend layouts. Additionally we introduce the DatabaseQueryProcessor which is used to render content from a special "colPos" previously defined in the backend layout. We use Fluid to output content from a specific colPos. By this we get to know the cObject ViewHelper.
TypoScript setup
Theoretically you could put all TypoScript into one big file and it would work fine. But you have better overview if you split it up in multiple files ordered by purpose. We import all TypoScript files from a folder using wildcards after this step.
Main menu
We introduce the main menu, explain how we build up a menu processor with TypoScript and how we can output the menu with Fluid. We introduce the so called "Debug ViewHelper".
Site sets
In this section we configure the site package using the new
concept of site sets. The settings are now stored in a yaml file
called settings.
.
Extension Configuration
We explain the needed composer configurations and we connect it with the site sets configurations that we made in the previous chapter.
Summary
In this chapter we sum up the steps that we did after we have gone through this tutorial.