Thymeleaf для новичков: оживляем HTML-шаблоны
2026-02-21 04:17 Diff
https://skillbox.ru/media/code/thymeleaf-dlya-novichkov-ozhivlyaem-htmlshablony/

#статьи

  • 13 сен 2024
  • 0

Рассказываем, как работать с популярным веб-шаблонизатором.

Иллюстрация: Оля Ежак для Skillbox Media

Онлайн-журнал для тех, кто влюблён в код и информационные технологии. Пишем для айтишников и об айтишниках.

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

С базой данных веб-приложение «общается» на стороне сервера, например, с помощью Java. Далее информация передаётся клиенту, и после этого её надо правильно вывести на экран пользователя. Чтобы упростить разработчикам задачу и не заставлять выводить все данные вручную, придумали шаблонизаторы. Благодаря им можно быстро раскидать информацию по нужным полям веб-страницы и сэкономить время на вёрстке.

В этой статье рассказываем о популярном шаблонизаторе Thymeleaf («таймлиф») и на примерах показываем, как он работает.

Содержание

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

Задолго до появления Thymeleaf разработчики использовали технологию JSP (JavaServer Pages) с более сложной структурой. Из-за этого программисты тратили много времени на создание самих шаблонов.

Thymeleaf работает с языком программирования Java и обрабатывает не только веб-страницы, в отличие от того же JSP. Он работает с шестью видами шаблонов: HTML, XML, CSS, JavaScript, RAW и обычным текстом. С ними можно работать в нескольких режимах (template mode):

  • Разметочный шаблон (markup template) поддерживает HTML и XML.
  • Текстовый шаблон (textual template) поддерживает CSS и JavaScript.
  • Пустой шаблон (no-op template) поддерживает RAW-файлы.

Шаблоны Thymeleaf отвечают за отображение данных и управление динамическим контентом. С их помощью разработчики могут встраивать выражения и директивы прямо в HTML-код, облегчая процесс создания динамических страниц.

Важно понимать, что Thymeleaf использует собственный синтаксис и работает с данными из объектов, которые передаёт сервер. Эти объекты называются моделями. Например, у нас есть Java-код на сервере, который выполняется, когда пользователь заходит в наше веб-приложение:

@Controller public class HelloController { @GetMapping("/") public String getHello(Model model){ // Добавляем в модель строковые данные String message = "Hello World!"; model.addAttribute("message", message); // Отдаём HTML-страницу hello.html пользователю return "hello"; } }

Если пользователь выполнил вход, то код вернёт HTML-страницу ​​hello.html и встроит в неё модель message, в которой содержится строка Hello World!. Она и должна выводиться на экран пользователя.

Если бы мы разрабатывали сайт с помощью классической вёрстки, то в HTML-файле использовали бы парный тег <h1> для вывода текста:

<h1>Hello World!</h1>

В таком случае веб-приложение всегда будет выводить одно и то же сообщение. Если вдруг надо будет приветствовать пользователя по имени, то придётся создавать новую HTML-страницу и переписывать код на стороне сервера.

Используя шаблоны Thymeleaf, можно на одну и ту же страницу выводить разные данные с сервера. Но при этом придётся слегка модифицировать код на странице:

<h1 th:text="${message}"/>

Атрибут th:text указывает на то, что здесь будет задействован шаблонизатор, а значение внутри фигурных скобок с символом доллара ($) сообщает, что нужно обратиться к переменной message и вывести её значение в этом месте.

Изменим на сервере содержимое переменной на Hello Jack:

// Первый аргумент: Имя переменной // Второй аргумент: Значение переменной model.addAttribute("message", "Hello Jack");

Теперь, когда пользователь зайдёт на нашу страницу, он увидит уже другое сообщение. При этом разработчику не пришлось создавать новую HTML-страницу и переписывать логику на сервере.

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

Для разных типов данных в Thymeleaf есть свои выражения для вывода:

  • Переменные: ${message}
  • Переменные выбора объекта: *{object.variable}
  • Сообщения: #{error}
  • URL: @{/link}
  • Фрагменты: ~{template}

Разберём ещё один пример с передачей шаблона объекта пользователю — переменными выбора. Допустим, на сервере есть класс-модель, предоставляющая информацию о пользователе:

public class User { String username; // Имя пользователя String email; // Email пользователя // Конструктор, принимающий значения переменных public Person(String username, String email) { this.username = username; this.email = email; } }

В классе-контроллере, отвечающем за передачу данных пользователю, мы создаём объект пользователя с именем и адресом электронной почты и добавляем его в модель:

@Controller public class UserController { @GetMapping("/user") public String getUser(Model model){ // Создаём нового пользователя и добавляем его в модель User user = new User("Jack", "jack@test.ru") model.addAttribute("user", user); // Отдаём HTML-страницу user.html пользователю return "user"; } }

В HTML-коде, чтобы вывести значения переменных передаваемого объекта User, используем следующий шаблон:

<ul th:object="${user}"> <li>Имя: <span th:text="*{username}"></span></li> <li>Email: <span th:text="*{email}"></span></li> </ul>

С помощью атрибута th:object мы обращаемся к переменной-объекту, который был передан с сервера. А с помощью конструкции *{variable_name} мы напрямую запрашиваем значения переменных этого объекта.

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

Диалекты Thymeleaf — это своеобразные плагины, с помощью которых можно расширять возможности шаблонизатора, добавлять собственные атрибуты и выражения. По умолчанию Thymeleaf предоставляет разработчикам стандартный диалект (standard dialect), включающий в себя выражения, которые мы уже рассмотрели выше (th:text, th:object). Но существуют и другие конструкции, например:

  • th:if — обработка логических выражений;
  • th:each — перечисление коллекций;
  • th:error — выведение ошибок.

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

Перед тем как использовать Thymeleaf, его нужно подключить к проекту и настроить. При этом важно помнить, что шаблонизатор работает с бэкендом на Java и фреймворке Spring.

Раньше для настройки Thymeleaf требовалось очень много времени и кода. Часто настройка шаблонизатора могла доходить до конфигурации в отдельном XML-файле со своими дескрипторами и атрибутами, а также до подключения системы сборки, например Maven.

Позже появилась технология Spring Boot, и настройка стала занимать меньше времени. Для подключения Thymeleaf достаточно выбрать шаблонизатор при инициализации проекта, а фреймворк Spring сделает всё остальное.

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

Параметры, которые можно менять:

  • prefix — указывает на папку, в которой хранятся HTML-шаблоны.
spring.thymeleaf.prefix=classpath:/templates/
  • suffix — устанавливает расширение файлов, в которых хранятся шаблоны.
spring.thymeleaf.suffix=.html
  • mode — выбор режима обработки шаблонов (HTML, XML, CSS, RAW, JAVASCRIPT, TEXT).
spring.thymeleaf.mode=HTML
  • enabled — с помощью этого параметра можно включить или выключить Thymeleaf в проекте.
spring.thymeleaf.enabled=true
  • encoding — устанавливает кодировку шаблонов.
spring.thymeleaf.encoding=UTF-8
  • Thymeleaf — популярный шаблонизатор с собственным синтаксисом, поддержкой Java и шести форматов, включая HTML, CSS и JavaScript. Шаблонизатор — это ПО для динамического вывода данных на веб-странице.
  • Thymeleaf удобно применять в связке с фреймворком Spring.
  • Шаблоны Thymeleaf — это HTML-файлы, в которые встраиваются необходимые данные с сервера.
Бесплатный курс по Python ➞
Мини-курс для новичков и для опытных кодеров. 4 крутых проекта в портфолио, живое общение со спикером. Кликните и узнайте, чему можно научиться на курсе. Смотреть программу