Der Layout- Dialekt ist ein Thymeleaf-Dialekt, mit dem Benutzer Layouts und Vorlagen für die Wiederverwendung von HTML-Code erstellen können. Es hat einen hierarchischen Ansatz und verwendet eine Dekorationsvorlage, um Layoutdateien zu „dekorieren“. Layout Dialect ist ein eigenständiges Projekt und wird nicht mit Thymeleaf geliefert. Es ist jedoch ein Open-Source-Code, der auf GitHub verfügbar ist. Er ist gut dokumentiert und scheint auch in gutem Zustand zu sein.
Installation
Wir müssen das Thymeleaf-Starterpaket zu Ihrem Spring Boot-Pom hinzufügen:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Ab Spring Boot 2 reicht dies jedoch nicht mehr aus. Pom-Dialekt ist nicht Teil von Spring Boot, und wir müssen ihn selbst hinzufügen:
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>2.3.0</version> </dependency>
In den Codebeispielen wird auch Bootstrap verwendet, sodass Sie auch Webdateien hinzufügen müssen:
<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency>
Als letzten Schritt müssen wir eine LayoutDialect-Bean in der mit Anmerkungen versehenen @ Configuration-Klasse erstellen.
@Bean public LayoutDialect layoutDialect() { return new LayoutDialect(); }
Gehen wir weiter.
Beispiel für einen Layout-Dialekt
Dieses Beispiel zeigt, wie wir mit Layout Dialect Layouts für unsere Seiten definieren können, damit wir den Code wieder besser verwenden können: Verwenden Sie die Seite index.html, die layout.html als Layout verwendet. Der Name Layout.html ist beliebig und kann beliebig sein. Dort werden einige weitere Dateien hinzugefügt, die jedoch nur zur Demonstration dienen.
Das Bild zeigt die Struktur des Ressourcenordners. Spring Boot findet automatisch alle Thymeleaf-Vorlagen im Verzeichnis resources / templates.
Layout.html
<!DOCTYPE html> <html> <head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Igorski.co</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" rel="stylesheet" media="screen" /> </head> <body> <div th:replace="fragments/header :: header"> This header content is going to be replaced.</div> <div class="container"> <div class="row"> <div class="col-2" layout:fragment="sidebar"> <h1>This is the layout's sidebar</h1> <p>This content will be replaced if the page using the layout also defines a layout:fragment="sidebar" segment.</p> </div> <div class="col" layout:fragment="content"> <h1>This is the Layout's main section</h1> <p>This content will be replaced if the page using the layout also defines a layout:fragment="content" segment. </p> </div> </div> </div> <footer th:insert="fragments/footer :: footer" class="footer"> This content will remain, but other content will be inserted after it. </footer> </body> </html>
Layout.html verwendet
zwei der fünf Prozessoren, die vom Layout-Dialekt bereitgestellt werden. Das erste ist das Layout:
der Header-Vorlagenprozessor . Der Header-Vorlagenprozessor hilft dem Benutzer, den besten Titel für die resultierende Seite zu ermitteln. In diesem Beispiel wird der endgültige Titel als Kombination aus Seitentitel und Layout-Header definiert. Hierzu werden zwei spezielle Token verwendet, die im Layout-Dialekt
$ LAYOUT_TITLE und
$ CONTENT_TITLE dargestellt werden .
Von größter Bedeutung in layout.html sind zwei vom Layout definierte Platzhalter (oder Fragmente):
Fragmentprozessor . Mit diesem Prozessor können wir Inhaltsplatzhalter in unseren Layouts definieren. Der Inhalt dieser Platzhalter wird später durch den Inhalt von Seiten ersetzt, die das Layout verwenden. Das Beispiel definiert zwei verschiedene Fragmente, eines für die Seitenleiste und eines für den Hauptinhalt. Wir können jedoch so viele Fragmente haben, wie wir möchten, vorausgesetzt, sie haben alle unterschiedliche Namen.
Index.html
<!DOCTYPE html> <html xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorate="~{layouts/layout}"> <head> <title>Home Page</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link th:href="@{/css/core.css}" rel="stylesheet" media="screen" /> </head> <body> <div class="container"> <div class="row"> <div class="col-2" layout:fragment="sidebar"> <h1>Sidebar</h1> <a href="#">Login</a> </div> <div class="col" layout:fragment="content"> <h1>Welcome to the Index page</h1> <br>This content is replacing the content of the layout:fragment="content"<br> placeholder in layout.html</p> </div> </div> </div> </body> </html>
Wir erklären, dass index.html layout.html als Layout für das layout: decorate-Prozessor verwendet. Nachdem wir dies getan haben, erklären wir, dass index.html die Vorlage layout.html verwendet. Das Wichtigste dabei ist die Verwendung des
Fragmentprozessors . Es gibt den Inhalt an, der anstelle des Inhalts von Fragmenten des Layouts mit demselben Namen verwendet wird. Eine andere erwähnenswerte Sache ist die
Überschrift . Auf der resultierenden index.html-Seite, die wir nach der Verarbeitung erhalten, ist der Header eine Kombination aus zwei Headern, einer aus index.html und der andere aus dem Layout. Sie werden kombiniert.
Sowohl layout.html als auch index.html können ohne Verarbeitung im Browser angezeigt werden. Nach der Verarbeitung sehen wir jedoch, dass index.html sehr unterschiedlich ist. Der Inhalt von index.html wird verwendet, um das Layout zu formatieren und den Inhalt innerhalb des Layouts basierend auf den Definitionen des Layouts zu platzieren.
Das Beispiel enthält zwei weitere Elemente: Kopf- und Fußzeile. Sie verwenden jedoch Thymeleaf Standard Layout th: replace und th: insert processors. Sehr ähnlich zu den
letzten beiden der fünf in Layout Dialect vorgestellten Prozessoren, Layout: Einfügen und Layout: Ersetzen . Sie machen mehr oder weniger dasselbe. Im Gegensatz zu den vorherigen Prozessoren, die wir besprochen haben, verwenden diese beiden keinen hierarchischen, sondern einen integrativen Ansatz. Dies ist charakteristischer für die Thymeleaf-Form.
Das Bild zeigt die letzte Seitenansicht. Es hat sowohl eine Kopf- als auch eine Fußzeile, obwohl keine davon im index.html-Markup erwähnt wird.