[JAVA] Common Part CSS wird im Thymeleaf nicht angewendet

Einführung

Auf der Site, die die Thymeleaf-Layout-Dialektfunktion verwendet, gab es einen Fall, in dem der gemeinsame Teil CSS nicht angewendet wurde, daher werde ich die Gegenmaßnahmen einführen.

Umgebung

OS: macOS Catalina 10.15.6 JDK:14.0.1 Spring Boot 2.3.3 jquery 3.3.1-1 bootstrap 4.2.1

Fehlerübersicht

Wenn CSS erfolgreich auf den gemeinsamen Teil angewendet wurde, werden oben auf dem Bildschirm eine dunkelgrüne Überschrift, ein Logo und ein Suchfenster angezeigt (siehe Abbildung unten). スクリーンショット 2020-09-28 15.01.19.png

Dieses Mal, als ich eine HTML-Datei in einer Hierarchie erstellte, speicherte und ausführte, die tiefer als andere Seiten war, sah es folgendermaßen aus.

Da die im gemeinsamen Teil enthaltene Navigationsleiste, das Logo und das Suchfenster angezeigt werden, scheint die Dialektfunktion des Thymeleaf-Layouts selbst angewendet zu werden, aber das CSS des gemeinsamen Teils wird nicht angewendet.

スクリーンショット 2020-09-28 15.09.26.png

Hierarchie der verwendeten Dateien

Seiten, auf die dieses Mal kein CSS angewendet wurde, werden mit HTML im roten Rahmen erstellt. Da sich die Hierarchie von der Seite unterscheidet, auf die CSS angewendet wird, habe ich angenommen, dass sie durch einen falschen Pfad zu CSS verursacht wurde.

スクリーンショット 2020-09-28 15.18.51.png

Überprüfen Sie den in den Entwicklertools angewendeten CSS-Pfad

Verwenden Sie die Entwicklertools, um zu sehen, welchen Pfad diese Seite für den Zugriff auf CSS nimmt.

Obwohl in der HTML-Datei "css / template.css" steht, ist es tatsächlich "http: // localhost: 8080 / mypage / css / template.css". Und versuchen, auf ein Verzeichnis zuzugreifen, das die CSS-Datei nicht enthält.

スクリーンショット 2020-09-28 15.55.12.png

Der Inhalt des allgemeinen Teils "template.html" wurde korrigiert.

Im head-Element von "template.html", dem HTML des allgemeinen Teils, Fügen Sie unter <link th: href =" @ {css / template.css} "rel =" stylesheet "> </ link> Folgendes hinzu. <link th:href="@{../css/template.css}" rel="stylesheet"></link>

Wie in "Hierarchie der verwendeten Dateien" erläutert, befindet sich "deleteUser.html" eine Ebene unterhalb des HTML-Codes, auf den CSS angewendet wird. "Th: href" ist also "../" (eine Ebene höher). ) `Wird hinzugefügt, damit auf CSS über" deleteUser.html "zugegriffen werden kann.

`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>

Speichern und ausführen

CSS wurde angewendet.

スクリーンショット 2020-09-28 15.01.19.png