Dialek
Layout adalah dialek Thymeleaf yang memungkinkan pengguna untuk membuat layout dan template untuk menggunakan kembali kode HTML. Ini memiliki pendekatan hierarkis dan menggunakan template dekorator untuk "menghias" file tata letak. Layout Dialect adalah proyek mandiri dan tidak dikirimkan bersama Thymeleaf. Namun, ini adalah open source, tersedia di GitHub, didokumentasikan dengan baik dan tampaknya juga dipertahankan dalam kondisi baik.
Instalasi
Kami perlu menambahkan paket starter Thymeleaf ke pom Spring Boot Anda:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Namun, mulai dengan Spring Boot 2, ini tidak lagi cukup. Dialek Pom bukan bagian dari Spring Boot, dan kita harus menambahkannya sendiri:
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>2.3.0</version> </dependency>
Contoh kode juga menggunakan Bootstrap, jadi Anda juga perlu menambahkan file web:
<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency>
Sebagai langkah terakhir, kita perlu membuat kacang LayoutDialect di kelas @Configuration beranotasi.
@Bean public LayoutDialect layoutDialect() { return new LayoutDialect(); }
Mari kita melangkah lebih jauh.
Contoh Dialek Tata Letak
Contoh ini akan menunjukkan bagaimana kita dapat menggunakan Layout Dialect untuk mendefinisikan tata letak untuk halaman kita sehingga kita dapat menggunakan kode dengan lebih baik: menggunakan halaman index.html, yang menggunakan layout.html sebagai tata letak. Nama Layout.html arbitrer dan bisa berupa apa saja. Beberapa file ditambahkan di sana, tetapi hanya untuk demonstrasi.
Gambar menunjukkan struktur folder sumber daya. Spring Boot akan secara otomatis menemukan semua templat Thymeleaf di direktori 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 menggunakan
dua dari lima prosesor yang disediakan oleh
Dialout Layout. Yang pertama adalah tata letak:
prosesor templat header . Prosesor template tajuk membantu pengguna menentukan judul terbaik untuk halaman yang dihasilkan. Dalam contoh ini, ia mendefinisikan judul akhir sebagai kombinasi dari judul halaman dan tajuk tata letak. Untuk ini, dua token khusus digunakan, yang disajikan dalam Layout Dialect,
$ LAYOUT_TITLE dan
$ CONTENT_TITLE .
Yang paling penting dalam tata letak.html adalah dua placeholder (atau fragmen) yang ditentukan oleh tata letak:
prosesor fragmen . Prosesor ini memungkinkan kami untuk menentukan tempat penampung konten di layout kami. Konten placeholder ini nantinya akan diganti oleh konten halaman menggunakan tata letak. Contoh ini mendefinisikan dua fragmen yang berbeda, satu untuk sidebar dan satu untuk konten utama. Namun, kita dapat memiliki fragmen sebanyak yang kita inginkan, asalkan semuanya memiliki nama yang berbeda.
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>
Kami menyatakan bahwa index.html menggunakan tata letak.html sebagai tata letaknya dengan tata letak: menghias prosesor. Setelah melakukan ini, kami menyatakan bahwa index.html akan menggunakan template layout.html. Yang paling penting di sini adalah penggunaan
prosesor fragmen . Ini menunjukkan konten yang akan digunakan alih-alih isi fragmen tata letak dengan nama yang sama. Hal lain yang layak disebut adalah
tajuk utama . Pada halaman index.html yang dihasilkan, yang kami dapatkan, setelah diproses, header akan menjadi kombinasi dari dua header, satu dari index.html dan yang lainnya dari tata letak. Mereka akan digabungkan.
Layout.html dan index.html dapat dilihat di browser tanpa pemrosesan apa pun. Tetapi setelah diproses, kami melihat bahwa index.html sangat berbeda. Isi index.html digunakan untuk mendesain tata letak dan menempatkan konten di dalam tata letak berdasarkan apa yang didefinisikan oleh tata letak.
Dua elemen lain hadir dalam contoh: header dan footer. Namun, mereka menggunakan Thymeleaf Standard Layout th: replace dan th: insert processor. Sangat mirip dengan
dua terakhir dari lima prosesor yang disajikan dalam Layout Dialect, tata letak: masukkan dan tata letak: ganti . Mereka kurang lebih melakukan hal yang sama. Berbeda dengan prosesor sebelumnya yang kami diskusikan, keduanya tidak menggunakan pendekatan hierarkis, tetapi inklusif. Ini lebih khas dari bentuk Thymeleaf.
Gambar menunjukkan tampilan halaman terakhir. Ini memiliki header dan footer, meskipun tidak satupun dari mereka disebutkan dalam markup index.html.