Skip to content

Erste Schritte

Im Templating-System gibt es zwei Hauptarten von Templates: Seiten-Templates und Komponenten-Templates.
Komponenten-Templates sind wiederverwendbare Bausteine, die in Layouts oder anderen Komponenten eingebunden werden können. Typische Beispiele sind Elemente wie Alerts, Buttons oder Forms.

Seiten-Templates hingegen erweitern ein Layout und erscheinen in der Seitenansicht als auswählbare Vorlage. Eine Seite kann dabei mehrere Komponenten-Templates enthalten, um verschiedene Bereiche oder Funktionen darzustellen. Auch Layouts selbst können Komponenten enthalten, wie zum Beispiel eine Navbar, Scripts oder einen Footer.

Ein Seiten-Template kann dabei sehr simpel aufgebaut sein und nur wenige Zeilen Code enthalten. Die Templates verwenden Twig als Templating-Engine, wodurch sie Blöcke und Vererbungen nutzen können.

Ablaufdiagramm mit externen Komponenten

flowchart LR
    L[Layout] --> T[Seiten-Template]
    T --> S[Seite]
    S --> W[Web Render]

    N[Navbar Komponente] --> L
    Sc[Scripts Komponente] --> L
    F[Footer Komponente] --> L

    B[Button Komponente] --> T
    Br[Breadcrumbs Komponente] --> T

Beispiel: Einfaches Seiten-Template

  1. Slug: Der Slug wird aus dem Template Namen generiert, und bildet zusammen mit dem Verzeichnis den Pfad zur Template. Dieser ist später nicht mehr änderbar.
  2. Verzeichnis: Das Verzeichnis definiert wo die Template abgespeichert wird. Aktuell wird dies zur Pfad generierung genutzt. Dies ist später nicht mehr änderbar.
  3. Layout: Das Layout welches für die Template genutzt werden soll. Leer lassen um einr Seiten Template in eine Komponenten Template zu wandeln.

{% block Header %}
    Hello World!
{% endblock %}

{% block Content %}
    {{ Page.content }}{# (1)! #}
{% endblock %}
  1. Die Page Variable enthält alle Daten einer Seite als Array

In diesem Beispiel basiert das Template Initial Template auf dem Layout Sample Layout. Es definiert lediglich zwei Blöcke: einen einfachen Header und den Content, der den Inhalt der aktuellen Seite ausgibt.

Beispiel: Layout „Sample Layout“

Das Layout Sample Layout bildet die Grundlage, von der ein Seiten-Template erbt.
Wichtig sind hier insbesondere die definierten Blocks (Header, Content) sowie das eingebundene Stylesheet des CKEditors, das notwendig ist, um User Generated Content korrekt zu rendern.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>{{ Page.name }}</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  <link rel="stylesheet" href="{{ includeResource("vendor/libs/ckeditor5/ckeditor5-content.css") }}"/>{# (1)! #}
</head>
<body>

<div class="container-fluid p-5 bg-primary text-white text-center">
  <h1>{% block Header %}{% endblock %}</h1>
  <p class="ck ck-content">{% block Content %}{% endblock %}</p> 
</div>

</body>
</html>
  1. Der CK Content Stylesheet ist notwendig um Seiteninhalte korrekt zu generieren.

Seite erstellen

Nachdem sowohl das Layout als auch das Seiten-Template erstellt wurden, kann nun eine neue Seite angelegt werden.
Bei der Erstellung der Seite kann in den Seiteneinstellungen das zuvor erstellte Seiten-Template ausgewählt werden.

Sobald die Seite gespeichert ist, wird der definierte Aufbau aus Layout und Template zusammengeführt und im Browser gerendert.
So können Layout-Elemente (z. B. Navbar, Footer) und Template-Inhalte (z. B. Buttons, Breadcrumbs) automatisch kombiniert werden, ohne dass wiederholt Code geschrieben werden muss.