Add CSS and JS to Thymeleaf – 向Thymeleaf添加CSS和JS

最后修改: 2020年 4月 2日

中文/混合/英文(键盘快捷键:t)

1. Introduction

1.绪论

In this quick tutorial, we’re going to learn how to use CSS and JavaScript in our Thymeleaf templates.

在这个快速教程中,我们将学习如何在我们的Thymeleaf模板中使用CSS和JavaScript。

First, we’ll go over the expected folder structure so we know where to put our files. After that, we’ll see what we need to do to access those files from a Thymeleaf template.

首先,我们来看看预期的文件夹结构,这样我们就知道该把我们的文件放在哪里。之后,我们将看到我们需要做什么来从Thymeleaf模板中访问这些文件。

We’ll start by adding CSS styling to our page and then move on to adding some JavaScript functionality.

我们将首先在我们的页面上添加CSS样式,然后继续添加一些JavaScript功能。

2. Setup

2.设置

In order to use Thymeleaf in our application, let’s add the Spring Boot Starter for Thymeleaf to our Maven configuration:

为了在我们的应用程序中使用Thymeleaf,让我们把Spring Boot Starter for Thymeleaf加入我们的Maven配置中。

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-thymeleaf</artifactId>
    <version>2.2.6.RELEASE</version>
</dependency>

3. Basic Example

3.基本实例

3.1. Directory Structure

3.1.目录结构

Now, as a reminder, Thymeleaf is a templating library that can be easily integrated with Spring Boot applications. By default, Thymeleaf expects us to place those templates in the src/main/resources/templates folder. We can create subfolders, so we’ll be using a subfolder called cssandjs for this example.

现在,作为提醒,Thymeleaf是一个模板库,可以轻松与Spring Boot应用程序集成。默认情况下,Thymeleaf希望我们将这些模板放在src/main/resources/templates文件夹中。我们可以创建子文件夹,因此我们将在本例中使用一个名为cssandjs的子文件夹。

For CSS and JavaScript files, the default directory is src/main/resources/static. Let’s create static/styles/cssandjs and static/js/cssandjs folders for our CSS and JS files, respectively.

对于CSS和JavaScript文件,默认目录是src/main/resources/static让我们为CSS和JS文件分别创建static/styles/cssandjsstatic/js/cssandjs文件夹。

3.2. Adding CSS

3.2.添加CSS

Let’s create a simple CSS file named main.css in our static/styles/cssandjs folder and define some basic styling:

让我们在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;
}

Next, let’s create a Thymeleaf template named styledPage.html in our templates/cssandjs folder to use these styles:

接下来,让我们在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> styling.
    </p>
</body>
</html>

We load the stylesheet using the link tag with Thymeleaf’s special th:href attribute. If we’ve used the expected directory structure, we only need to specify the path below src/main/resources/static. In this case, that’s /styles/cssandjs/main.css. The @{/styles/cssandjs/main.css} syntax is Thymeleaf’s way of doing URL linking.

我们使用带有Thymeleaf的特殊th:href属性的链接标签来加载样式表。如果我们使用了预期的目录结构,我们只需要指定src/main/resources/static下面的路径。在这种情况下,就是/styles/cssandjs/main.css@{/styles/cssandjs/main.css} 语法是Thymeleaf的URL链接方式。

If we run our application, we’ll see that our styles have been applied:

如果我们运行我们的应用程序,我们会看到我们的样式已经被应用。

 

 

 

 

3.3. Using JavaScript

3.3.使用JavaScript

Next, we’re going to learn how to add a JavaScript file to our Thymeleaf page.

接下来,我们要学习如何在我们的Thymeleaf页面上添加一个JavaScript文件。

Let’s begin by adding some JavaScript to a file in src/main/resources/static/js/cssandjs/actions.js:

让我们首先在src/main/resources/static/js/cssandjs/actions.js的文件中添加一些JavaScript。

function showAlert() {
    alert("The button was clicked!");
}

Then we hop back over to our Thymeleaf template and add a <script> tag that points to our JavaScript file:

然后我们回到Thymeleaf模板,添加一个<script>标签,指向我们的JavaScript文件。

<script type="text/javascript" th:src="@{/js/cssandjs/actions.js}"></script>

Now, we call our method from our template:

现在,我们从我们的模板中调用我们的方法。

<button type="button" th:onclick="showAlert()">Show Alert</button>

When we run our application and click the Show Alert button, we’ll see the alert window.

当我们运行我们的应用程序并点击显示警报按钮时,我们将看到警报窗口。

Before we wrap things up, let’s build on this example a little bit by learning how to use data from our Spring controller in our JavaScript.

在我们总结之前,让我们在这个例子的基础上,学习如何在我们的JavaScript中使用Spring控制器的数据。

Let’s start by modifying our controller to provide a name to our page:

让我们首先修改我们的控制器,为我们的页面提供一个名称。

@GetMapping("/styled-page")
public String getStyledPage(Model model) {
    model.addAttribute("name", "Baeldung Reader");
    return "cssandjs/styledPage";
}

Next, let’s add a function to our actions.js file to use this name in an alert:

接下来,让我们在actions.js文件中添加一个函数,在警报中使用这个名字。

function showName(name) {
    alert("Here's the name: " + name);
}

Finally, in order to call our function with the data from our controller, we need to use script inlining. So let’s place the name value in a local JavaScript variable:

最后,为了用控制器的数据调用我们的函数,我们需要使用脚本内联。因此,让我们把name值放在一个本地JavaScript变量中。

<script th:inline="javascript">
    var nameJs = /*[[${name}]]*/;
</script>

By doing this, we’ve created a local JavaScript variable that contains the name model value from our control that we can then use in our JavaScript on the rest of the page.

通过这样做,我们已经创建了一个本地JavaScript变量,其中包含了我们控件的name模型值,然后我们可以在页面其他部分的JavaScript中使用。

Now that we’ve done that, we can call our JavaScript function using the nameJs variable:

现在我们已经做到了,我们可以使用nameJs变量调用我们的JavaScript函数。

<button type="button" th:onclick="showName(nameJs);">Show Name</button>

4. Conclusion

4.总结

In this short tutorial, we learned how to apply CSS styling and external JavaScript functionality to our Thymeleaf pages. We started with the recommended directory structure and worked our way up to calling JavaScript with data provided in our Spring controller class.

在这个简短的教程中,我们学习了如何在我们的Thymeleaf页面上应用CSS样式和外部JavaScript功能。我们从推荐的目录结构开始,一直到用Spring控制器类中提供的数据调用JavaScript。

As always, the code is available over on GitHub.

像往常一样,代码可在GitHub上获得