Typo3: Unterschied zwischen den Versionen
Aus devops.straight8.de
Zur Navigation springenZur Suche springen
(Die Seite wurde neu angelegt: „== Vorlagen für Templates == * HTML <code>default.html</code> <pre> <!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 LOG…“) |
Keine Bearbeitungszusammenfassung |
||
| Zeile 1: | Zeile 1: | ||
= Seiten Laypouts = | |||
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 <code>typo3conf/ext/</code> oder <code>packages/</code> abgelegt: | |||
== Sitepackage Struktur == | |||
<pre> | |||
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 | |||
</pre> | |||
== Vorlagen für Templates == | == Vorlagen für Templates == | ||
Aktuelle Version vom 1. April 2026, 17:32 Uhr
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; }
