[JAVA] La partie commune CSS n'est pas appliquée dans thymeleaf
introduction
Sur le site utilisant la fonction de dialecte de mise en page thymeleaf, il y avait un cas où la partie commune css n'était pas appliquée, donc je vais présenter les contre-mesures.
environnement
OS: macOS Catalina 10.15.6 JDK:14.0.1 Spring Boot 2.3.3 jquery 3.3.1-1 bootstrap 4.2.1
Résumé des erreurs
Lorsque css est appliqué avec succès à la partie commune, un en-tête vert foncé, un logo et une fenêtre de recherche seront affichés en haut de l'écran comme indiqué ci-dessous.
Cette fois, lorsque j'ai créé, stocké et exécuté un fichier html dans une hiérarchie plus profonde que les autres pages, c'est devenu comme suit.
Étant donné que la barre de navigation, le logo et la fenêtre de recherche inclus dans la partie commune sont affichés, il semble que la fonction de dialecte de mise en page thymeleaf elle-même soit appliquée, mais le css de la partie commune ne l'est pas.
Hiérarchie des fichiers utilisés
Les pages auxquelles css n'a pas été appliqué cette fois sont créées avec html dans le cadre rouge. Étant donné que la hiérarchie est différente de la page à laquelle le css est appliqué, j'ai supposé qu'elle était causée par un chemin incorrect vers le css.
Vérifiez le chemin css appliqué dans les outils de développement
Utilisez les outils de développement pour voir le chemin emprunté par cette page pour accéder au css.
Bien qu'il indique "css / template.css" sur le fichier html, il s'agit en fait de "http: // localhost: 8080 / mypage / css / template.css". Et en essayant d'accéder à un répertoire qui ne contient pas le fichier css.
Correction du contenu de la partie commune "template.html"
Dans l'élément head de "template.html" qui est le html de la partie commune,
Ajoutez ce qui suit sous <link th: href =" @ {css / template.css} "rel =" stylesheet "> </ link>.
<link th:href="@{../css/template.css}" rel="stylesheet"></link>
Comme expliqué dans "Hiérarchie des fichiers utilisés", "deleteUser.html" est situé un niveau en dessous du html auquel le css est appliqué, donc "th: href" est `../ (un niveau supérieur). ) ʻEst ajouté pour que css soit accessible depuis "deleteUser.html".
template.html
<head>
<meta charset="UTF-8"></meta>
<link th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.min.css}" rel="stylesheet"></link>
<script th:src="@{/webjars/jquery/3.3.1-1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.min.js}"></script>
<link th:href="@{css/template.css}" rel="stylesheet"></link>
<link th:href="@{../css/template.css}" rel="stylesheet"></link>
<script src="https://kit.fontawesome.com/665f18a48e.js" crossorigin="anonymous"></script>
<title>template</title>
</head>
Enregistrer et exécuter
css a été appliqué.
Recommended Posts