Thymeleaf: Персонализиран диалект на оформлението

1. Въведение

Thymeleaf е Java шаблонна машина за обработка и създаване на HTML, XML, JavaScript, CSS и обикновен текст. За въведение в мащерката и пролетта, разгледайте това описание.

В това описание ще се съсредоточим върху шаблонирането - нещо, което най-разумно сложните сайтове трябва да направят по един или друг начин. Най-просто казано, страниците трябва да споделят общи компоненти на страницата като заглавката, долния колонтитул, менюто и потенциално много повече.

Thymeleaf адресира това с персонализирани диалекти - можете да изграждате оформления, използвайки стандартната система за оформление на Thymeleaf или Layout Dialect - която използва шаблона на декоратор за работа с файловете за оформление.

В тази статия ще обсъдим няколко функции на диалекта за оформление на мащерка - които можете да намерите тук. За да бъдем по-конкретни, ще обсъдим неговите характеристики като създаване на оформления, персонализирани заглавия или обединяване на елемента на главата.

2. Зависимости на Maven

Първо, нека видим необходимата конфигурация, необходима за интегриране на Thymeleaf с Spring. В thymeleaf-пролет е необходима библиотека в нашите зависимости:

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

Имайте предвид, че за проект Spring 4 библиотеката thymeleaf-spring4 трябва да се използва вместо thymeleaf-spring5 . Най-новата версия на зависимостите може да бъде намерена тук.

Ще ни е необходима и зависимост за потребителски оформления диалект:

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

Най-новата версия може да бъде намерена в Централното хранилище на Maven.

3. Конфигурация на диалекта за оформление на мащерка

В този раздел ще обсъдим как да конфигурираме Thymeleaf да използва Layout Dialect . Ако искате да направите крачка назад и да видите как да конфигурирате Thymeleaf 3.0 във вашия проект за уеб приложение, моля, проверете този урок.

След като добавим зависимостта на Maven като част от проект, ще трябва да добавим Layout Dialect към съществуващия ни механизъм за шаблони на Thymeleaf. Можем да направим това с Java конфигурация:

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

Или чрез използване на конфигурация на XML файл:

Когато декорирате секциите на шаблоните за съдържание и оформление, поведението по подразбиране е да се поставят всички елементи на съдържанието след оформлението.

Понякога се нуждаем от по-интелигентно обединяване на елементи, което позволява да се групират подобни елементи (JS скриптове заедно, таблици със стилове заедно и т.н.)

За да постигнем това, трябва да добавим стратегия за сортиране към нашата конфигурация - в нашия случай това ще бъде стратегията за групиране:

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

или в XML:

Стратегията по подразбиране е да се добавят елементи. С гореспоменатото ще имаме всичко сортирано и групирано.

Ако нито една от двете стратегии не отговаря на нашите нужди, можем да приложим нашата собствена SortingStrategy и да я предадем на диалекта, както по-горе.

4. Пространство от имена и характеристики на процесорите на атрибути

След като сме конфигурирани, можем да започнем да използваме пространство за имена на оформление и пет нови процесора за атрибути: украса , шаблон на заглавие , вмъкване , замяна и фрагментиране.

За да създадем шаблона за оформление, който искаме да използваме за нашите HTML файлове, създадохме следния файл, наречен template.html :

  ... 

Както виждаме, променихме пространството от имена от стандартния xmlns: th = ”// www.thymeleaf.org” на xmlns: layout = ”// www.ultraq.net.nz/thymeleaf/layout” .

Сега можем да започнем да работим с процесори на атрибути в нашите HTML файлове.

4.1. оформление: фрагмент

За да създадем персонализирани секции в нашето оформление или шаблони за многократна употреба, които могат да бъдат заменени от секции, които споделят едно и също име, използваме атрибут fragment вътре в нашето тяло template.html :

Your page content goes here

My custom footer

Your custom footer here

Забележете, че има два раздела, които ще бъдат заменени от нашите персонализирани HTML - съдържание и долен колонтитул.

Също така е важно да напишете HTML по подразбиране, който ще се използва, ако някой от фрагментите няма да бъде намерен.

4.2. оформление: украсявам

Следващата стъпка, която трябва да направим, е да създадем HTML файл, който ще бъде украсен от нашето оформление:

   Layout Dialect Example    

This is a custom content that you can provide

This is some footer content that you can change

Както е показано в 3-ия ред, ние използваме оформление: украсяваме и посочваме източника на декоратора. Всички фрагменти от файла на оформлението, които съвпадат с фрагменти в файл със съдържание, ще бъдат заменени от неговото персонализирано изпълнение.

4.3. оформление: заглавие-модел

Като се има предвид, че диалектът на оформлението автоматично замества заглавието на оформлението с това, което се намира в шаблона за съдържание, можете да запазите части от заглавието, намерени в оформлението.

Например можем да създадем галета или да запазим името на уебсайта в заглавието на страницата. Най- оформление: заглавие-модел процесор идва с помощ в такива случаи. Всичко, което трябва да посочите във вашия файл с оформление, е:

Baeldung

Така че крайният резултат за оформлението и съдържателния файл, представени в предишния параграф, ще изглежда така:

Baeldung - Layout Dialect Example

4.4. layout: insert / layout: replace

Първият процесор, layout: insert , е подобен на оригиналния th: insert на Thymeleaf , но позволява да се предадат цели HTML фрагменти към вмъкнатия шаблон. Много е полезно, ако имате HTML, който искате да използвате повторно, но чието съдържание е твърде сложно за определяне или конструиране само с контекстни променливи.

Вторият, layout: replace , е подобен на първия, но с поведението на th: replace , който всъщност ще замести хост маркера от кода на дефинирания фрагмент.

5. Заключение

В тази статия описахме няколко начина за внедряване на оформления в Thymeleaf.

Имайте предвид, че примерите използват Thymeleaf версия 3.0; ако искате да научите как да мигрирате вашия проект, моля, следвайте тази процедура.

Пълното изпълнение на този урок може да бъде намерено в проекта GitHub.

Как да тествате? Нашето предложение е първо да играете с браузър, след което да проверите и съществуващите JUnit тестове.

Не забравяйте, че можете да създавате оформления, като използвате гореспоменатия диалект на оформлението или можете лесно да създадете свое собствено решение. Надяваме се, че тази статия ви дава още някои прозрения по темата и ще намерите предпочитания от вас подход в зависимост от вашите нужди.