Templates

Das Templating-System von CrispyCMS bildet das Rückgrat der visuellen Darstellung Ihrer Inhalte. Es basiert auf der leistungsstarken Twig-Engine und unterscheidet grundsätzlich zwischen zwei Hauptarten von Templates: Seiten-Templates und Komponenten-Templates.

Die Architektur ist darauf ausgelegt, Wiederverwendbarkeit und Modularität zu maximieren. Komponenten-Templates fungieren als flexible Bausteine, die nahtlos in Layouts oder andere Komponenten integriert werden können.

Im Gegensatz dazu dienen Seiten-Templates der Strukturierung ganzer Ansichten. Sie erweitern ein definiertes Layout und stehen im Backend bei der Seitenerstellung als auswählbare Vorlage zur Verfügung. Eine Seite kann dabei eine Vielzahl von Komponenten-Templates orchestrieren, um unterschiedliche Bereiche darzustellen. Selbst Layouts können wiederum Komponenten enthalten, beispielsweise eine Navbar, globale Scripts oder einen Footer.

Architektur und Datenfluss

Ein Seiten-Template kann minimalistisch aufgebaut sein und oft nur wenige Zeilen Code umfassen, da es die Schwerarbeit der Struktur an das Layout delegiert. Durch den Einsatz von Twig profitieren Sie von mächtigen Funktionen wie Block-Definitionen und Vererbung.

Das folgende Diagramm verdeutlicht die Beziehung zwischen Layouts, Templates und den gerenderten Seiten:

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

Erstellung eines Templates

Bei der Neuanlage eines Templates in CrispyCMS sind spezifische Konfigurationen erforderlich. Es ist entscheidend, diese Einstellungen sorgfältig zu wählen, da einige Parameter nachträglich nicht mehr verändert werden können.

Die Konfiguration umfasst drei wesentliche Bereiche:

Slug: Dieser Identifikator wird automatisch aus dem Template-Namen generiert. Zusammen mit dem Verzeichnis bildet er den physischen Pfad zur Template-Datei.
Verzeichnis: Definiert den Speicherort des Templates im Dateisystem. Dies dient der logischen Gruppierung und Pfadgenerierung.
Layout: Hier weisen Sie dem Template ein Basis-Layout zu. Lassen Sie dieses Feld leer, wenn Sie ein Seiten-Template in ein reines Komponenten-Template umwandeln möchten.

Unwiderrufliche Einstellungen

Beachten Sie, dass sowohl der Slug als auch das Verzeichnis nach der Erstellung nicht mehr geändert werden können. Planen Sie Ihre Namenskonventionen daher sorgfältig im Voraus.

Code-Implementierung

Um die Interaktion zwischen einem Seiten-Template und seinem Layout zu verstehen, betrachten wir ein konkretes Beispiel. Wir definieren ein einfaches Template (“Initial Template”), das von einem Basis-Layout (“Sample Layout”) erbt.

Das Seiten-Template definiert den Inhalt für die im Layout bereitgestellten Blöcke. Die Variable Page enthält dabei alle Daten der aktuellen Seite als Array.

{# Initial Template #}
{% block Header %}
    Hello World!
{% endblock %}

{% block Content %}
    {{ Page.content }}
{% endblock %}

Das Layout stellt das HTML-Gerüst bereit. Es definiert die blocks (hier Header und Content), die später von den Seiten-Templates befüllt werden.

<!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>
  {# Wichtig für CKEditor Styles #}
  <link rel="stylesheet" href="{{ includeResource("vendor/libs/ckeditor5/ckeditor5-content.css") }}"/>
</head>
<body>

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

</body>
</html>

Wichtige Hinweise zum Layout

Im oben gezeigten Layout-Code sehen Sie die Einbindung einer spezifischen CSS-Datei für den CKEditor.

Darstellung von Inhalten

Das Stylesheet ckeditor5-content.css ist zwingend erforderlich, um User Generated Content, der über den Editor eingepflegt wurde, korrekt im Frontend zu rendern. Ohne diese Ressource fehlen wichtige Formatierungen für Texte und Medien.

Seite erstellen und verknüpfen

Sobald sowohl das Layout als auch das Seiten-Template definiert sind, ist der Prozess der Seitenerstellung der letzte Schritt:

Erstellen Sie eine neue Seite im CrispyCMS Backend.
Wählen Sie in den Seiteneinstellungen das zuvor erstellte Seiten-Template aus.
Speichern Sie die Seite.

Beim Aufruf der Seite im Browser fusioniert das System automatisch die Struktur des Layouts (z. B. Navbar, Footer, CSS-Includes) mit den spezifischen Inhalten des Templates (z. B. Buttons, Breadcrumbs, Textblöcke). Dies verhindert Redundanz und sorgt für eine konsistente Darstellung über Ihre gesamte Webpräsenz hinweg.

Search Documentation