1. введение
Thymeleaf – это движок шаблонов Java для обработки и создания HTML, XML, JavaScript, CSS и обычного текста. Для введения в Thymeleaf и Spring взгляните на эту запись .
В этой статье мы сосредоточимся на шаблонах-то, что большинство достаточно сложных сайтов должны делать так или иначе. Проще говоря, страницы должны совместно использовать общие компоненты страницы, такие как верхний и нижний колонтитулы, меню и, возможно, многое другое.
Thymeleaf обращается к этому с помощью пользовательских диалектов – вы можете создавать макеты, используя стандартную систему компоновки Thymeleaf или диалект Layout , который использует шаблон декоратора для работы с файлами макетов.
В этой статье мы обсудим несколько особенностей диалекта компоновки Thymeleaf , которые можно найти здесь . Чтобы быть более конкретным, мы обсудим его функции, такие как создание макетов, пользовательские заголовки или слияние элементов заголовка.
2. Зависимости Maven
Во-первых, давайте рассмотрим необходимую конфигурацию, необходимую для интеграции Thymeleaf с Spring. В наших зависимостях требуется библиотека thymeleaf-spring :
org.thymeleaf thymeleaf 3.0.11.RELEASE org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE
Обратите внимание, что для проекта Spring 4 библиотека thymeleaf-spring4 должна использоваться вместо thymeleaf-spring 5 . Последнюю версию зависимостей можно найти здесь .
Нам также понадобится зависимость для диалекта пользовательских макетов:
nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 2.4.1
Последнюю версию можно найти в Центральном репозитории Maven .
3. Конфигурация диалекта макета Thymeleaf
В этом разделе мы обсудим, как настроить Thymeleaf для использования диалекта компоновки . Если вы хотите сделать шаг назад и посмотреть, как настроить Thymeleaf 3.0 в своем проекте веб-приложения, пожалуйста, ознакомьтесь с этим учебником .
Как только мы добавим зависимость Maven как часть проекта, нам нужно будет добавить диалект Layout в наш существующий механизм шаблонов Thymeleaf. Мы можем сделать это с помощью конфигурации Java:
SpringTemplateEngine engine = new SpringTemplateEngine(); engine.addDialect(new LayoutDialect());
Или с помощью конфигурации XML-файла:
При оформлении разделов шаблонов содержимого и макета поведение по умолчанию заключается в размещении всех элементов содержимого после элементов макета.
Иногда нам нужно более разумное объединение элементов, позволяющее группировать похожие элементы вместе (сценарии js вместе, таблицы стилей вместе и т. Д.).
Для этого нам нужно добавить стратегию сортировки в нашу конфигурацию – в нашем случае это будет стратегия группировки:
engine.addDialect(new LayoutDialect(new GroupingStrategy()));
или в XML:
Стратегия по умолчанию заключается в добавлении элементов. С учетом вышесказанного у нас все будет отсортировано и сгруппировано.
Если ни одна из стратегий не соответствует вашим потребностям, мы можем реализовать вашу собственную Стратегию сортировки и передать ее на диалект, как описано выше.
4. Возможности процессоров пространства имен и атрибутов
После настройки мы можем начать использовать пространство имен layout и пять новых процессоров атрибутов: decorate , title-pattern , insert , replace и fragment.
Чтобы создать шаблон макета, который мы хотим использовать для ваших HTML-файлов, мы создали следующий файл с именем template.html :
...
Как мы видим, мы изменили пространство имен из стандартного xmlns:th=”http://www.thymeleaf.org” to xmlns:layout=”http://www.ultraq.net.nz/thymeleaf/layout” .
Теперь мы можем начать работать с процессорами атрибутов в наших HTML-файлах.
4.1. макет:фрагмент
Для создания пользовательских разделов в макете или многоразовых шаблонов, которые могут быть заменены разделами с одинаковым именем, мы используем атрибут fragment внутри нашего template.html тело:
New dialect example
Your page content goes here
Обратите внимание, что есть два раздела, которые будут заменены нашим пользовательским HTML – контентом и нижним колонтитулом.
Также важно написать HTML-код по умолчанию, который будет использоваться, если какой-либо из фрагментов не будет найден.
4.2. макет:украсить
Следующий шаг, который нам нужно сделать, – это создать HTML-файл, который будет украшен нашим макетом:
Layout Dialect Example This is a custom content that you can provide
Как показано в 3-й строке, мы используем layout:decorate и указываем источник декоратора. Все фрагменты из файла макета, соответствующие фрагментам в файле содержимого, будут заменены его пользовательской реализацией.
4.3. макет:заголовок-шаблон
Учитывая, что диалект Layout автоматически переопределяет заголовок макета тем, который находится в шаблоне содержимого, вы можете сохранить части заголовка, найденного в макете.
Например, мы можем создать панировочные сухари или сохранить название веб-сайта в заголовке страницы. В этом случае вам поможет процессор layout:title-pattern . Все, что вам нужно указать в файле макета, это:
Baeldung
Таким образом, конечный результат для файла макета и содержимого, представленного в предыдущем абзаце, будет выглядеть следующим образом:
Baeldung - Layout Dialect Example
4.4. макет:вставка/макет:замена
Первый процессор, layout:insert , похож на оригинал Thymeleaf th:insert , но позволяет передавать все фрагменты HTML во вставленный шаблон. Это очень полезно, если у вас есть какой-то HTML, который вы хотите повторно использовать, но содержимое которого слишком сложно определить или построить только с помощью контекстных переменных.
Второй, layout:replace , похож на первый, но с поведением th:replace , который фактически заменит тег хоста кодом определенного фрагмента.
5. Заключение
В этой статье мы описали несколько способов реализации макетов в Thymeleaf.
Обратите внимание, что в примерах используется Thymeleaf версии 3.0; если вы хотите узнать, как перенести свой проект, пожалуйста, следуйте этой процедуре .
Полную реализацию этого руководства можно найти в проекте GitHub .
Как проверить? Наше предложение состоит в том, чтобы сначала поиграть с браузером, а затем проверить существующие тесты JUnit.
Помните, что вы можете создавать макеты, используя вышеупомянутый Диалект макета или вы можете легко создать свое собственное решение. Надеюсь, эта статья даст вам больше информации по этой теме, и вы найдете свой предпочтительный подход в зависимости от ваших потребностей.