1. Pengenalan
Thymeleaf adalah mesin templat Java untuk memproses dan membuat HTML, XML, JavaScript, CSS dan teks biasa. Untuk pengenalan Thymeleaf dan Spring, lihatlah tulisan ini.
Dalam penulisan ini, kami akan menumpukan pada templat - sesuatu yang perlu dilakukan oleh laman web yang paling kompleks dengan satu cara atau yang lain. Ringkasnya, halaman perlu berkongsi komponen halaman biasa seperti header, footer, menu dan berpotensi banyak lagi.
Thymeleaf menangani bahawa dengan dialek tersuai - anda boleh membina susun atur menggunakan Sistem Susun atur Standard Thymeleaf atau Dialek Tata Letak - yang menggunakan corak penghias untuk bekerja dengan fail susun atur.
Dalam artikel ini, kita akan membincangkan beberapa ciri Dialek Tata Letak Thymeleaf - yang terdapat di sini. Untuk lebih spesifik, kami akan membincangkan ciri-cirinya seperti membuat susun atur, tajuk tersuai atau penggabungan elemen kepala.
2. Pergantungan Maven
Pertama, mari kita lihat konfigurasi yang diperlukan untuk mengintegrasikan Thymeleaf dengan Spring. The thymeleaf-spring perpustakaan diperlukan dalam kebergantungan kami:
org.thymeleaf thymeleaf 3.0.11.RELEASE org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE Perhatikan bahawa, untuk projek Spring 4, perpustakaan thymeleaf-spring4 mesti digunakan dan bukannya thymeleaf-spring5 . Versi ketergantungan terkini boleh didapati di sini.
Kami juga memerlukan kebergantungan untuk dialek tata letak tersuai:
nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 2.4.1 Versi terbaru boleh didapati di Maven Central Repository.
3. Konfigurasi Dialek Susun atur Thymeleaf
Di bahagian ini, kita akan membincangkan cara mengkonfigurasi Thymeleaf untuk menggunakan Layout Dialect . Sekiranya anda ingin melangkah mundur dan melihat bagaimana mengkonfigurasi Thymeleaf 3.0 dalam projek aplikasi web anda, sila periksa tutorial ini.
Sebaik sahaja kita menambahkan ketergantungan Maven sebagai sebahagian daripada projek, kita perlu menambahkan Layout Dialect ke mesin templat Thymeleaf yang ada. Kita boleh melakukan ini dengan konfigurasi Java:
SpringTemplateEngine engine = new SpringTemplateEngine(); engine.addDialect(new LayoutDialect());Atau dengan menggunakan konfigurasi fail XML:
Semasa menghias bahagian kandungan dan templat susun atur, tingkah laku lalai adalah meletakkan semua elemen kandungan setelah susun atur.
Kadang-kadang kita memerlukan penggabungan elemen yang lebih bijak, memungkinkan untuk mengelompokkan elemen serupa bersama (skrip js bersama, helaian gaya bersama-sama dll).
Untuk mencapainya, kita perlu menambahkan strategi penyortiran pada konfigurasi kita - dalam kes kita, ini akan menjadi strategi pengelompokan:
engine.addDialect(new LayoutDialect(new GroupingStrategy()));atau dalam XML:
Strategi lalai adalah menambahkan elemen. Dengan yang disebutkan di atas, kita akan menyusun semuanya dan dikumpulkan.
Sekiranya tidak ada strategi yang sesuai dengan keperluan kita, kita dapat menerapkan Strategi Penyortiran kita sendiri dan meneruskannya ke dialek seperti di atas.
4. Ruang Nama dan Ciri Pemproses Atribut
Sekali, dikonfigurasi kita boleh mula menggunakan ruang nama susun atur , dan lima pemproses atribut baru: menghias , corak tajuk , memasukkan , mengganti , dan memecah.
Untuk membuat templat susun atur yang ingin kami gunakan untuk fail HTML kami, kami membuat fail berikut, bernama template.html :
... Seperti yang kita lihat, kita mengubah ruang nama dari xmlns standard : th = "// www.thymeleaf.org" menjadi xmlns: layout = "// www.ultraq.net.nz/thymeleaf/layout" .
Sekarang kita boleh mula bekerja dengan pemproses atribut dalam fail HTML kita.
4.1. susun atur: serpihan
Untuk membuat bahagian tersuai dalam susun atur kami atau templat yang dapat digunakan kembali yang dapat digantikan oleh bahagian yang memiliki nama yang sama, kami menggunakan atribut fragmen di dalam badan template.html kami :
Your page content goes here
My custom footer
Your custom footer here
Perhatikan bahawa terdapat dua bahagian yang akan digantikan oleh HTML khusus kami - kandungan dan footer.
Penting juga untuk menulis HTML lalai yang akan digunakan sekiranya ada fragmen yang tidak dijumpai.
4.2. susun atur: menghias
Langkah seterusnya yang perlu kita buat adalah membuat fail HTML, yang akan dihiasi oleh susun atur kita:
Layout Dialect Example This is a custom content that you can provide
This is some footer content that you can change
Seperti yang ditunjukkan pada baris ke-3, kami menggunakan susun atur: menghias dan menentukan sumber penghias. Semua fragmen dari file tata letak yang sesuai dengan fragmen dalam file konten akan diganti dengan pelaksanaannya yang disesuaikan.
4.3. susun atur: tajuk-corak
Memandangkan bahawa Dialek Tata Letak secara automatik menimpa tajuk susun atur dengan yang terdapat dalam templat kandungan, anda mungkin menyimpan bahagian dari tajuk yang terdapat dalam tata letak.
Sebagai contoh, kita boleh membuat serbuk roti atau mengekalkan nama laman web dalam tajuk halaman. The susun atur: Tajuk-corak pemproses datang dengan bantuan dalam kes seperti ini. Yang perlu anda nyatakan dalam fail susun atur anda ialah:
BaeldungJadi hasil akhir untuk susun atur dan fail kandungan yang ditunjukkan dalam perenggan sebelumnya akan kelihatan seperti ini:
Baeldung - Layout Dialect Example4.4. susun atur: masukkan / susun atur: ganti
Pemproses pertama, susun atur: sisipan , serupa dengan thymeleaf asal Thymeleaf : insert , tetapi memungkinkan untuk meneruskan keseluruhan fragmen HTML ke templat yang dimasukkan. Sangat berguna jika anda mempunyai HTML yang ingin anda gunakan semula, tetapi kandungannya terlalu kompleks untuk ditentukan atau dibina dengan pemboleh ubah konteks sahaja.
Yang kedua, susun atur: ganti , mirip dengan yang pertama, tetapi dengan tingkah laku th: Repl , yang sebenarnya akan menggantikan tag host dengan kod fragmen yang ditentukan.
5. Kesimpulan
Dalam artikel ini, kami menerangkan beberapa cara untuk melaksanakan susun atur di Thymeleaf.
Perhatikan bahawa contoh menggunakan Thymeleaf versi 3.0; jika anda ingin mempelajari cara memindahkan projek anda, ikuti prosedur ini.
Pelaksanaan penuh tutorial ini boleh didapati dalam projek GitHub.
Bagaimana untuk menguji? Cadangan kami adalah bermain dengan penyemak imbas terlebih dahulu, kemudian periksa juga ujian JUnit yang ada.
Ingat, anda boleh membina susun atur menggunakan Dialek Tata Letak yang disebutkan di atas atau anda boleh membuat penyelesaian anda sendiri dengan mudah. Mudah-mudahan, artikel ini memberi anda lebih banyak pandangan mengenai topik tersebut dan anda akan menemui pendekatan pilihan anda bergantung pada keperluan anda.