Thymeleaf: Benutzerdefinierter Layout-Dialekt
1. Einführung
Thymeleaf ist eine Java-Vorlagen-Engine zum Verarbeiten und Erstellen von HTML, XML, JavaScript, CSS und einfachem Text. Ein Intro zu Thymeleaf und Spring finden Sie unterthis write-up.
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 Kopfzeile, Fußzeile, Menü und möglicherweise vieles mehr aufweisen.
Thymeleaf adressiert, dass mit benutzerdefinierten Dialekten - Sie können Layouts mitThymeleaf Standard Layout System oderLayout Dialect erstellen - das Dekorationsmuster für die Arbeit mit den Layoutdateien verwendet wird.
In diesem Artikel werden einige Funktionen vonThymeleaf Layout Dialect erläutert, diehere enthalten. Um genauer zu sein, werden wir die Funktionen wie das Erstellen von Layouts, benutzerdefinierte Titel 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 Bibliothekthymeleaf-springwird in unseren Abhängigkeiten benötigt:
org.thymeleaf
thymeleaf
3.0.9.RELEASE
org.thymeleaf
thymeleaf-spring4
3.0.9.RELEASE
Beachten Sie, dass für ein Spring 4-Projekt die Bibliothekthymeleaf-spring4anstelle vonthymeleaf-spring5verwendet werden muss. Die neueste Version der Abhängigkeiten isthere.
Wir benötigen auch eine Abhängigkeit für den Dialekt für benutzerdefinierte Layouts:
nz.net.ultraq.thymeleaf
thymeleaf-layout-dialect
2.3.0
Die neueste Version finden Sie unterMaven Central Repository.
3. Thymeleaf Layout Dialect Konfiguration
In diesem Abschnitt wird erläutert, wie Sie Thymeleaf für die Verwendung vonLayout Dialect konfigurieren. Wenn Sie einen Schritt zurücktreten und sehen möchten, wie Sie Thymeleaf 3.0 in Ihrem Web-App-Projekt konfigurieren, überprüfen Sie diesetutorial.
Sobald wir die Maven-Abhängigkeit als Teil eines Projekts hinzugefügt haben, müssen wir dieLayout Dialect zu unserer vorhandenen Thymeleaf-Vorlagen-Engine hinzufügen. Wir können dies mit der 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 (js-Skripte, Stylesheets usw.) zu gruppieren.
Um dies zu erreichen, müssen wir unserer Konfiguration eine Sortierstrategie hinzufügen - in unserem Fall ist dies die Gruppierungsstrategie:
engine.addDialect(new LayoutDialect(new GroupingStrategy()));oder in XML:
Die Standardstrategie ist das Anhängen von Elementen. Mit oben genannten haben wir alles sortiert und gruppiert.
Wenn keine der beiden Strategien unseren Anforderungen entspricht, können wir eigeneSortingStrategyimplementieren und wie oben beschrieben an den Dialekt weitergeben.
4. Funktionen von Namespace- und Attributprozessoren
Nach der Konfiguration können wir den Namespace vonlayoutund fünf neue Attributprozessoren verwenden:decorate,title-pattern,insert,replace undfragment.
Um eine Layoutvorlage zu erstellen, die wir für unsere HTML-Dateien verwenden möchten, haben wir die folgende Datei mit dem Namentemplate.html erstellt:
...
Wie wir sehen können, haben wir den Namespace von Standardxmlns:th=”http://www.thymeleaf.org” inxmlns:layout=”http://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 Attributfragmentinnerhalb unserestemplate.html-Körpers:
New dialect example
Your page content goes here
Beachten Sie, dass es zwei Abschnitte gibt, die durch unseren benutzerdefinierten HTML-Inhalt und die Fußzeile ersetzt werden.
Es ist auch wichtig, den Standard-HTML-Code zu schreiben, der verwendet wird, wenn eines der Fragmente nicht gefunden wird.
4.2. layout:decorate
Der nächste Schritt, den wir machen müssen, ist die Erstellung einer HTML-Datei, die von unserem Layout gestaltet wird:
Layout Dialect Example
This is a custom content that you can provide
Wie in der 3. Zeile gezeigt, verwenden wirlayout: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:title-pattern
DaLayout dialect den Titel des Layouts automatisch mit dem Titel überschreibt, der in der Inhaltsvorlage enthalten ist, können Sie Teile des Titels im Layout beibehalten.
Beispielsweise können wir Breadcrumbs erstellen oder den Namen der Website im Seitentitel beibehalten. Der Prozessor vonlayout:title-patternwird in einem solchen Fall mit einer Hilfe geliefert. Alles, was Sie in Ihrer Layoutdatei angeben müssen, ist:
example Das Endergebnis für die Layout- und Inhaltsdatei im vorherigen Absatz sieht also folgendermaßen aus:
example - Layout Dialect Example 4.4. layout:insert/layout:replace
Der erste Prozessor,layout:insert, ähnelt Thymeleafs ursprünglichemth: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 vonth:replace, das das Host-Tag tatsächlich durch den Code des definierten Fragments ersetzt.
5. Fazit
In diesem Artikel haben wir einige Möglichkeiten zur Implementierung von Layouts in Thymeleaf beschrieben.
Beachten Sie, dass die Beispiele die Thymeleaf-Version 3.0 verwenden. Wenn Sie lernen möchten, wie Sie Ihr Projekt migrieren, befolgen Sie bitte dieseprocedure.
Die vollständige Implementierung dieses Tutorials finden Sie inthe GitHub project.
How to test? 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 den oben genanntenLayout Dialecterstellen oder ganz einfach Ihre eigene Lösung erstellen können. Hoffentlich gibt Ihnen dieser Artikel weitere Einblicke in das Thema und Sie werden Ihren bevorzugten Ansatz je nach Ihren Bedürfnissen finden.