1. 簡介
本快速教程將指導您學習如何在 Thymeleaf 模板中使用 CSS 和 JavaScript。
首先，我們將介紹預期的文件夾結構，以便您知道將文件放在哪裏。之後，我們將學習如何從 Thymeleaf 模板訪問這些文件。
我們首先將為頁面添加 CSS 樣式，然後添加一些 JavaScript 功能。
2. 設置
為了在我們的應用程序中使用 Thymeleaf，讓我們將 Spring Boot Starter for Thymeleaf 添加到我們的 Maven 配置中：
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
<version>3.1.5</version>
</dependency>3. 基本示例
This section provides a basic example to illustrate the usage of the library.
def greet(name):
"""
This function greets the person passed in as a parameter.
It prints a greeting message to the console.
"""
print(f"Hello, {name}!")
greet("World")
3.1. 目錄結構
現在，提醒一下，Thymeleaf 是一種模板庫，可以輕鬆地集成到 Spring Boot 應用程序中。 默認情況下，Thymeleaf 期望我們將模板放在 src/main/resources/templates 文件夾中。 我們可以創建子文件夾，因此對於本示例，我們將使用名為 cssandjs 的子文件夾。
對於 CSS 和 JavaScript 文件，默認目錄是 src/main/resources/static。 讓我們為我們的 CSS 和 JS 文件創建 static/styles/cssandjs 和 static/js/cssandjs 文件夾，分別用於 CSS 和 JS 文件。
3.2. 添加 CSS
讓我們在 static/styles/cssandjs 文件夾中創建一個名為 main.css 的簡單 CSS 文件，並定義一些基本樣式：
h2 {
font-family: sans-serif;
font-size: 1.5em;
text-transform: uppercase;
}
strong {
font-weight: 700;
background-color: yellow;
}
p {
font-family: sans-serif;
}接下來，讓我們在我們的 templates/cssandjs 文件夾中創建一個名為 styledPage.html 的 Thymeleaf 模板，以使用這些樣式：
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>Add CSS and JS to Thymeleaf</title>
<link th:href="@{/styles/cssandjs/main.css}" rel="stylesheet" />
</head>
<body>
<h2>Carefully Styled Heading</h2>
<p>
This is text on which we want to apply <strong>very special</strong> styling.
</p>
</body>
</html>我們使用帶有 Thymeleaf 的特殊 屬性的 <link> 標籤加載樣式表。如果我們的目錄結構符合預期，我們只需要指定以下路徑 。在這種情況下，路徑是 。 語法是 Thymeleaf 執行 URL 鏈接的方式。
如果運行我們的應用程序，我們會看到我們的樣式已應用。
3.3. 使用 JavaScript
接下來，我們將學習如何將 JavaScript 文件添加到 Thymeleaf 頁面中。
讓我們先將一些 JavaScript 添加到 中的一個文件中。
function showAlert() {
alert("The button was clicked!");
}然後我們返回到我們的 Thymeleaf 模板，並添加一個 <em>script<em> 標籤，該標籤指向我們的 JavaScript 文件：
<script type="text/javascript" th:src="@{/js/cssandjs/actions.js}"></script>現在，我們從模板中調用我們的方法：
<button type="button" th:onclick="showAlert()">Show Alert</button>當我們運行我們的應用程序並點擊 顯示警報 按鈕時，我們會看到警報窗口。
在總結之前，讓我們在此示例的基礎上進行一些擴展，學習如何使用 Spring 控制器中的數據，並在我們的 JavaScript 中使用它。
我們首先修改控制器以提供頁面的名稱：
@GetMapping("/styled-page")
public String getStyledPage(Model model) {
model.addAttribute("name", "Baeldung Reader");
return "cssandjs/styledPage";
}接下來，我們將在 actions.js文件中添加一個函數，以便在彈窗中使用這個名稱：
function showName(name) {
alert("Here's the name: " + name);
}最後，為了使用控制器中的數據調用我們的函數，我們需要使用內聯腳本。因此，我們將 name 值放入一個本地 JavaScript 變量中：
<script th:inline="javascript">
var nameJs = /*[[${name}]]*/;
</script>通過這樣做，我們創建了一個本地 JavaScript 變量，其中包含來自我們控制器的 name 模型值，然後我們可以將其在頁面的其餘 JavaScript 中使用。
現在我們已經完成了這個，我們可以使用 nameJs 變量調用我們的 JavaScript 函數：
<button type="button" th:onclick="showName(nameJs);">Show Name</button>4. 結論
在本簡短教程中，我們學習瞭如何將 CSS 樣式和外部 JavaScript 功能應用於我們的 Thymeleaf 頁面。我們從推薦的目錄結構開始，並逐步工作到使用 Spring 控制器類提供的動態數據調用 JavaScript。
