diseño de página de hoja de tomillo
Una vez que esté familiarizado con la gramática y las expresiones de Thymeleaf, será más útil desarrollarlo más adelante. A continuación, eche un vistazo a cómo Thymeleaf implementa un diseño de página de sistema web completo.
1. Introduzca fragmentos de código
A menudo, en las plantillas, desea incluir contenido de otras páginas de plantilla, como pies de página, encabezados, menús, etc. Para ello, Thymeleaf aporta th:fragmentpropiedades. A continuación, se muestra cómo introducir fragmentos de código agregando un pie de página de derechos de autor estándar a la página.
Paso 01 Defina el fragmento de código de pie de página de derechos de autor.
Cree una página de plantilla de derechos de autor footer.html en el directorio de plantillas, el código de muestra es el siguiente:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copyright">
© 2020 The Thymeleaf footer
</div>
</body>
</html>
En el ejemplo anterior, creamos la página de copyright footer.html y definimos un fragmento de código llamado copyright usando el atributo th:fragment.
El paso 02 presenta la plantilla de fragmento de código.
Cree un diseño de página de plantilla normal.html. Use th:inserto th:replace atributo para importar la página de derechos de autor previamente definida, el código de muestra es el siguiente:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<body>
<h1>Thymeleaf模板引擎</h1>
<h3>页面布局</h3>
<div th:insert="~{footer :: copyright}"></div>
</body>
</html>
En el ejemplo anterior, el fragmento de código de derechos de autor definido previamente en footer.html se importa a través de th:insert en layout.html, “～{footer :: copyright}”que es el fragmento de derechos de autor en la plantilla footer.html introducida en la página de plantilla actual.
El paso 03 inicia la verificación.
Después de iniciar el proyecto, ingrese la dirección http://localhost:8080/layout en el navegador para verificar si la página de inicio normalmente puede importar el fragmento de código footer.html, como se muestra en la figura.
La página layout.html incluye correctamente la información de copyright de la página de pie de página en la página de inicio a través del atributo th:insert.
2. Especificación de gramática de expresión de fragmento
Las expresiones de fragmentos de Thymeleaf son muy prácticas y pueden realizar la reutilización de páginas de plantilla, evitando la necesidad de modificar varias páginas para el mismo contenido.
2.1 Selector de etiquetas
La sintaxis de una expresión de fragmento es muy simple y su núcleo es un selector de marcado, que está definido por la biblioteca de análisis AttoParser subyacente, similar a una expresión XPath o un selector CSS. Las expresiones fragmentadas tienen los siguientes 3 formatos diferentes:
1) ～{templatename::selector}：Contiene dos parámetros, templatename y selector, donde templatename es el nombre de la plantilla de página y selector es el fragmento de código definido en la plantilla. Por ejemplo, en el ejemplo anterior, “～{footer :: copyright}”el fragmento de derechos de autor en la plantilla footer.html se introduce en la página de la plantilla actual.
2) ～{templatename}：Ingrese la plantilla completa denominada templatename.
3) ～{::selector}O bien, ～{this::selector}：Thymeleaf admite la inserción de un fragmento de la misma plantilla. Si no se encuentra en la plantilla actual, pasará a la plantilla procesada inicialmente hasta que el selector coincida con la plantilla correspondiente.
Además, el nombre de la plantilla y el selector del selector de etiquetas también pueden contener otra sintaxis de expresión, como el juicio condicional o la operación ternaria, como:
<div th:insert="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>
Al juzgar si el usuario en segundo plano es un administrador o no, se introduce el fragmento de código correspondiente para realizar la distinción de página entre administradores y usuarios normales.
2.2 Plantillas comunes de referencia
Los selectores de marcado son muy potentes y pueden contener fragmentos que no usan ningún atributo th:fragment, o incluso código de marcado de una aplicación diferente que no conoce Thymeleaf en absoluto:
<div id="copy-section">
© 2023 The Thymeleaf footer
</div>
Podemos usar el fragmento anterior simplemente haciendo referencia a él a través de su atributo id, similar a los selectores de CSS:
<div th:insert="~{footer :: #copy-section}"></div>
2.3 La diferencia entre th:insert, th:replace y th:include
Las funciones de th:insert, th:replace y th:include son básicamente similares, y las diferencias entre las tres son las siguientes:
- th:insert es el más simple, simplemente inserta el fragmento especificado como el cuerpo de su etiqueta de host.
- th:replace en realidad reemplaza su etiqueta de host con el fragmento especificado.
- th:include es similar a th:insert, pero no inserta un fragmento, solo el contenido del fragmento.
3. Fragmentos parametrizables
Thymeleaf admite la especificación de un conjunto de parámetros en el fragmento definido por th:fragment, lo que hace que el fragmento de plantilla se asemeje más a una función repetible. La visualización de la plantilla está controlada por diferentes parámetros, para lograr el efecto de compartir la plantilla.
El fragmento definido a continuación con th:fragment especifica un conjunto de parámetros:
<div th:fragment="frag(onevar, twovar)">
<p th:text="${onevar} + '-' + ${twovar}">...</p>
</div>
El fragmento de fragmento definido contiene dos parámetros y no es necesario definir el tipo de los parámetros.
Al llamar a este fragmento con th:insert o th:replace, debe pasar dos parámetros:
<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>
El paso de parámetros del fragmento es similar a la llamada de función, y la visualización de la página se controla a través de los parámetros pasados.
Combate real: Realice el diseño general de la página.
El diseño general de la página del sistema de procesamiento comercial general es básicamente fijo. El modo de cuadro de uso común divide la página en páginas como el encabezado, la barra de menú izquierda, la cola y el área de visualización central. Podemos usar la función de fragmento de código de Thymeleaf para realizar el diseño general de la página del sistema de la aplicación.
El siguiente ejemplo demuestra cómo Thymeleaf implementa el diseño general de la página.
Paso 01 Cree nuevas páginas de plantillas regionales como footer.html, header.html y left.html en el directorio templates/layout.
El contenido de footer.html es el siguiente:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>footer</title>
</head>
<body>
<footer th:fragment="footer">
<div style="position: fixed; bottom: 0px; background-color: green; width:100%">
<h1 style="text-align:center">我是底部</h1>
</div>
</footer>
</body>
</html>
El contenido de left.html es el siguiente:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>left</title>
</head>
<body>
<left th:fragment="left">
<div style="background-color: red; width:200px;height: 80vh">
<h1 style="margin: 0;">我是左侧</h1>
</div>
</left>
</body>
</html>
El contenido de header.html es el siguiente:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>header</title>
</head>
<body>
<header th:fragment="header">
<div style="background-color: blue; height: 100px">
<h1 style="margin: 0;text-align: center;">我是头部</h1>
</div>
</header>
</body>
</html>
Paso 02 Cree una nueva página index.html en el directorio de plantillas con el siguiente contenido:
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Layout</title>
</head>
<body style="margin: 0px;">
<div th:replace="layout/header :: header"></div>
<div th:replace="layout/left :: left"></div>
<div th:replace="layout/footer :: footer"></div>
</body>
</html>
En el ejemplo anterior, usamos la sintaxis th:replace en la página index.html para introducir el encabezado, el final y la parte izquierda del sitio web en la página.
Paso 03 Agregue una entrada de acceso en el backend.
@RequestMapping("/index")
public String index() {
return "index";
}
Paso 04 Ejecuta la verificación.
Después de completar los tres primeros pasos, visite la dirección http://localhost:8080/layout/index después del inicio y podrá ver el efecto de visualización de la página como se muestra en la figura.
La página index.html ha introducido con éxito el encabezado, la cola y el lado izquierdo de la página para realizar el diseño general de la página. En el proyecto real, index.html se usa como plantilla. Cuando cualquier página usa este diseño, solo se debe reemplazar el contenido central.