Lors de la création d'une application avec Thymeleaf, je voulais définir la version de chaque application, c'est donc un mémo de travail à ce moment-là.
Cette fois, j'utiliserai maven. BootStrap4 a une fonction qui utilise jQuery en plus de sa propre feuille de style, spécifiez donc la version correspondante. Pour pom.xml, reportez-vous à l'annexe ci-dessous.
Les spécifications CSS / JavaScript pour Bootstrap à l'aide de WebJars sont les suivantes.
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>
La méthode de spécification dans Thymeleaf est @ {/ webjars / installation package / version / path to resource}.
Au lieu de définir la version Bootstrap ou jQuery dans le modèle, vous pouvez également le lire à partir des paramètres Spring. L'exemple suivant décrit les paramètres Spring dans application.yml et lit ce contenu.
application.yml
webjars:
bootstrap: "4.2.1"
jquery: "3.3.1-1"
Il y a plusieurs façons, mais cette fois nous traiterons une classe de configuration comme @ Component dans le bean de gestion Spring.
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;
}
Notez comment définir l'URL d'ancrage et comment faire référence à la valeur du bean de gestion Spring.
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>
Pour définir une variable dans th: src, placez la variable dans {} et spécifiez-la à la fin de l'URL (variable = $ {value bound from Spring}).
Puisque nous avons défini le WebjarsConfig plus tôt sans le nom @ Component, le nom référencé sera 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