Thymeleaf: Benutzerdefinierter Layout-Dialekt

1. Einleitung

Thymeleaf ist eine Java-Template-Engine zum Verarbeiten und Erstellen von HTML, XML, JavaScript, CSS und einfachem Text. Ein Intro zu Thymeleaf und Spring finden Sie in diesem Artikel.

In diesem Artikel konzentrieren wir uns auf Vorlagen - etwas, das die meisten recht komplexen Websites auf die eine oder andere Weise tun müssen. Einfach ausgedrückt, Seiten müssen gemeinsame Seitenkomponenten wie Kopf- und Fußzeile, Menü und möglicherweise vieles mehr gemeinsam nutzen.

Thymeleaf adressiert das mit benutzerdefinierten Dialekten - Sie können Layouts mit dem Thymeleaf Standard Layout System oder dem Layout Dialect erstellen - das das Dekorationsmuster für die Arbeit mit den Layoutdateien verwendet.

In diesem Artikel werden wir eine Handvoll Funktionen von Thymeleaf Layout Dialect diskutieren - die hier zu finden sind. Um genauer zu sein, werden wir seine Funktionen wie das Erstellen von Layouts, benutzerdefinierten Titeln oder das Zusammenführen von Kopfelementen diskutieren.

2. Maven-Abhängigkeiten

Lassen Sie uns zunächst die erforderliche Konfiguration sehen, die für die Integration von Thymeleaf in Spring erforderlich ist. Die Thymeleaf-Spring- Bibliothek wird in unseren Abhängigkeiten benötigt:

 org.thymeleaf thymeleaf 3.0.11.RELEASE   org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Beachten Sie, dass für ein Spring 4-Projekt die Bibliothek thymeleaf-spring4 anstelle von thymeleaf-spring5 verwendet werden muss . Die neueste Version der Abhängigkeiten finden Sie hier.

Wir benötigen auch eine Abhängigkeit für den Dialekt für benutzerdefinierte Layouts:

 nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 2.4.1 

Die neueste Version finden Sie im Maven Central Repository.

3. Thymeleaf Layout Dialect Konfiguration

In diesem Abschnitt wird erläutert, wie Sie Thymeleaf für die Verwendung von Layout Dialect konfigurieren . Wenn Sie einen Schritt zurücktreten und sehen möchten, wie Sie Thymeleaf 3.0 in Ihrem Web-App-Projekt konfigurieren, lesen Sie dieses Tutorial.

Sobald wir die Maven-Abhängigkeit als Teil eines Projekts hinzugefügt haben, müssen wir den Layout-Dialekt zu unserer vorhandenen Thymeleaf-Vorlagen-Engine hinzufügen . Wir können dies mit Java-Konfiguration tun:

SpringTemplateEngine engine = new SpringTemplateEngine(); engine.addDialect(new LayoutDialect());

Oder mithilfe der XML-Dateikonfiguration:

Beim Dekorieren der Abschnitte der Inhalts- und Layoutvorlagen werden standardmäßig alle Inhaltselemente nach den Layoutelementen platziert.

Manchmal brauchen wir eine intelligentere Zusammenführung von Elementen, um ähnliche Elemente zu gruppieren (js-Skripte zusammen, Stylesheets zusammen usw.).

Um dies zu erreichen, müssen wir unserer Konfiguration eine Sortierstrategie hinzufügen - in unserem Fall handelt es sich um die Gruppierungsstrategie:

engine.addDialect(new LayoutDialect(new GroupingStrategy()));

oder in XML:

Die Standardstrategie besteht darin, Elemente anzuhängen. Mit den oben genannten haben wir alles sortiert und gruppiert.

Wenn keine der beiden Strategien unseren Anforderungen entspricht, können wir unsere eigene SortingStrategy implementieren und wie oben beschrieben an den Dialekt weitergeben.

4. Funktionen von Namespace- und Attributprozessoren

Nach der Konfiguration können wir den Layout- Namespace und fünf neue Attributprozessoren verwenden: Dekorieren , Titelmuster , Einfügen , Ersetzen und Fragmentieren.

Um die Layoutvorlage zu erstellen, die wir für unsere HTML-Dateien verwenden möchten, haben wir die folgende Datei mit dem Namen template.html erstellt :

  ... 

Wie wir sehen können, haben wir den Namespace von den Standard- xmlns: th = ”// www.thymeleaf.org” in xmlns: layout = ”// www.ultraq.net.nz/thymeleaf/layout” geändert .

Jetzt können wir mit Attributprozessoren in unseren HTML-Dateien arbeiten.

4.1. Layout: Fragment

Um benutzerdefinierte Abschnitte in unserem Layout oder wiederverwendbare Vorlagen zu erstellen, die durch Abschnitte mit demselben Namen ersetzt werden können, verwenden wir das Fragmentattribut in unserem template.html- Text:

Your page content goes here

My custom footer

Your custom footer here

Beachten Sie, dass es zwei Abschnitte gibt, die durch unseren benutzerdefinierten HTML-Code ersetzt werden - Inhalt und Fußzeile.

Es ist auch wichtig, den Standard-HTML-Code zu schreiben, der verwendet wird, wenn eines der Fragmente nicht gefunden wird.

4.2. Layout: dekorieren

Der nächste Schritt, den wir machen müssen, ist das Erstellen einer HTML-Datei, die durch unser Layout dekoriert wird:

   Layout Dialect Example    

This is a custom content that you can provide

This is some footer content that you can change

Wie in der 3. Zeile gezeigt, verwenden wir layout: decorate und geben die Dekorationsquelle an. Alle Fragmente aus der Layoutdatei, die mit Fragmenten in einer Inhaltsdatei übereinstimmen, werden durch die benutzerdefinierte Implementierung ersetzt.

4.3. Layout: Titelmuster

Da der Layout-Dialekt den Titel des Layouts automatisch mit dem in der Inhaltsvorlage gefundenen überschreibt, können Sie Teile des im Layout gefundenen Titels beibehalten.

Zum Beispiel können wir Breadcrumbs erstellen oder den Namen der Website im Seitentitel beibehalten. Das Layout: Titelmusterprozessor wird in einem solchen Fall mit Hilfe geliefert. Alles, was Sie in Ihrer Layoutdatei angeben müssen, ist:

Baeldung

Das Endergebnis für das im vorherigen Absatz vorgestellte Layout und die Inhaltsdatei sieht also folgendermaßen aus:

Baeldung - Layout Dialect Example

4.4. Layout: Einfügen / Layout: Ersetzen

Der erste Prozessor, layout: insert , ähnelt Thymeleafs ursprünglichem th: insert , ermöglicht jedoch die Übergabe der gesamten HTML-Fragmente an die eingefügte Vorlage. Es ist sehr nützlich, wenn Sie HTML-Code haben, den Sie wiederverwenden möchten, dessen Inhalt jedoch zu komplex ist, um ihn nur mit Kontextvariablen zu bestimmen oder zu konstruieren.

Das zweite, layout: replace , ähnelt dem ersten, jedoch mit dem Verhalten von th: replace , das das Host-Tag tatsächlich durch den Code des definierten Fragments ersetzt.

5. Schlussfolgerung

In diesem Artikel haben wir einige Möglichkeiten zur Implementierung von Layouts in Thymeleaf beschrieben.

Beachten Sie, dass in den Beispielen die Thymeleaf-Version 3.0 verwendet wird. Wenn Sie erfahren möchten, wie Sie Ihr Projekt migrieren, gehen Sie wie folgt vor.

Die vollständige Implementierung dieses Tutorials finden Sie im GitHub-Projekt.

Wie teste ich? Wir empfehlen, zuerst mit einem Browser zu spielen und dann auch die vorhandenen JUnit-Tests zu überprüfen.

Denken Sie daran, dass Sie Layouts mit dem oben genannten Layout-Dialekt erstellen oder ganz einfach Ihre eigene Lösung erstellen können. Hoffentlich gibt Ihnen dieser Artikel weitere Einblicke in das Thema und Sie finden Ihren bevorzugten Ansatz in Abhängigkeit von Ihren Anforderungen.