TYPO3 13 - Der Seitenbaum
Die LTS (Long-Term-Support) Version 13 wurde am 10. Dezember 2024 veröffentlicht und stellt die aktuellste TYPO3 Version dar. Wie bereits im letzten Blogpost erläutert, bringt auch diese Version wieder einige Features mit sich. Zu den Highlights zählen unter anderem das neue Designs des Backends (inklusive Dark-Mode), viele neue APIs sowie ein neu komplett überarbeiteter und somit neu entwickelter Seitenbaum.
Seitenbaum
Der Seitenbaum ist ein zentrales Werkzeug, um Seiten zu strukturieren und effizient zu verwalten. In TYPO3 13 wurde der Seitenbaum barrierefrei gestaltet und bietet nun über verschiedene Schnittstellen erweiterbare Funktionen
Der folgende Screenshot zeigt 2 Einsatzmöglichkeiten:
- Labels
Mithilfe sogenannter Labels können einzelne Bereiche des Seitenbaums mit farblichen Rändern hervorgehoben werden. Diese Funktionalität wird in konkreten Projekten genutzt, um unterschiedliche Teilbereiche eines Webauftritts optisch voneinander abzugrenzen. - Status Information
Rechts neben den Seitentiteln befinden sich Icons, die beispielsweise von der TYPO3-Extension "news" stammen. Diese Symbole zeigen an, dass auf der jeweiligen Seite Plugins dieser Extension verwendet werden.
Der folgende Screenshot illustriert beide Anwendungsbeispiele und verdeutlicht, wie der neue Seitenbaum im Alltag die Arbeit erleichtert.
Implementierung
Der folgende Codebeispiel zeigt die Implementierung der Funktionalität.
- Zeile 11: Seit der Version 13 kann über dieser PHP Attribut AsEventListener ein Event direkt im Listener konfiguriert werden
- Zeile 14ff: hier erfolgt die Konfiguration der Seiten und ihrer Farben. Alternativ könnte diese Konfiguration auch in den Site Settings vorgenommen werden
- Zeile 30: Hat die Seite eine der definierten Seiten als Elternseite, wird ein entsprechendes Label ergänzt
<?php
declare(strict_types=1);
namespace StudioMitte\Theme\EventListener;
use TYPO3\CMS\Backend\Controller\Event\AfterPageTreeItemsPreparedEvent;
use TYPO3\CMS\Backend\Dto\Tree\Label\Label;
use TYPO3\CMS\Core\Attribute\AsEventListener;
#[AsEventListener]
final readonly class ModifyPageTreeItems
{
private const array LABELS = [
123 => [
'label' => 'Seite 1',
'color' => '#297D7A',
],
456 => [
'label' => 'Seite 2',
'color' => '#323936',
],
];
public function __invoke(AfterPageTreeItemsPreparedEvent $event): void
{
$items = $event->getItems();
foreach ($items as &$item) {
$pid = $item['_page']['pid'] ?? null;
if (isset(self::LABELS[$pid])) {
$item['labels'][] = new Label(
label: self::LABELS[$pid]['label'],
color: self::LABELS[$pid]['color'],
priority: 1,
);
}
}
$event->setItems($items);
}
}
Upgrade auf TYPO3 13
Du hast Fragen zu TYPO3 13 oder benötigst Unterstützung beim Upgrade oder Realisierung eines neuen Projekte? Melde dich gerne bei uns!