---
title: "Taming the Page Module Header: Why We Built EXT:page_info_tabs"
url: "https://b13.com/de/wissen/den-seitenmodul-header-zaehmen-warum-wir-extpage-info-tabs-entwickelt-haben"
description: "When multiple TYPO3 extensions add content to the page module header, things quickly become messy. EXT:page_info_tabs structures everything into clean Bootstrap tabs, with zero configuration required in third-party extensions."
image: "https://b13.com/fileadmin/_processed_/1/f/csm_PageInfoTabs_Sharing_c32681762b.png"
date: 2026-03-03
modified: 2026-08-19
lastUpdated: 2026-08-19
---
# Taming the Page Module Header: Why We Built EXT:page_info_tabs
[ Tool-Tip ](https://b13.com/de/wissen/tool-tip) [ Open Source ](https://b13.com/de/wissen/open-source)
Den Seitenmodul-Header zähmen — Warum wir EXT:page\_info\_tabs entwickelt haben
=================================================================================
David Steeb
31. März 2026
[ RSS Feed ](https://b13.com/de/rss.xml)
Wer regelmäßig mit TYPO3-Installationen arbeitet, in denen mehrere Extensions im Einsatz sind, kennt die Situation: Der Header des Seitenmoduls kann schnell zu einer wachsenden Ansammlung von Inhalten aus unterschiedlichsten Quellen werden — Aufrufstatistiken, Blog-Metadaten, SEO-Übersichten — alles untereinander gerendert, ohne visuelle Trennung oder Struktur.
Solange nur eine Extension Inhalte zum Header beiträgt, sieht alles ordentlich aus. Doch sobald eine zweite oder dritte Extension hinzukommt, verwandelt sich der Seitenmodul-Header in eine unstrukturierte HTML-Wand. Die benötigten Informationen zu finden bedeutet dann, sich durch Inhaltsblöcke zu scrollen, die nie dafür gedacht waren, nebeneinander zu existieren.
Genau solche kleinen, aber wirkungsvollen Probleme lösen wir bei b13 besonders gern: eine fokussierte, in sich geschlossene Funktion, die den redaktionellen Alltag verbessert — ganz ohne Änderungen an bestehenden Extensions. Deshalb haben wir EXT:page\_info\_tabs entwickelt.
Das Problem: Eine wachsende Ansammlung zusammenhangloser Inhalte
------------------------------------------------------------------
TYPO3 bietet einen sauberen Mechanismus, mit dem Extensions Inhalte zum Seitenmodul-Header hinzufügen können: das Event `ModifyPageLayoutContentEvent` und dessen Methode `addHeaderContent()`. Das ist gut durchdacht und funktioniert perfekt — solange nur eine Extension es nutzt.
In der Realität der meisten Projekte sieht es jedoch anders aus. Sobald mehrere Extensions Inhalte beisteuern — und das tun sie zunehmend –, entsteht ein vertikaler Stapel unzusammenhängender HTML-Blöcke. Es gibt keine eingebaute Möglichkeit, diese Bereiche zu trennen, zu beschriften oder zu strukturieren.
In einem aktuellen Projekt hatten wir mehrere Extensions, die Inhalte zum Seitenmodul-Header beitrugen: eine Blog-Extension mit Beitragsmetadaten, ein View-Tracker mit Seitenstatistiken, ein SEO-Tool mit Optimierungshinweisen, eine Übersetzungsübersicht sowie projektspezifische Zusatzinformationen. Das Ergebnis war ein Header-Bereich, durch den Redakteure erheblich scrollen mussten, bevor sie überhaupt beim eigentlichen Seiteninhalt ankamen.
Das Kernproblem ist struktureller Natur: TYPO3 sammelt alle Header-Inhalte in einer einzigen Ausgabe. Es gibt kein Konzept von Abschnitten, Gruppierung oder Navigation. Jede Extension hängt ihr HTML einfach an — und das Ergebnis ist das, was zufällig dabei herauskommt.
Wie EXT:page\_info\_tabs funktioniert
---------------------------------------
Die Grundidee von page\_info\_tabs ist bewusst einfach: Inhalte des Seitenmodul-Headers werden automatisch in Bootstrap-5-Tabs organisiert — ohne dass bestehende Extensions angepasst werden müssen.
Die Extension arbeitet mit dem Decorator-Pattern und dekoriert das `EventDispatcherInterface` von TYPO3. Sie fängt die Inhalte ab, die einzelne Listener des `ModifyPageLayoutContentEvent` hinzufügen, und verwandelt die Ausgabe jedes Listeners in einen eigenen Tab. Das ist die zentrale Designentscheidung: Keine Extension muss von page\_info\_tabs wissen. Keine Code-Anpassungen, keine zusätzlichen Event-Listener, keine Konfiguration in Drittanbieter-Extensions.
Das Verhalten passt sich automatisch an die vorhandene Situation an:
- **0 Abschnitte** — Es wird nichts gerendert
- **1 Abschnitt** — Der Inhalt wird direkt ausgegeben, ohne Tabs (keine unnötige UI)
- **2+ Abschnitte** — Bootstrap-5-Tabs, sortiert nach konfigurierbarer Priorität
Die Tab-Beschriftungen werden automatisch anhand typischer HTML-Muster im Output der jeweiligen Extension erkannt. Die Extension sucht nach CSS-Klassen wie `blog-pageheader`, `tx-ext-key `oder `data-extension`-Attributen. Dadurch erhalten die meisten Extensions sofort eine sinnvolle Beschriftung — ganz ohne Konfiguration.
Da das TYPO3-Backend bereits das JavaScript für Bootstrap-Tabs lädt, ist kein zusätzliches JS für das Umschalten erforderlich. Ein kleiner Resize-Event-Helper behebt Darstellungsprobleme bei Chart-Bibliotheken (z. B. Frappe Charts, Chart.js), die in initial versteckten Tab-Panes falsch rendern. Außerdem wird der zuletzt verwendete Tab in localStorage gespeichert, sodass Redakteuren beim Wechsel zwischen Seiten automatisch zur zuletzt genutzten Ansicht zurückkehren.
Entwickelt für Stabilität mit unbekanntem Drittanbieter-Code
--------------------------------------------------------------
Eine der größten Herausforderungen bei einer solchen Extension ist, dass sie zuverlässig mit Inhalten beliebiger Drittanbieter-Extensions funktionieren muss — mit HTML-Strukturen, CSS-Klassen und JavaScript-Verhalten, die vollständig außerhalb unserer Kontrolle liegen.
Deshalb haben wir uns bewusst für das Decorator-Pattern entschieden. EXT:page\_info\_tabs verändert, überschreibt oder manipuliert das HTML anderer Extensions nicht. Jede Ausgabe wird lediglich in ein Tab-Panel eingebettet. Der Inhalt innerhalb des Tabs ist exakt das, was die ursprüngliche Extension gerendert hat — unverändert.
Dieses Design stellt sicher, dass:
- bestehende Extensions unverändert weiter funktionieren
- JavaScript-Initialisierungen von Drittanbieter-Extensions intakt bleiben
- CSS-Scoping erhalten bleibt (keine Klassennamens-Konflikte)
- bei Deinstallation von page\_info\_tabs alles automatisch auf das Standard-Stapelverhalten zurückfällt
Dieser Ansatz entspricht unserer Philosophie bei b13: kleine, fokussierte Extensions bauen, die ein klar definiertes Problem lösen, den Umfang begrenzen, minimale Konfiguration erfordern und sich sauber ins Gesamtsystem einfügen. Eine Extension, die Drittanbieter-Inhalte organisiert, muss besonders vorsichtig sein, nichts zu beschädigen.
Installation
--------------
Die Installation erfolgt wie gewohnt via Composer:
`composer require b13/page-info-tabs`
Das war’s. Alle bestehenden Extensions, die `addHeaderContent()` verwenden, erhalten automatisch ihren eigenen Tab. Zusätzliche Konfiguration ist nicht erforderlich.
Labels und Prioritäten konfigurieren
--------------------------------------
Für bekannte Extensions sind Standard-Labels hinterlegt. Die automatische Erkennung funktioniert in den meisten Setups zuverlässig, kann aber bei Bedarf explizit angepasst werden.
Um Labels anzupassen oder hinzuzufügen, lege diese in deiner ext\_localconf.php oder AdditionalConfiguration.php fest:
```
1
2
3
```
```
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['labels']['view_tracker'] = 'Page Views';
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['labels']['blog'] = 'Blog';
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['labels']['my_extension'] = 'My Label';
```
Prioritäten steuern die Tab-Reihenfolge (kleiner Wert = weiter links):
```
1
```
```
$GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['priorities']['view_tracker'] = 20; $GLOBALS['TYPO3_CONF_VARS']['EXTENSIONS']['page_info_tabs']['priorities']['blog'] = 10;
```
Den richtigen Extension-Key finden
------------------------------------
Jedes Tab-Panel enthält einen HTML-Kommentar mit dem erkannten Key. Öffnen Sie die Developer-Tools Ihres Browsers und inspizieren Sie den Tab-Inhalt:
`\`
Diesen Key verwenden Sie anschließend für Label- und Prioritäts-Konfiguration.
Die automatische Erkennung erfolgt in folgender Reihenfolge:
1. `data-extension="my_ext" `Attribut (am zuverlässigsten)
2. CSS-Klassen wie `my-ext-pageheader` oder `my-ext-widget`
3. TYPO3-Konventionen: `tx-my-ext `oder `tx_my_ext`
4. b13-JS-Hooks: `bJS_txMyExt`
5. `EXT:my_ext`/-Referenzen in `src`/`href`-Attributen
Falls die Auto-Erkennung einen unerwarteten Key liefert, können Sie entweder direkt ein Label für diesen Key konfigurieren oder die Extension-Autoren bitten, ein `data-extension`-Attribut hinzuzufügen.
Explizite Section-Registrierung (optional)
--------------------------------------------
Extensions, die vollständige Kontrolle über Label, Priorität und Inhalt ihres Tabs wünschen, können stattdessen auf CollectPageInfoSectionsEvent reagieren. Explizit registrierte Sections haben Vorrang vor automatisch erfassten Inhalten derselben Extension.
`use B13\PageInfoTabs\Event\CollectPageInfoSectionsEvent;`
`use B13\PageInfoTabs\Model\Section;`
`use TYPO3\CMS\Core\Attribute\AsEventListener;`
`#[AsEventListener]`
`final class MyPageInfoSection{ `
` public function __invoke( `
` CollectPageInfoSectionsEvent $event `
` ): void {`
` $event->addSection(`
` new Section( `
` identifier: 'my-extension', `
` label: 'My Label', `
` content: 'Your HTML here
', `
` priority: 50, `
` )`
` ); `
` }`
`}`
Diese API ist bewusst einfach gehalten: ein Event, ein Value Object und klare Prioritätsregeln. Extension-Entwickler können sie in wenigen Minuten integrieren.
Fazit
-------
EXT:page\_info\_tabs ist eine kleine Extension, die ein echtes Alltagsproblem im TYPO3-Backend löst. Sie nimmt Inhalte beliebig vieler Drittanbieter-Extensions — Inhalte, die nie für ein gemeinsames Auftreten konzipiert wurden — und organisiert sie in einer klaren, navigierbaren Tab-Struktur.
Was diese Extension besonders macht, ist das, was sie nicht benötigt: keine Anpassungen bestehender Extensions, keine komplexe Konfiguration, kein zusätzliches JavaScript. Installieren — und der Seitenmodul-Header ist sofort strukturiert.
Genau solche Extensions möchten wir bei b13 bauen: fokussiert auf ein klar definiertes Problem. Klein genug, um langfristig wartbar zu bleiben. Stabil genug, um zuverlässig mit unbekanntem Drittanbieter-Code zu funktionieren. Und so konzipiert, dass sie sofort einsatzbereit sind — bei Bedarf aber flexibel konfigurierbar bleiben.
Dokumentation und Quellcode sind auf GitHub verfügbar:
[ Zu GitHub ](https://github.com/b13/page-info-tabs)
**Neugierig geworden?**
In größeren TYPO3-Installationen mit vielen Extensions im Seitenmodul macht ein strukturierter Header einen spürbaren Unterschied im redaktionellen Workflow.
Wenn du Unterstützung bei der Einführung von EXT:page\_info\_tabs oder der Integration in ein bestehendes TYPO3-Projekt benötigst, sprich uns gern an.
[ Kontakt aufnehmen ](https://b13.com/de/kontakt)
### Geschrieben von:
Als b13-Gründer und CEO is David derjenige, mit dem Du es zu tun haben wirst, wenn Du mit uns zusammenarbeiten möchtest. Er eignet sich ständig neue Fähigkeiten an und bestimmt maßgeblich unsere hochmodernen Ansätze in der Frontend-Entwicklung.
David Steeb CEO
[ mehr von David Steeb ](https://b13.com/de/team/david-steeb)
Ähnliche Artikel
------------------
- 
### Saubere Telefonnummern in TYPO3: warum wir EXT:phone\_number gebaut haben
11. August 2026 | David Steeb
TYPO3 speichert Telefonnummern korrekt, formatiert sie aber nicht fürs Frontend. EXT:phone\_number sorgt per Fluid ViewHelper für saubere Ausgabe.
[ weiterlesen: Saubere Telefonnummern in TYPO3: warum wir EXT:phone\_number gebaut haben ](https://b13.com/de/wissen/saubere-telefonnummern-in-typo3)
- 
### T3ppy gibt TYPO3 ein freundliches Gesicht
06. August 2026 | Florian “Flix” Keitgen
TYPO3 ist leistungsstark — muss sich aber nicht unpersönlich anfühlen. Das ist T3ppy, unser freundlicher Begleiter fürs Backend.
[ weiterlesen: T3ppy gibt TYPO3 ein freundliches Gesicht ](https://b13.com/de/wissen/t3ppy-design-kit)
- 
### KI-Inhalte in TYPO3: Transparenz braucht Verantwortung
02. August 2026 | Benni Mack
Der EU AI Act rückt die Herkunft KI-generierter Inhalte in den Fokus. AI Label kennzeichnet KI-generierte und KI-bearbeitete Inhalte in TYPO3 und dokumentiert, wer den…
[ weiterlesen: KI-Inhalte in TYPO3: Transparenz braucht Verantwortung ](https://b13.com/de/wissen/ai-content-in-typo3-labelling-needs-accountability)
- 
### Fang an, Ökosysteme zu bauen statt nur Plattformen zu kaufen.
09. Juni 2026 | David Steeb
Der erste TYPO3 Summit North America eröffnete mit einer Keynote, die neu formuliert, wie Enterprise-Teams über Content-Management nachdenken sollten — von Plattformen zu…
[ weiterlesen: Fang an, Ökosysteme zu bauen statt nur Plattformen zu kaufen. ](https://b13.com/de/wissen/stop-buying-platforms-start-building-ecosystems)
- 
### Notizen aus Atlanta — Was der erste TYPO3 Summit North America über das nächste Jahrzehnt Enterprise-CMS verrät
22. Mai 2026 | David Steeb
Bericht vom ersten TYPO3 Summit North America in Atlanta. Über Governance, die man nicht einfach so aufkaufen kann, vorhersehbare 7-Jahres-Lebenszyklen, die Distributionsschicht…
[ weiterlesen: Notizen aus Atlanta — Was der erste TYPO3 Summit North America über das nächste Jahrzehnt Enterprise-CMS verrät ](https://b13.com/de/wissen/notizen-atlanta-erstes-typo3-summit-north-america-enterprise-cms)
- 
### Happy Release Day TYPO3 v14: Warum dieser Release zeigt, wie stark Open Source sein kann
21. April 2026 | Florian “Flix” Keitgen
TYPO3 v14 verbessert Workflows für Redakteure, Marketing-Teams und Entwickler — und zeigt, wie Community-getriebene Open Source echte Wirkung entfaltet.
[ weiterlesen: Happy Release Day TYPO3 v14: Warum dieser Release zeigt, wie stark Open Source sein kann ](https://b13.com/de/wissen/happy-release-day-typo3-v14-warum-dieser-release-zeigt-wie-stark-open-source-sein-kann)
- 
### Ein echter Geheimtipp in TYPO3: Die Backend User Section (Doktype 6)
05. März 2026 | David Steeb
Entdecke den oft unterschätzten Doktype 6 (Backend User Section) in TYPO3 für sichere interne Vorschauen, Redaktionstrainings und Prototyping. Erfahre praxisnahe Anwendungsfälle,…
[ weiterlesen: Ein echter Geheimtipp in TYPO3: Die Backend User Section (Doktype 6) ](https://b13.com/de/wissen/ein-echter-geheimtipp-in-typo3-die-backend-user-section-doktype-6)
- 
### Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown
28. Januar 2026 | Benni Mack
Discover why most web traffic is now automated and how TYPO3’s structured content model prepares websites for humans, editors, and AI systems.
[ weiterlesen: Das Internet ist nicht mehr nur für Menschen — KI-Bots lieben Markdown ](https://b13.com/de/wissen/das-internet-ist-nicht-mehr-nur-fuer-menschen-ki-bots-lieben-markdown)
- 
### Was gibt’s Neues in TYPO3 v13?
20. Januar 2026 | Desirée Lochner
Mit TYPO3 v13 beginnt eine neue Ära der Nutzerfreundlichkeit. Die Version begeistert mit einer modernen, frischen und unglaublich performanten Benutzeroberfläche — entwickelt für…
[ weiterlesen: Was gibt’s Neues in TYPO3 v13? ](https://b13.com/de/loesungen/typo3/was-gibts-neues-in-typo3-v13)
- 
### CMS Kickoff 2026: Blickwinkel auf KI, Open Source und digitale Souveränität
19. Januar 2026 | David Steeb
KI, digitale Souveränität und Open Source über die europäische Perspektive hinaus: Gedanken vom CMS Kickoff 2026 in Florida und was globale Diskussionen für Agenturen bedeuten, die…
[ weiterlesen: CMS Kickoff 2026: Blickwinkel auf KI, Open Source und digitale Souveränität ](https://b13.com/de/wissen/cms-kickoff-2026-blickwinkel-auf-ki-open-source-und-digitale-souveraenitaet)