Wie man baut TYPO3 Site Packages mit PAGEVIEW und Site Sets in v13 erstellt?

Die moderne TYPO3-Entwicklung kombiniert die optimierte Darstellung von PAGEVIEW mit der Konfigurationskraft von Site Sets. Erstellen Sie wartbare Site-Pakete, die mühelos über mehrere Websites skalieren.

TYPO3 v13 hat unsere Denkweise über Site-Pakete verändert. PAGEVIEW hat die Seitendarstellung vereinfacht, während Site Sets das Konfigurationsmanagement revolutioniert hat. Aber wie kombiniert man sie effektiv?

Lassen Sie uns ein echtes Site-Paket erstellen, das beide Funktionen richtig nutzt.

Was geändert in TYPO3 v13?

Vor v13 bedeuteten Site-Pakete komplexe TypoScript-Konfigurationen und verstreute Vorlagendateien. Die Site-Konfiguration befand sich in YAML-Dateien, die schwer zwischen Projekten zu teilen waren.

PAGEVIEW entfernt die meiste TypoScript-Komplexität. Site Sets machen Konfigurationen portabel und wiederverwendbar. Zusammen schaffen sie saubereren, besser wartbaren Code.

Einrichten der Struktur Ihres Site-Pakets

Erstellen Sie zuerst die Struktur Ihrer Erweiterung:

my_site_package/
├── Konfiguration/
│   ├── Sets/
│   │   └── MeinThema/
│   │       ├── config.yaml
│   │       ├── page.tsconfig
│   │       └── setup.typoscript
│   ├── TCA/
│   └── TypoScript/
├── Ressourcen/
│   ├── Privat/
│   │   ├── Vorlagen/
│   │   │   └── Seite/
│   │   ├── Partials/
│   │   └── Layouts/
│   └── Öffentlich/
│       ├── Css/
│       ├── JavaScript/
│       └── Bilder/
└── ext_emconf.php

my_site_package/
├── Konfiguration/
│   ├── Sets/
│   │   └── MeinThema/
│   │       ├── config.yaml
│   │       ├── page.tsconfig
│   │       └── setup.typoscript
│   ├── TCA/
│   └── TypoScript/
├── Ressourcen/
│   ├── Privat/
│   │   ├── Vorlagen/
│   │   │   └── Seite/
│   │   ├── Partials/
│   │   └── Layouts/
│   └── Öffentlich/
│       ├── Css/
│       ├── JavaScript/
│       └── Bilder/
└── ext_emconf.php

Erstellen Ihres ersten Site-Sets

Site-Sets ersetzen den alten statischen Vorlagenansatz. Erstellen Sie Configuration/Sets/MyTheme/config.yaml:

name: mein-theme  
label: Mein Unternehmens-Theme  
dependencies:  
  - typo3/fluid-styled-content  
  - typo3/seo  
settings:  
  website:  
    logo: EXT:my_site_package/Resources/Public/Images/logo.svg  
    colors:  
      primary: '#0066cc'  
      secondary: '#f8f9fa'

name: mein-theme  
label: Mein Unternehmens-Theme  
dependencies:  
  - typo3/fluid-styled-content  
  - typo3/seo  
settings:  
  website:  
    logo: EXT:my_site_package/Resources/Public/Images/logo.svg  
    colors:  
      primary: '#0066cc'  
      secondary: '#f8f9fa'

Die Abhängigkeiten laden automatisch die erforderliche Funktionalität. Kein Suchen mehr durch statische Vorlagen.

PAGEVIEW-Vorlageneinrichtung

PAGEVIEW verwendet einen einfachen Vorlagenansatz. Erstellen Sie Ihre Seitenvorlage unter Resources/Private/Templates/Page/Default.html:

<html lang="{site.language.twoLetterIsoCode}" data-namespace-typo3-fluid="true">
<f:layout name="Standard" />

<f:section name="Haupt">
    <div class="container">
        <header class="site-header">
            <f:image src="{settings.website.logo}" alt="{site.websiteTitle}" class="logo" />
            <f:cObject typoscriptObjectPath="lib.navigation" />
        </header>
        
        <main class="content">
            <h1>{page.title}</h1>
            <f:cObject typoscriptObjectPath="lib.content.main" />
        </main>
    </div>
</f:section>
</html>

<html lang="{site.language.twoLetterIsoCode}" data-namespace-typo3-fluid="true">
<f:layout name="Standard" />

<f:section name="Haupt">
    <div class="container">
        <header class="site-header">
            <f:image src="{settings.website.logo}" alt="{site.websiteTitle}" class="logo" />
            <f:cObject typoscriptObjectPath="lib.navigation" />
        </header>
        
        <main class="content">
            <h1>{page.title}</h1>
            <f:cObject typoscriptObjectPath="lib.content.main" />
        </main>
    </div>
</f:section>
</html>

Beachten Sie, wie wir direkt auf die Site-Set-Einstellungen mit {settings.website.logo} zugreifen. Viel sauberer als alte TypoScript-Konstanten.

Minimale TypoScript-Konfiguration

Mit PAGEVIEW wird Ihr TypoScript minimal. Erstellen Sie Configuration/Sets/MyTheme/setup.typoscript:

# Seitenobjekt - PAGEVIEW übernimmt die meiste Darstellung
page = PAGE
page {
    typeNum = 0
    
    # PAGEVIEW-Vorlage
    10 = PAGEVIEW
    10 {
        templateRootPaths.10 = EXT:my_site_package/Resources/Private/Templates/
        partialRootPaths.10 = EXT:my_site_package/Resources/Private/Partials/
        layoutRootPaths.10 = EXT:my_site_package/Resources/Private/Layouts/
        
        variables {
            content < styles.content.get
        }
    }
    
    # CSS und JS
    includeCSS.theme = EXT:my_site_package/Resources/Public/Css/theme.css
    includeJS.theme = EXT:my_site_package/Resources/Public/JavaScript/theme.js
}

# Einfache Navigation
lib.navigation = HMENU
lib.navigation {
    1 = TMENU
    1.NO.linkWrap = <li>|</li>
    1.ACT = 1
    1.ACT.linkWrap = <li class="active">|</li>
    wrap = <ul class="nav">|</ul>
}

# Inhaltsdarstellung
lib.content.main < styles.content.get

# Seitenobjekt - PAGEVIEW übernimmt die meiste Darstellung
page = PAGE
page {
    typeNum = 0
    
    # PAGEVIEW-Vorlage
    10 = PAGEVIEW
    10 {
        templateRootPaths.10 = EXT:my_site_package/Resources/Private/Templates/
        partialRootPaths.10 = EXT:my_site_package/Resources/Private/Partials/
        layoutRootPaths.10 = EXT:my_site_package/Resources/Private/Layouts/
        
        variables {
            content < styles.content.get
        }
    }
    
    # CSS und JS
    includeCSS.theme = EXT:my_site_package/Resources/Public/Css/theme.css
    includeJS.theme = EXT:my_site_package/Resources/Public/JavaScript/theme.js
}

# Einfache Navigation
lib.navigation = HMENU
lib.navigation {
    1 = TMENU
    1.NO.linkWrap = <li>|</li>
    1.ACT = 1
    1.ACT.linkWrap = <li class="active">|</li>
    wrap = <ul class="nav">|</ul>
}

# Inhaltsdarstellung
lib.content.main < styles.content.get

Das ist es. Keine komplexen Rendering-Definitionen oder Inhaltsobjekt-Konfigurationen.

Seiten-TSconfig in Site-Sets

Fügen Sie eine seitenbezogene Konfiguration zu Configuration/Sets/MyTheme/page.tsconfig hinzu:

# Backend-Layout
mod.web_layout.BackendLayouts {
    default {
        title = Standard-Layout
        icon = EXT:my_site_package/Resources/Public/Images/backend_layout.svg
        config {
            backend_layout {
                colCount = 1
                rowCount = 2
                rows {
                    1 {
                        columns.1 {
                            name = Kopfzeile
                            colPos = 1
                        }
                    }
                    2 {
                        columns.1 {
                            name = Hauptinhalt
                            colPos = 0
                        }
                    }
                }
            }
        }
    }
}

# Inhaltselement-Beschränkungen
TCEFORM.tt_content {
    CType.removeItems = div,html
    layout.altLabels {
        1 = Hervorgehoben
        2 = Box-Inhalt
    }
}

# Backend-Layout
mod.web_layout.BackendLayouts {
    default {
        title = Standard-Layout
        icon = EXT:my_site_package/Resources/Public/Images/backend_layout.svg
        config {
            backend_layout {
                colCount = 1
                rowCount = 2
                rows {
                    1 {
                        columns.1 {
                            name = Kopfzeile
                            colPos = 1
                        }
                    }
                    2 {
                        columns.1 {
                            name = Hauptinhalt
                            colPos = 0
                        }
                    }
                }
            }
        }
    }
}

# Inhaltselement-Beschränkungen
TCEFORM.tt_content {
    CType.removeItems = div,html
    layout.altLabels {
        1 = Hervorgehoben
        2 = Box-Inhalt
    }
}

Standortkonfiguration Integration

Erstellen Sie Ihre Standortkonfiguration unter config/sites/main/config.yaml und verweisen Sie auf Ihr Standort-Set:

rootPageId: 1
base: 'https://example.com/'
languages:
  -
    title: Deutsch
    enabled: true
    languageId: 0
    base: /
    typo3Language: default
    locale: de_DE.UTF-8
    iso-639-1: de
    navigationTitle: Deutsch
    hreflang: de-DE
    flag: de

dependencies:
  - mein-theme

settings:
  website:
    contactEmail: info@example.com
    socialMedia:
      twitter: '@example'
      linkedin: 'company/example'

rootPageId: 1
base: 'https://example.com/'
languages:
  -
    title: Deutsch
    enabled: true
    languageId: 0
    base: /
    typo3Language: default
    locale: de_DE.UTF-8
    iso-639-1: de
    navigationTitle: Deutsch
    hreflang: de-DE
    flag: de

dependencies:
  - mein-theme

settings:
  website:
    contactEmail: info@example.com
    socialMedia:
      twitter: '@example'
      linkedin: 'company/example'

Standortspezifische Einstellungen überschreiben die Standardwerte des Standort-Sets. Dadurch kann dasselbe Standort-Set in verschiedenen Projekten verwendet werden.

Multi-Site-Setup Vorteile

Hier kommen die Standort-Sets wirklich zur Geltung. Benötigen Sie dasselbe Design für mehrere Kunden? Erstellen Sie einfach verschiedene Standortkonfigurationen:

Kunde A: config/sites/client-a/config.yaml

rootPageId: 10  
base: 'https://client-a.com/'  
dependencies:  
  - mein-theme  
settings:  
website:  
logo: EXT:mein_site_package/Resources/Public/Images/client-a-logo.svg  
colors:  
primary: '#ff6600'

rootPageId: 10  
base: 'https://client-a.com/'  
dependencies:  
  - mein-theme  
settings:  
website:  
logo: EXT:mein_site_package/Resources/Public/Images/client-a-logo.svg  
colors:  
primary: '#ff6600'

Kunde B: config/sites/client-b/config.yaml

rootPageId: 20  
base: 'https://client-b.com/'  
dependencies:  
  - mein-theme  
settings:  
  website:  
    logo: EXT:mein_site_package/Resources/Public/Images/client-b-logo.svg  
    colors:  
      primary: '#009900'

rootPageId: 20  
base: 'https://client-b.com/'  
dependencies:  
  - mein-theme  
settings:  
  website:  
    logo: EXT:mein_site_package/Resources/Public/Images/client-b-logo.svg  
    colors:  
      primary: '#009900'

Gleiche Site-Set, unterschiedliche Markenbildung. Keine Code-Duplikation.

Erweiterte PAGEVIEW-Funktionen

PAGEVIEW unterstützt Datenprozessoren genau wie FLUIDTEMPLATE. Fügen Sie komplexe Datenvorbereitung hinzu:

page.10 {
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        10 {
            levels = 2
            as = hauptNavigation
        }
        
        20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
        20 {
            table = tt_news
            pidInList = 15
            orderBy = datetime DESC
            max = 3
            as = neuesteNachrichten
        }
    }
}

page.10 {
    dataProcessing {
        10 = TYPO3\CMS\Frontend\DataProcessing\MenuProcessor
        10 {
            levels = 2
            as = hauptNavigation
        }
        
        20 = TYPO3\CMS\Frontend\DataProcessing\DatabaseQueryProcessor
        20 {
            table = tt_news
            pidInList = 15
            orderBy = datetime DESC
            max = 3
            as = neuesteNachrichten
        }
    }
}

Verwenden Sie die verarbeiteten Daten in Ihrer Vorlage:

<nav class="main-nav">
    <f:for each="{mainNavigation}" as="item">
        <f:link.page pageUid="{item.data.uid}" class="{f:if(condition: item.active, then: 'active')}">{item.title}</f:link.page>
    </f:for>
</nav>

<aside class="news-sidebar">
    <h3>Neueste Nachrichten</h3>
    <f:for each="{latestNews}" as="article">
        <article>
            <h4>{article.title}</h4>
            <time datetime="{article.datetime -> f:format.date(format: 'Y-m-d')}">{article.datetime -> f:format.date()}</time>
        </article>
    </f:for>
</aside>

<nav class="main-nav">
    <f:for each="{mainNavigation}" as="item">
        <f:link.page pageUid="{item.data.uid}" class="{f:if(condition: item.active, then: 'active')}">{item.title}</f:link.page>
    </f:for>
</nav>

<aside class="news-sidebar">
    <h3>Neueste Nachrichten</h3>
    <f:for each="{latestNews}" as="article">
        <article>
            <h4>{article.title}</h4>
            <time datetime="{article.datetime -> f:format.date(format: 'Y-m-d')}">{article.datetime -> f:format.date()}</time>
        </article>
    </f:for>
</aside>

Debugging und Entwicklungstipps

Aktivieren Sie die Debug-Ausgabe während der Entwicklung. Fügen Sie dies zu Ihrem Site Set's TypoScript hinzu:

[applicationContext == "Entwicklung"]
config.debug = 1
page.10.settings.debugMode = 1
[END]

[applicationContext == "Entwicklung"]
config.debug = 1
page.10.settings.debugMode = 1
[END]

Verwenden Sie das TYPO3-Admin-Panel, um die PAGEVIEW-Darstellung zu überprüfen. Gehen Sie zu Admin-Panel > Info und aktivieren Sie „cObject-Zeiten und SQL-Abfragen anzeigen“.

Häufige Migrationsfallen

Mischen Sie nicht alte und neue Ansätze. Entfernen Sie lib.parseFunc_RTE-Verweise, wenn Sie PAGEVIEW verwenden. Das neue System verarbeitet die RTE-Analyse automatisch.

Abhängigkeiten von Site-Sets sind wichtig. Listen Sie sie in der richtigen Reihenfolge auf. Core-Sets sollten vor benutzerdefinierten kommen:

Abhängigkeiten:
  - typo3/fluid-styled-content  # Core zuerst
  - typo3/seo                   # Kernfunktionen
  - my-theme                    # Benutzerdefiniert zuletzt

Abhängigkeiten:
  - typo3/fluid-styled-content  # Core zuerst
  - typo3/seo                   # Kernfunktionen
  - my-theme                    # Benutzerdefiniert zuletzt

Einstellungen kaskadieren ordnungsgemäß. Die Site-Konfiguration überschreibt die Site-Set-Einstellungen, die wiederum die Erweiterungsstandards überschreiben. Verwenden Sie diese Hierarchie bewusst.

Leistungsüberlegungen

PAGEVIEW rendert schneller als herkömmliche FLUIDTEMPLATE-Ansätze. Fügen Sie jedoch keine unnötigen Datenprozessoren hinzu. Jeder Prozessor läuft bei jedem Seitenaufruf.

Zwischenspeichern Sie Ihre komplexen Berechnungen:

lib.teureBerechnung = BENUTZER
lib.teureBerechnung {
    userFunc = MyVendor\MyExtension\UserFunc\Calculator->process
    cache.laufzeit = 3600
    cache.tags = Seiten
}

lib.teureBerechnung = BENUTZER
lib.teureBerechnung {
    userFunc = MyVendor\MyExtension\UserFunc\Calculator->process
    cache.laufzeit = 3600
    cache.tags = Seiten
}

Site-Sets beeinflussen die Frontend-Performance nicht. Sie werden während des Bootstraps verarbeitet, nicht bei jeder Anfrage.

Testen Ihres Site-Pakets

Erstellen Sie einen einfachen Test, um zu überprüfen, ob Ihr Site-Set korrekt geladen wird:

<?php
// Tests/Functional/SiteSetTest.php
use TYPO3\TestingFramework\Core\Functional\FunctionalTestCase;

class SiteSetTest extends FunctionalTestCase
{
    protected array $testExtensionsToLoad = [
        'mein_site_package'
    ];

    public function testSiteSetIsLoadable(): void
    {
        $this->importCSVDataSet(__DIR__ . '/Fixtures/pages.csv');
        $this->setUpFrontendSite(1, [
            'dependencies' => ['mein-theme']
        ]);
        
        $response = $this->executeFrontendSubRequest(
            new InternalRequest('https://example.com/')
        );
        
        $this->assertEquals(200, $response->getStatusCode());
        $this->assertStringContainsString('<title>', (string)$response->getBody());
    }
}

<?php
// Tests/Functional/SiteSetTest.php
use TYPO3\TestingFramework\Core\Functional\FunctionalTestCase;

class SiteSetTest extends FunctionalTestCase
{
    protected array $testExtensionsToLoad = [
        'mein_site_package'
    ];

    public function testSiteSetIsLoadable(): void
    {
        $this->importCSVDataSet(__DIR__ . '/Fixtures/pages.csv');
        $this->setUpFrontendSite(1, [
            'dependencies' => ['mein-theme']
        ]);
        
        $response = $this->executeFrontendSubRequest(
            new InternalRequest('https://example.com/')
        );
        
        $this->assertEquals(200, $response->getStatusCode());
        $this->assertStringContainsString('<title>', (string)$response->getBody());
    }
}

Was kommt als Nächstes?

Sie haben jetzt ein modernes TYPO3-Site-Paket, das sowohl PAGEVIEW als auch Site Sets effektiv nutzt. Die Kombination sorgt für saubereren Code, der einfacher zu warten und auf mehreren Sites bereitzustellen ist.

Erwägen Sie, Folgendes hinzuzufügen:

Benutzerdefinierte Inhaltselemente mit der neuen Registrierungs-API
Erweiterte Datenprozessoren für komplexe Inhaltsszenarien
Asset-Building-Integration mit Vite oder Webpack
Automatisierte Bereitstellungs-Workflows, die Site Set-Konfigurationen handhaben

Der Ansatz in v13 skaliert besser als frühere Methoden. Beginnen Sie mit diesem Fundament und fügen Sie nur dann Komplexität hinzu, wenn es erforderlich ist.

FAQ

Nein, PAGEVIEW ist exklusiv für TYPO3 v13 und später. Für ältere Versionen verwenden Sie FLUIDTEMPLATE.

Nein, aber sie reduzieren die Komplexität von TypoScript erheblich. Sie benötigen weiterhin TypoScript für Seitenobjekte und lib-Definitionen.

Erstellen Sie eine Site Set-Konfiguration, verschieben Sie Konstanten zu den Einstellungen und aktualisieren Sie Ihre Site-Konfiguration, um auf das neue Site Set zu verweisen.

Ja, listen Sie mehrere Abhängigkeiten in Ihrer Site-Konfiguration auf. Sie werden der Reihe nach verarbeitet.

Ja, Site Set-Konfigurationen werden während des Bootstraps zwischengespeichert. Löschen Sie den Systemcache, wenn Sie config.yaml-Dateien ändern.

Nur minimale Änderungen erforderlich. PAGEVIEW verwendet die gleiche Fluid-Syntax wie FLUIDTEMPLATE.

Wie man baut TYPO3 Site Packages mit PAGEVIEW und Site Sets in v13 erstellt?

Was geändert in TYPO3 v13?

Einrichten der Struktur Ihres Site-Pakets

Erstellen Ihres ersten Site-Sets

PAGEVIEW-Vorlageneinrichtung

Minimale TypoScript-Konfiguration

Seiten-TSconfig in Site-Sets

Standortkonfiguration Integration

Multi-Site-Setup Vorteile

Erweiterte PAGEVIEW-Funktionen

Debugging und Entwicklungstipps

Häufige Migrationsfallen

Leistungsüberlegungen

Testen Ihres Site-Pakets

Was kommt als Nächstes?

FAQ

Post a Comment

Got answer to the question you were looking for?

Wie man baut TYPO3 Site Packages mit PAGEVIEW und Site Sets in v13 erstellt?

Was geändert in TYPO3 v13?

Einrichten der Struktur Ihres Site-Pakets

Erstellen Ihres ersten Site-Sets

PAGEVIEW-Vorlageneinrichtung

Minimale TypoScript-Konfiguration

Seiten-TSconfig in Site-Sets

Standortkonfiguration Integration

Multi-Site-Setup Vorteile

Erweiterte PAGEVIEW-Funktionen

Debugging und Entwicklungstipps

Häufige Migrationsfallen

Leistungsüberlegungen

Testen Ihres Site-Pakets

Was kommt als Nächstes?

FAQ

Post a Comment

Related Tutorials

Got answer to the question you were looking for?