Thymeleaf: пользовательский макет диалект
1. Вступление
Thymeleaf - это шаблонизатор Java для обработки и создания HTML, XML, JavaScript, CSS и простого текста. Чтобы познакомиться с Thymeleaf и Spring, посмотритеthis write-up.
В этой статье мы сосредоточимся на создании шаблонов - на том, что так или иначе необходимо делать на самых сложных сайтах. Проще говоря, страницы должны совместно использовать общие компоненты страницы, такие как верхний и нижний колонтитулы, меню и, возможно, многое другое.
Thymeleaf обращается к этому с помощью настраиваемых диалектов - вы можете создавать макеты, используяThymeleaf Standard Layout System илиLayout Dialect, - который использует шаблон декоратора для работы с файлами макета.
В этой статье мы обсудим несколько функцийThymeleaf Layout Dialect, которые можно найти вhere. Чтобы быть более конкретным, мы обсудим его функции, такие как создание макетов, пользовательских заголовков или слияние элементов заголовка.
2. Maven Зависимости
Во-первых, давайте посмотрим, какая конфигурация необходима для интеграции Thymeleaf со Spring. Библиотекаthymeleaf-spring требуется в наших зависимостях:
org.thymeleaf
thymeleaf
3.0.9.RELEASE
org.thymeleaf
thymeleaf-spring4
3.0.9.RELEASE
Обратите внимание, что для проекта Spring 4 библиотекаthymeleaf-spring4 должна использоваться вместоthymeleaf-spring5. Последнюю версию зависимостей можно найтиhere.
Нам также понадобится зависимость для диалекта настраиваемых макетов:
nz.net.ultraq.thymeleaf
thymeleaf-layout-dialect
2.3.0
Последнюю версию можно найти наMaven Central Repository.
3. Конфигурация диалекта макета Thymeleaf
В этом разделе мы обсудим, как настроить Thymeleaf для использованияLayout Dialect. Если вы хотите сделать шаг назад и посмотреть, как настроить Thymeleaf 3.0 в своем проекте веб-приложения, проверьте этотtutorial.
После того как мы добавим зависимость Maven как часть проекта, нам нужно будет добавитьLayout Dialect в наш существующий механизм шаблонов Thymeleaf. Мы можем сделать это с помощью конфигурации Java:
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.addDialect(new LayoutDialect());Или с помощью конфигурации файла XML:
При оформлении разделов содержимого и шаблонов макета по умолчанию используется размещение всех элементов содержимого после элементов макета.
Иногда нам нужно более умное объединение элементов, позволяющее группировать сходные элементы (js-скрипты вместе, таблицы стилей вместе и т. Д.).
Для этого нам нужно добавить стратегию сортировки в нашу конфигурацию - в нашем случае это будет стратегия группировки:
engine.addDialect(new LayoutDialect(new GroupingStrategy()));или в XML:
Стратегия по умолчанию заключается в добавлении элементов. С учетом вышесказанного у нас будет все отсортировано и сгруппировано.
Если ни одна из стратегий не соответствует нашим потребностям, мы можем реализовать собственныйSortingStrategy и передать его диалекту, как указано выше.
4. Возможности процессоров пространств имен и атрибутов
После настройки мы можем начать использовать пространство именlayout и пять новых процессоров атрибутов:decorate,title-pattern,insert,replace иfragment..
Чтобы создать шаблон макета, который мы хотим использовать для наших файлов HTML, мы создали следующий файл с именемtemplate.html:
...
Как видим, мы изменили пространство имен со стандартногоxmlns:th=”http://www.thymeleaf.org” наxmlns:layout=”http://www.ultraq.net.nz/thymeleaf/layout”.
Теперь мы можем начать работать с обработчиками атрибутов в ваших HTML-файлах.
4.1. layout:fragmentс
Чтобы создать пользовательские разделы в нашем макете или повторно используемые шаблоны, которые можно заменить разделами с тем же именем, мы используем атрибутfragment внутри нашего телаtemplate.html:
New dialect example
Your page content goes here
Обратите внимание, что есть два раздела, которые будут заменены нашим собственным HTML-контентом и нижним колонтитулом.
Также важно написать HTML-код по умолчанию, который будет использоваться, если какой-либо из фрагментов не будет найден.
4.2. layout:decorateс
Следующим шагом, который нам нужно сделать, является создание HTML-файла, который будет украшен нашим макетом:
Layout Dialect Example
This is a custom content that you can provide
Как показано в третьей строке, мы используемlayout:decorate и указываем источник декоратора. Все фрагменты из файла макета, которые соответствуют фрагментам в файле содержимого, будут заменены его пользовательской реализацией.
4.3. layout:title-patternс
Учитывая, чтоLayout dialect автоматически заменяет заголовок макета тем, который находится в шаблоне содержимого, вы можете сохранить части заголовка, найденные в макете.
Например, мы можем создать панировочные сухари или сохранить название сайта в заголовке страницы. В этом случае на помощь приходит процессорlayout:title-pattern. Все, что вам нужно указать в вашем файле макета:
example Таким образом, окончательный результат для файла макета и содержимого, представленного в предыдущем абзаце, будет выглядеть следующим образом:
example - 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; если вы хотите узнать, как перенести свой проект, следуйте этомуprocedure.
Полную реализацию этого руководства можно найти вthe GitHub project.
How to test? Мы предлагаем сначала поиграть с браузером, а затем также проверить существующие тесты JUnit.
Помните, что вы можете создавать макеты, используя вышеупомянутыйLayout Dialect, или вы можете легко создать свое собственное решение. Надеемся, что эта статья даст вам больше понимания этой темы, и вы найдете предпочтительный подход в зависимости от ваших потребностей.