Comment standardiser l'en-tête et le pied de page communs à chaque page html dans une application Web créée à l'aide de Spring Boot et Thymeleaf
Je vais omettre le côté Java, mais la disposition du modèle et du contenu statique ressemble à ceci.
dir
src/main/resources
├── static
│ ├── css
│ │ ├── common.css
│ │ └── top.css
│ └── js
│ └── datepicker.js
└── templates
├── common.html
└── index.html
Lorsque Spring Boot fait référence à des fichiers CSS ou JS de HTML sous templates,
Puisque static est le répertoire racine, il est configuré comme ceci.
common.html
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)Fragmentez la tête que vous souhaitez partager-->
<head th:fragment="meta_header(title,links,scripts)">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- (2)CSS à lire en commun/JS -->
<link rel="stylesheet" href="/css/common.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- (3)Format du titre-->
<title th:text="${title}+' | sample app'">Chaque titre de page| sample app</title>
<!-- (4)Ce qui est lu uniquement pour chaque vue-->
<th:block th:replace="${links} ?: _" />
<th:block th:replace="${scripts} ?: _" />
</head>
<body>
<!-- (5)Fragmentez les parties que vous souhaitez standardiser dans le corps-->
<header th:fragment="header">
<h1><a th:href="@{'/'}">sample app</a></h1>
</header>
</body>
</html>
(1) Comme le nom du fragment peut prendre un argument, définissez title, links, scripts comme argument.
(2) Décrivez le CSS / JS qui est lu en commun sur chaque page.
(3) Définissez le format du titre de la page sur th: text =" " en utilisant l'argument title
(4) Insérez le CSS / JS lu sur chaque page en utilisant th: replace
En utilisant le jeton non traité (?: _), si$ {links}est nul, alors th: block lui-même est absent.
(5) S'il y a quelque chose que vous voulez rendre commun dans le corps, utilisez th: fragment pour en faire une partie.
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)Remplacer par un en-tête commun-->
<head th:replace="common :: meta_header('top',~{::link},~{::script})">
<!-- (2)CSS à charger unique sur cette page/JS -->
<link rel="stylesheet" th:href="@{/css/top.css}" />
<script type="text/javascript" th:src="@{/js/datepicker.js}"></script>
</head>
<body>
<!-- (3)Appeler les parties communes-->
<div th:replace="common :: header"></div>
<h2>top page</h2>
</body>
(1) Remplacez header par celui défini dans common.html en passant un argument.
(2) Définissez un fichier à lire uniquement sur cette page (ʻindex.htmldans cet exemple) (3) Remplacez les parties communes parth: replace =" nom de la page :: nom du fragment "`
Comment rendre les en-têtes et les pieds de page communs dans Spring Boot Tutorial: Using Thymeleaf
Recommended Posts