Диалектный макет — это диалект Thymeleaf, который позволяет пользователям создавать макеты и шаблоны для повторного использования HTML-кода.
Он имеет иерархический подход и использует шаблон декоратора для «украшения» файлов макета.
Layout Dialect — это отдельный проект, который не поставляется с Thymeleaf. Тем не менее, он имеет открытый исходный код, доступен на GitHub, хорошо документирован и, судя по всему, также хорошо поддерживается.
Монтаж
Нам нужно будет добавить стартовый пакет Thymeleaf в ваш Spring Boot pom:Однако, начиная с Spring Boot 2, этого уже недостаточно.<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Диалект pom не является частью Spring Boot, и нам придется добавить его самостоятельно: <dependency>
<groupId>nz.net.ultraq.thymeleaf</groupId>
<artifactId>thymeleaf-layout-dialect</artifactId>
<version>2.3.0</version>
</dependency>
В примерах кода также используется Bootstrap, поэтому вам также необходимо добавить веб-файлы: <dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.0.0</version>
</dependency>
В качестве последнего шага нам нужно создать bean-компонент LayoutDialect в аннотированном классе @Configuration. @Bean
public LayoutDialect layoutDialect() {
return new LayoutDialect();
}
Давайте двигаться дальше.
Пример диалекта макета
Этот пример покажет, как мы можем использовать Layout Dialect для определения макетов наших страниц, чтобы мы могли лучше повторно использовать код: используя страницу index.html, которая использует Layout.html в качестве макета.Имя Layout.html произвольное и может быть любым.
Добавлено еще несколько файлов, но они предназначены только для демонстрационных целей.
На рисунке показана структура папки ресурса.
Spring Boot автоматически найдет все шаблоны Thymeleaf в каталоге resources/templates.
Макет.html
<!DOCTYPE html>
<html>
<head>
<title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Igorski.co</title>
<meta http-equiv="Content-Type" content="текст/html; кодировка = UTF-8"/>
<link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" rel="stylesheet" media="screen" />
</head>
<body>
<div th:replace="fragments/header :: header"> This header content is going to be replaced.</div>
<div class="container">
<div class="row">
<div class="col-2" layout:fragment="sidebar">
<h1>This is the layout's sidebar</h1>
<p>This content will be replaced if the page
using the layout also defines a layout:fragment="sidebar" segment.</p>
</div>
<div class="col" layout:fragment="content">
<h1>This is the Layout's main section</h1>
<p>This content will be replaced if the page
using the layout also defines a layout:fragment="content" segment. </p>
</div>
</div>
</div>
<footer th:insert="fragments/footer :: footer" class="footer">
This content will remain, but other content will be inserted after it.
</footer>
</body>
</html>В макет.html используются два из пяти процессоров , представленный в диалекте макета.
Во-первых, это макет: процессор шаблонов заголовков .
Процессор шаблонов заголовков помогает пользователю определить лучший заголовок для полученной страницы.
В этом примере окончательный заголовок определяется как комбинация заголовка страницы и заголовка макета.
Для этого используются два специальных токена, предусмотренных в Layout Dialect: $LAYOUT_TITLE И $CONTENT_TITLE .
Два заполнителя (или фрагмента), определенные макетом, имеют наибольшее значение в файле Layout.html: процессор фрагментов .
Этот процессор позволяет нам определять заполнители контента в наших макетах.
Содержимое этих заполнителей позже будет заменено содержимым страниц, использующих макет. В примере определяются два разных фрагмента: один для боковой панели и один для основного контента.
Однако мы можем иметь столько фрагментов, сколько захотим, при условии, что все они будут иметь разные имена.
Индекс.
html <!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml " layout:decorate="~{layouts/layout }">
<head>
<title>Home Page</title>
<meta name="viewport" content="ширина = ширина устройства, начальный масштаб = 1, сжатие = нет">
<link th:href="@{/css/core.css }" rel="stylesheet" media="screen" />
</head>
<body>
<div class="container">
<div class="row">
<div class="col-2" layout:fragment="sidebar ">
<h1>Sidebar</h1>
<a href="#">Login</a>
</div>
<div class="col" layout:fragment="content ">
<h1>Welcome to the Index page</h1>
<br>This content is replacing the content of the layout:fragment="content "<br>
placeholder in layout.html</p>
</div>
</div>
</div>
</body>
</html>
Мы заявляем, что index.html использует Layout.html в качестве макета с процессором Layout: Decorate. Делая это, мы заявляем, что index.html будет использовать шаблон Layout.html. Самое главное здесь — использовать процессор фрагментов .
Он определяет контент, который будет использоваться вместо содержимого одноименных фрагментов макета.
Еще одна вещь, о которой стоит упомянуть, это заголовок .
На результирующей странице index.html, которую мы получим после обработки, заголовок будет представлять собой комбинацию двух заголовков, одного из index.html, а другого из макета.
Они будут объединены.
И Layout.html, и index.html можно просмотреть в браузере без какой-либо обработки.
Но после обработки мы видим, что index.html сильно отличается.
Содержимое index.html используется для стилизации макета и размещения содержимого в макете в зависимости от того, что определяет макет. Пример содержит два других элемента: заголовок и нижний колонтитул.
Однако они используют процессоры th:replace и th:insert стандартного макета Thymeleaf. Очень похоже на последние два из пяти процессоров, представленных в Layout Dialect, Layout:insert и Layout:replace. .
Они более или менее делают то же самое.
В отличие от предыдущих процессоров, которые мы обсуждали, эти два используют инклюзивный, а не иерархический подход. Это более характерно для формы типа Thymeleaf. 
На рисунке показан окончательный вид страницы.
У него есть как верхний, так и нижний колонтитул, хотя ни один из них не упоминается в разметке index.html. Теги: #java #Thymeleaf
-
Рейтинг Mail.ru: Новые Возможности
19 Oct, 24 -
Ручка Со Встроенным Rgb-Сканером.
19 Oct, 24 -
Как Сломать Браузер Safari
19 Oct, 24 -
Разработка Браузера — Уровень Представления
19 Oct, 24
