Typo3
Aus devops.straight8.de
Zur Navigation springenZur Suche springen
Seiten Laypouts[Bearbeiten]
Die Verzeichnisstruktur von Seitenlayouts in TYPO3 ist eng mit dem Konzept des Sitepackages verbunden, das auf der Extension-Struktur von TYPO3 basiert. Layouts definieren das grundlegende HTML-Gerüst, während Partials für wiederverwendbare Komponenten (z.B. Header, Footer) und Templates für die eigentlichen Inhaltsseiten zuständig sind.
Grundlegende Verzeichnisstruktur (Sitepackage)
Ein typisches Sitepackage, das Layouts enthält, wird unter typo3conf/ext/ oder packages/ abgelegt:
Sitepackage Struktur[Bearbeiten]
mein_sitepackage/ ├── Configuration/ │ ├── BackendLayouts/ # Definitionen der Backend-Layouts (TSconfig/YAML) │ ├── TypoScript/ # Haupt-TypoScript-Dateien │ └── RTE/ # Konfiguration für den Rich Text Editor ├── Resources/ │ ├── Private/ │ │ ├── Layouts/ # Haupt-Layouts (HTML) │ │ ├── Partials/ # Wiederverwendbare Komponenten (Header, Footer) │ │ └── Templates/ # Haupt-Templates (z.B. für Seiten) │ └── Public/ │ ├── CSS/ │ ├── Images/ │ └── JavaScript/ └── ext_emconf.php # Extension-Konfigurationsdatei
Vorlagen für Templates[Bearbeiten]
- HTML
default.html
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TYPO3 Website - {data.title}</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header class="site-header">
<div class="container">
<div class="logo">
<a href="/">MEIN LOGO</a>
</div>
<nav class="main-navigation">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Leistungen</a></li>
<li><a href="#">Kontakt</a></li>
</ul>
</nav>
</div>
</header>
<main class="content-wrapper">
<section class="breadcrumb">
<div class="container">
Sie sind hier: Home > Unterseite
</div>
</section>
<div class="container main-grid">
<article class="content-main">
<h1>Überschrift der Seite</h1>
<p>Hier erscheint der Hauptinhalt aus dem Backend.</p>
</article>
<aside class="sidebar">
<h3>Sidebar</h3>
<p>Zusatzinfos oder Menüs.</p>
</aside>
</div>
</main>
<footer class="site-footer">
<div class="container">
<p>© 2026 Meine TYPO3 Website</p>
</div>
</footer>
</body>
</html>
- CSS
style.css
* { box-sizing: border-box; }
body { font-family: sans-serif; line-height: 1.6; margin: 0; color: #333; }
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }
header { background: #f4f4f4; padding: 1rem 0; border-bottom: 3px solid #ff8700; }
.logo { font-weight: bold; font-size: 1.5rem; float: left; }
nav { float: right; }
nav ul { list-style: none; padding: 0; margin: 0; display: flex; }
nav li { margin-left: 20px; }
.main-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; padding: 40px 0; }
footer { background: #333; color: #fff; padding: 2rem 0; margin-top: 40px; }
