El dialecto de
diseño es un dialecto de Thymeleaf que permite a los usuarios crear diseños y plantillas para reutilizar el código HTML. Tiene un enfoque jerárquico y utiliza una plantilla decoradora para "decorar" archivos de diseño. Dialecto de diseño es un proyecto independiente y no se envía con Thymeleaf. Sin embargo, es un código fuente abierto disponible en GitHub, está bien documentado y parece mantenerse también en buenas condiciones.
Instalación
Tendremos que agregar el paquete de inicio Thymeleaf a tu pom Spring Boot:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Sin embargo, comenzando con Spring Boot 2, esto ya no es suficiente. El dialecto de Pom no es parte de Spring Boot, y debemos agregarlo nosotros mismos:
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>2.3.0</version> </dependency>
Los ejemplos de código también usan Bootstrap, por lo que también debe agregar archivos web:
<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency>
Como paso final, necesitamos crear un bean LayoutDialect en la clase @Configuration anotada.
@Bean public LayoutDialect layoutDialect() { return new LayoutDialect(); }
Vamos más allá.
Ejemplo de dialecto de diseño
Este ejemplo mostrará cómo podemos usar Dialecto de diseño para definir diseños para nuestras páginas, de modo que podamos usar mejor el código nuevamente: usando la página index.html, que usa layout.html como diseño. El nombre Layout.html es arbitrario y puede ser cualquier cosa. Allí se agregan algunos archivos más, pero son solo para demostración.
La imagen muestra la estructura de la carpeta de recursos. Spring Boot encontrará automáticamente todas las plantillas de Thymeleaf en el directorio de recursos / plantillas.
Layout.html
<!DOCTYPE html> <html> <head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Igorski.co</title> <meta http-equiv="Content-Type" content="text/html; charset=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>
Layout.html utiliza
dos de los cinco procesadores proporcionados por el Dialecto de diseño. El primero es el diseño:
el procesador de plantillas de encabezado . El procesador de plantillas de encabezado ayuda al usuario a determinar el mejor título para la página resultante. En este ejemplo, define el título final como una combinación del título de la página y el encabezado del diseño. Para esto, se utilizan dos tokens especiales, que se presentan en Dialecto de diseño,
$ LAYOUT_TITLE y
$ CONTENT_TITLE .
De la mayor importancia en layout.html son dos marcadores de posición (o fragmentos) definidos por el diseño:
procesador de fragmentos . Este procesador nos permite definir marcadores de posición de contenido en nuestros diseños. El contenido de estos marcadores de posición luego será reemplazado por el contenido de las páginas que usan el diseño. El ejemplo define dos fragmentos diferentes, uno para la barra lateral y otro para el contenido principal. Sin embargo, podemos tener tantos fragmentos como queramos, siempre que todos tengan nombres diferentes.
Index.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="width=device-width, initial-scale=1, shrink-to-fit=no"> <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>
Declaramos que index.html usa layout.html como su diseño con el diseño: decorar procesador. Una vez hecho esto, declaramos que index.html usará la plantilla layout.html. Lo más importante aquí es el uso del
procesador de fragmentos . Indica el contenido que se utilizará en lugar del contenido de fragmentos del diseño con el mismo nombre. Otra cosa que vale la pena mencionar es el
titular . En la página resultante index.html, que obtenemos, después del procesamiento, el encabezado será una combinación de dos encabezados, uno de index.html y el otro del diseño. Se combinarán.
Tanto layout.html como index.html se pueden ver en el navegador sin ningún procesamiento. Pero después del procesamiento, vemos que index.html es muy diferente. El contenido de index.html se usa para diseñar el diseño y colocar el contenido dentro del diseño en función de lo que define el diseño.
Otros dos elementos están presentes en el ejemplo: el encabezado y el pie de página. Sin embargo, utilizan Thymeleaf Standard Layout th: replace y th: insert procesadores. Muy similar a los
dos últimos de los cinco procesadores presentados en Diagrama de diseño, diseño: insertar y diseño: reemplazar . Más o menos hacen lo mismo. A diferencia de los procesadores anteriores que discutimos, estos dos no utilizan un enfoque jerárquico, sino inclusivo. Esto es más característico de la forma Thymeleaf.
La imagen muestra la vista final de la página. Tiene un encabezado y un pie de página, aunque ninguno de ellos se menciona en el marcado index.html.