TYPO3 Sitepackage – Website-Template integrieren

Ein Sitepackage ist die moderne Art, eigene Templates und Konfigurationen in TYPO3 zu verwalten. Es handelt sich um eine Custom Extension, die alle website-spezifischen Dateien zentral organisiert.

1. Sitepackage Extension erstellen

Verzeichnisstruktur anlegen

1. Hauptordner erstellen
   Auf der Hauptebene des TYPO3-Projekts einen packages-Ordner erstellen, falls noch nicht vorhanden.
2. Sitepackage-Ordner anlegen Im packages-Verzeichnis einen Ordner für das Sitepackage erstellen (z.B. klht3sitepackage)

packages/
└── [projektname]sitepackage/

2. Composer-Konfiguration

composer.json im Sitepackage-Ordner erstellen:

{
    "name": "khesbac/klht3sitepackage",
    "description": "Sitepackage for TYPO3 13",
    "type": "typo3-cms-extension",
    "license": "GPL-2.0-or-later",
    "authors": [{
        "name": "Klaus Hesbacher",
        "email": "klaus.hebaq@web.de"
    }],
    "require": {
        "typo3/cms-core": "^13.4"
    },
    "extra": {
        "typo3/cms": {
            "extension-key": "klht3sitepackage"
        }
    }
}

3. Ordnerstruktur vervollständigen

Erforderliche Verzeichnisse erstellen:

[projektname]sitepackage/
├── composer.json
├── Configuration/
├── Resources/
│   ├── Private/
│   └── Public/

4. Sitepackage Installation

Lokales Repository konfigurieren

ddev composer config repositories.local path ./packages/*

5. Sitepackage installieren

ddev composer req khesbac/klht3sitepackage:@dev

Installation überprüfen

• Extensions im TYPO3 Backend kontrollieren
• Das Sitepackage sollte dort als installierte Extension erscheinen

6. Site Set konfigurieren

Site Sets sind das moderne Konfigurationssystem in TYPO3 13, das Typoscript und weitere Einstellungen modular verwaltet.

Set-Struktur erstellen

Verzeichnisse anlegen:

Configuration/
└── Sets/
    └── klht3sitepackage/
        └── config.yaml

7. Grundkonfiguration

config.yaml erstellen:

name: khesbac/klht3package
label: Sitepackage for TYPO3 13

8. Site Set aktivieren

1. Cache leeren (wichtig!)
2. Sites → Site Configuration öffnen
3. „Sets for this Site“ → Sitepackage auswählen und speichern
4. TYPO3 erstellt automatisch eine Dependency in sites/myproject/config.yaml

9. Erweiterte Dependencies

Standard-Dependencies hinzufügen

Für eine vollständige TYPO3-Website sollten typische Core-Extensions eingebunden werden:

name: khesbac/klht3package
label: Sitepackage for TYPO3 13

dependencies:
  - typo3/fluid-styled-content      # Standard Content-Rendering
  - typo3/fluid-styled-content-css  # CSS für Content-Elemente
  - typo3/felogin                   # Frontend-Login
  - typo3/seo-sitemap              # XML-Sitemap
  - typo3/indexed-search           # Suchfunktionalität
  - typo3/form                     # Formular-Framework

10. Dependency-Funktionsweise

• Backend-Sichtbarkeit: Dependencies sind nicht direkt im Backend sichtbar
• Typoscript-Integration: Werden automatisch ins Typoscript geladen
• Dokumentation: Offizielle TYPO3 Site Sets Dokumentation

Nächste Schritte

Nach der Grundkonfiguration können Sie:

1. Templates hinzufügen (Resources/Private/Templates/)
2. Partials und Layouts erstellen (Resources/Private/Partials/, Resources/Private/Layouts/)
3. Typoscript-Konfiguration erweitern (Configuration/TypoScript/)
4. Page TSconfig definieren (Configuration/page.tsconfig)
5. Statische Assets bereitstellen (Resources/Public/)