1. Введение
Thymeleaf — это механизм шаблонов Java для обработки и создания HTML, XML, JavaScript, CSS и обычного текста. Чтобы познакомиться с Thymeleaf и Spring, ознакомьтесь с этой статьей .
В этой статье мы сосредоточимся на шаблонах — на том, что так или иначе приходится делать большинству достаточно сложных сайтов. Проще говоря, страницы должны иметь общие компоненты страницы, такие как верхний и нижний колонтитулы, меню и, возможно, многое другое.
Thymeleaf решает эту проблему с помощью пользовательских диалектов — вы можете создавать макеты, используя стандартную систему макетов Thymeleaf или диалект макетов, который использует шаблон декоратора для работы с файлами макетов.
В этой статье мы обсудим несколько особенностей Thymeleaf Layout Dialect , которые можно найти здесь . Чтобы быть более конкретным, мы обсудим его функции, такие как создание макетов, настраиваемых заголовков или слияние элементов заголовка.
2. Зависимости Maven
Во-первых, давайте посмотрим на необходимую конфигурацию, необходимую для интеграции Thymeleaf с Spring. В наших зависимостях требуется библиотека thymeleaf-spring :
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
<dependency>
<groupId>org.thymeleaf</groupId>
<artifactId>thymeleaf-spring5</artifactId>
<version>3.0.11.RELEASE</version>
</dependency>
Обратите внимание, что для проекта Spring 4 вместо тимелеаф-спринг5 необходимо использовать библиотеку тимелеаф-спринг4 . Последнюю версию зависимостей можно найти здесь .
Нам также понадобится зависимость для диалекта пользовательских макетов:
<dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.4.1</version>
</dependency>
Последнюю версию можно найти в Maven Central Repository .
3. Конфигурация диалекта макета Thymeleaf
В этом разделе мы обсудим, как настроить Thymeleaf для использования Layout Dialect . Если вы хотите сделать шаг назад и посмотреть, как настроить Thymeleaf 3.0 в своем проекте веб-приложения, ознакомьтесь с этим руководством .
Как только мы добавим зависимость Maven как часть проекта, нам нужно будет добавить диалект макета в наш существующий механизм шаблонов Thymeleaf. Мы можем сделать это с помощью конфигурации Java:
SpringTemplateEngine engine = new SpringTemplateEngine();
engine.addDialect(new LayoutDialect());
Или с помощью конфигурации файла XML:
<bean id="templateEngine" class="org.thymeleaf.spring5.SpringTemplateEngine">
<property name="additionalDialects">
<set>
<bean class="nz.net.ultraq.thymeleaf.LayoutDialect"/>
</set>
</property>
</bean>
При оформлении разделов шаблонов содержимого и макета поведение по умолчанию заключается в размещении всех элементов содержимого после элементов макета.
Иногда нам нужно более разумное объединение элементов, позволяющее группировать похожие элементы вместе (скрипты js вместе, таблицы стилей вместе и т. д.).
Для этого нам нужно добавить в нашу конфигурацию стратегию сортировки — в нашем случае это будет стратегия группировки:
engine.addDialect(new LayoutDialect(new GroupingStrategy()));
или в XML:
<bean class="nz.net.ultraq.thymeleaf.LayoutDialect">
<constructor-arg ref="groupingStrategy"/>
</bean>
Стратегия по умолчанию заключается в добавлении элементов. С учетом вышеизложенного у нас все будет отсортировано и сгруппировано.
Если ни одна из стратегий нам не подходит, мы можем реализовать собственную стратегию сортировки и передать ее диалекту, как описано выше.
4. Функции процессоров пространств имен и атрибутов
После настройки мы можем начать использовать пространство имен layout и пять новых обработчиков атрибутов: decor , title-pattern , insert , replace и fragment.
Чтобы создать шаблон макета, который мы хотим использовать для наших файлов HTML, мы создали следующий файл с именем template.html :
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
...
</html>
Как мы видим, мы изменили пространство имен со стандартного xmlns:th="http://www.thymeleaf.org" на xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" .
Теперь мы можем начать работать с обработчиками атрибутов в наших HTML-файлах.
4.1. макет:фрагмент
Чтобы создать настраиваемые разделы в нашем макете или повторно используемые шаблоны, которые можно заменить разделами с тем же именем, мы используем атрибут фрагмента внутри нашего тела template.html :
<body>
<header>
<h1>New dialect example</h1>
</header>
<section layout:fragment="custom-content">
<p>Your page content goes here</p>
</section>
<footer>
<p>My custom footer</p>
<p layout:fragment="custom-footer">Your custom footer here</p>
</footer>
</body>
Обратите внимание, что есть два раздела, которые будут заменены нашим пользовательским HTML — контент и нижний колонтитул.
Также важно написать HTML по умолчанию, который будет использоваться, если какой-либо из фрагментов не будет найден.
4.2. макет:украсить
Следующим шагом, который нам нужно сделать, является создание HTML-файла, который будет оформлен нашим макетом:
<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorate="~{template.html}">
<head>
<title>Layout Dialect Example</title>
</head>
<body>
<section layout:fragment="custom-content">
<p>This is a custom content that you can provide</p>
</section>
<footer>
<p layout:fragment="custom-footer">This is some footer content
that you can change</p>
</footer>
</body>
</html>
Как показано в 3-й строке, мы используем layout:decorate и указываем источник декоратора. Все фрагменты из файла макета, совпадающие с фрагментами в файле содержимого, будут заменены его пользовательской реализацией.
4.3. layout:шаблон заголовка
Учитывая, что диалект макета автоматически переопределяет заголовок макета тем, который находится в шаблоне содержимого, вы можете сохранить части заголовка, найденные в макете.
Например, мы можем создать хлебные крошки или сохранить название веб-сайта в заголовке страницы. В этом случае на помощь приходит процессор layout:title-pattern . Все, что вам нужно указать в файле макета, это:
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">ForEach</title>
Таким образом, окончательный результат для файла макета и содержимого, представленного в предыдущем пункте, будет выглядеть так:
<title>ForEach - Layout Dialect Example</title>
4.4. макет: вставить/макет: заменить
Первый обработчик, layout:insert , похож на оригинальный th:insert Thymeleaf , но позволяет передавать целые фрагменты HTML во вставленный шаблон. Это очень полезно, если у вас есть некоторый HTML-код, который вы хотите использовать повторно, но содержимое которого слишком сложно для определения или создания только с помощью переменных контекста.
Второй, layout:replace , похож на первый, но с поведением th:replace , который фактически заменит тег хоста кодом определенного фрагмента.
5. Вывод
В этой статье мы описали несколько способов реализации макетов в Thymeleaf.
Обратите внимание, что в примерах используется Thymeleaf версии 3.0; если вы хотите узнать, как перенести свой проект, следуйте этой процедуре .
Полную реализацию этого туториала можно найти в проекте GitHub .
Как проверить? Мы предлагаем сначала поиграть с браузером, а затем также проверить существующие тесты JUnit.
Помните, что вы можете создавать макеты, используя вышеупомянутый диалект макета , или вы можете легко создать свое собственное решение. Надеюсь, эта статья даст вам больше информации по этой теме, и вы найдете предпочтительный подход в зависимости от ваших потребностей.