«1. Введение

Thymeleaf — это шаблонизатор Java для обработки и создания HTML, XML, JavaScript, CSS и простого текста. Чтобы познакомиться с Thymeleaf и Spring, ознакомьтесь с этой статьей.

В этой статье мы сосредоточимся на шаблонах — на том, что так или иначе необходимо делать большинству достаточно сложных сайтов. Проще говоря, страницы должны иметь общие компоненты страницы, такие как верхний и нижний колонтитулы, меню и, возможно, многое другое.

Thymeleaf решает эту проблему с помощью пользовательских диалектов — вы можете создавать макеты, используя стандартную систему макетов Thymeleaf или диалект макетов, — который использует шаблон декоратора для работы с файлами макетов.

В этой статье мы обсудим несколько особенностей Thymeleaf Layout Dialect, которые можно найти здесь. Чтобы быть более конкретным, мы обсудим его функции, такие как создание макетов, настраиваемых заголовков или слияние элементов заголовка.

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

Во-первых, давайте рассмотрим необходимую конфигурацию, необходимую для интеграции 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.

3. Настройка диалекта макета Thymeleaf

В этом разделе мы обсудим, как настроить Thymeleaf для использования диалекта макета. Если вы хотите сделать шаг назад и посмотреть, как настроить 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. Возможности обработчиков пространства имен и атрибутов

После настройки мы можем начать использовать пространство имен макета и пять новых обработчиков атрибутов: декорирование, шаблон заголовка, вставка, замена и фрагментация.

Чтобы создать шаблон макета, который мы хотим использовать для наших файлов 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. layout:fragment

Для того, чтобы создать пользовательские разделы в нашем макете или многократно используемые шаблоны, которые могут быть заменены разделами с тем же именем, мы используем атрибут фрагмента внутри нашего тела 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. layout:decorate

Следующим шагом, который нам нужно сделать, является создание 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:title-pattern. Все, что вам нужно указать в вашем файле макета, это: 

<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Baeldung</title>

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

<title>Baeldung - Layout Dialect Example</title>

4.4. layout:insert/layout:replace

Первый процессор, layout:insert, подобен оригинальному Thymeleaf th:insert, но позволяет передавать целые HTML-фрагменты во вставленный шаблон. Это очень полезно, если у вас есть некоторый HTML-код, который вы хотите использовать повторно, но содержимое которого слишком сложно для определения или создания только с помощью переменных контекста.

Второй, layout:replace, похож на первый, но с поведением th:replace, который фактически заменит тег хоста кодом определенного фрагмента.

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

В этой статье мы описали несколько способов реализации макетов в Thymeleaf.

Обратите внимание, что в примерах используется Thymeleaf версии 3.0; если вы хотите узнать, как перенести свой проект, следуйте этой процедуре.

Полную реализацию этого руководства можно найти в проекте GitHub.

Как проверить? Мы предлагаем сначала поиграть с браузером, а затем также проверить существующие тесты JUnit.

Помните, что вы можете создавать макеты, используя вышеупомянутый диалект макета, или вы можете легко создать свое собственное решение. Надеюсь, эта статья даст вам больше информации по этой теме, и вы найдете предпочтительный подход в зависимости от ваших потребностей.