So standardisieren Sie die Kopf- und Fußzeile jeder HTML-Seite in einer Webanwendung, die mit Spring Boot und Thymeleaf erstellt wurde
Ich werde die Java-Seite weglassen, aber die Anordnung von Vorlage und statischem Inhalt sieht so aus.
dir
src/main/resources
├── static
│ ├── css
│ │ ├── common.css
│ │ └── top.css
│ └── js
│ └── datepicker.js
└── templates
├── common.html
└── index.html
Wenn Spring Boot unter "Vorlagen" auf CSS- oder JS-Dateien aus HTML verweist,
Da static das Stammverzeichnis ist, ist es wie folgt konfiguriert.
common.html
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)Fragmentieren Sie den Kopf, den Sie teilen möchten-->
<head th:fragment="meta_header(title,links,scripts)">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- (2)CSS gemeinsam zu lesen/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)Titelformat-->
<title th:text="${title}+' | sample app'">Jeder Seitentitel| sample app</title>
<!-- (4)Was wird in jeder Ansicht eindeutig gelesen-->
<th:block th:replace="${links} ?: _" />
<th:block th:replace="${scripts} ?: _" />
</head>
<body>
<!-- (5)Fragmentieren Sie die Teile, die Sie im Körper standardisieren möchten-->
<header th:fragment="header">
<h1><a th:href="@{'/'}">sample app</a></h1>
</header>
</body>
</html>
(1) Da der Fragmentname ein Argument annehmen kann, setzen Sie "title, links, scripts" als Argument.
(2) Beschreiben Sie das CSS / JS, das auf jeder Seite gemeinsam gelesen wird.
(3) Setzen Sie das Seitentitelformat mit dem Argumenttitel auf th: text =" "
(4) Fügen Sie das auf jeder Seite gelesene CSS / JS mit "th: replace" ein
Wenn bei Verwendung des unverarbeiteten Tokens (?: _)$ {links}null ist, fehlt th: block selbst.
(5) Wenn es etwas gibt, das Sie im Körper gemeinsam machen möchten, verwenden Sie "th: fragment", um es zu einem Teil zu machen.
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<!-- (1)Durch gemeinsamen Header ersetzen-->
<head th:replace="common :: meta_header('top',~{::link},~{::script})">
<!-- (2)CSS, das für diese Seite eindeutig geladen werden soll/JS -->
<link rel="stylesheet" th:href="@{/css/top.css}" />
<script type="text/javascript" th:src="@{/js/datepicker.js}"></script>
</head>
<body>
<!-- (3)Nennen Sie gemeinsame Teile-->
<div th:replace="common :: header"></div>
<h2>top page</h2>
</body>
(1) Ersetzen Sie "header" durch den in "common.html" definierten, indem Sie ein Argument übergeben.
(2) Definieren Sie eine Datei, die eindeutig auf dieser Seite gelesen werden soll (index.html in diesem Beispiel).
(3) Ersetzen Sie gemeinsame Teile durch th: replace =" Seitenname :: Fragmentname "
So standardisieren Sie Kopf- und Fußzeilen in Spring Boot Tutorial: Using Thymeleaf
Recommended Posts