Beim Erstellen einer Anwendung mit Thymeleaf wollte ich die Version für jede Anwendung definieren, daher ist dies zu diesem Zeitpunkt eine Arbeitsnotiz.
Dieses Mal werde ich Maven verwenden. BootStrap4 verfügt über eine Funktion, die zusätzlich zu ihrem eigenen Stylesheet jQuery verwendet. Geben Sie daher die entsprechende Version an. Informationen zu pom.xml finden Sie im Anhang unten.
Die CSS / JavaScript-Spezifikationen für Bootstrap mit WebJars lauten wie folgt.
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Title</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.min.css}" />
</head>
<body>
<div th:text="${hello}"></div>
<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>
</body>
</html>
Die Spezifikationsmethode in Thymeleaf lautet "@ {/ webjars / Installationspaket / Version / Pfad zur Ressource}".
Anstatt die Bootstrap- oder jQuery-Version in der Vorlage festzulegen, können Sie sie auch in den Spring-Einstellungen lesen. Das folgende Beispiel beschreibt die Spring-Einstellungen in application.yml und liest diesen Inhalt.
application.yml
webjars:
bootstrap: "4.2.1"
jquery: "3.3.1-1"
Es gibt verschiedene Möglichkeiten, aber dieses Mal wird eine Konfigurationsklasse in der Spring Management Bean als "@ Component" behandelt.
WebjarsConfig.java
import org.springframework.boot.context.properties.ConfigurationProperties;
import org.springframework.stereotype.Component;
import lombok.Data;
@Component
@ConfigurationProperties(prefix = "webjars")
@Data
public class WebjarsConfig {
private String bootstrap;
private String jquery;
}
Beachten Sie, wie Sie die Anker-URL festlegen und auf den Wert aus der Spring Management Bean verweisen.
index.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<title>Title</title>
<link rel="stylesheet" th:href="@{/webjars/bootstrap/{version}/css/bootstrap.min.css(version=${@webjarsConfig.bootstrap})}" />
</head>
<body>
<div th:text="${hello}"></div>
<script th:src="@{/webjars/jquery/{version}/jquery.min.js(version=${@webjarsConfig.jquery})}"></script>
<script th:src="@{/webjars/bootstrap/{version}/js/bootstrap.min.js(version=${@webjarsConfig.bootstrap})}"></script>
</body>
</html>
Um eine Variable in th: src festzulegen, schließen Sie die Variable in {} ein und geben Sie sie am Ende der URL an (Variable = $ {Wert gebunden von Spring}).
Da wir die WebjarsConfig früher ohne den Namen "@ Component" festgelegt haben, lautet der referenzierte Name "webjarsConfig".
Appendix
Windows10 / SpringBoot 2.1.2
pom.xml
pom.xml
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>com.github.a-pz</groupId>
<artifactId>spring-thymeleaf-bootstrap4</artifactId>
<version>0.0.1-SNAPSHOT</version>
<packaging>jar</packaging>
<name>spring-thymeleaf-bootstrap4</name>
<description>spring-thymeleaf-bootstrap4</description>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.1.2.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<scope>runtime</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>bootstrap</artifactId>
<version>4.2.1</version>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>jquery</artifactId>
<version>3.3.1-1</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-configuration-processor</artifactId>
<optional>true</optional>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
Recommended Posts