thymeleaf 的代码片段
时间: 2023-07-02 21:10:22 浏览: 148
以下是一个基本的 Thymeleaf 代码片段,它将一个列表中的元素显示为一个 HTML 表格:
```html
<table>
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Age</th>
</tr>
</thead>
<tbody>
<tr th:each="person : ${people}">
<td th:text="${person.id}">1</td>
<td th:text="${person.name}">John Doe</td>
<td th:text="${person.age}">30</td>
</tr>
</tbody>
</table>
```
在这个例子中,Thymeleaf 使用 `th:each` 对 `people` 列表进行迭代,并为每个列表项生成一个表格行。在表格行中,`th:text` 指令用于将 `person` 对象的属性值显示为单元格的文本内容。如果 `person` 对象中没有相应的属性,则默认值将为指令中的文本。
注意,在使用 Thymeleaf 时,需要在 HTML 文件的开头添加一个命名空间声明,如下所示:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
...
</html>
```
这将允许你在 HTML 中使用 Thymeleaf 的指令和表达式。
相关问题
thymeleaf 怎么引入代码片段 除了fragment
Thymeleaf是一个强大的模板引擎,支持在HTML页面中嵌入Java代码片段,除了使用`<th:block>`标签作为自定义片段(Fragment)之外,还可以通过以下几种方式引入代码:
1. **Include指令**:使用`<include>`标签可以从其他Thymeleaf模板文件中包含内容,类似于普通的HTML `iframe`。例如:
```html
<include src="your-code-snippet.html"/>
```
2. **Script Tag**:如果需要插入JavaScript代码,可以直接使用`<script>`标签:
```html
<script type="text/javascript">
// JavaScript code here
</script>
```
3. **Attribute Expression**:在HTML元素上直接使用表达式来动态插入代码,如内联CSS或JavaScript:
```html
<div style="${'background-color: ' + color}">...</div>
```
4. **Java条件渲染**:在Java控制器或模型层可以生成HTML字符串,然后在模板中用`th:text`属性显示:
```java
Model model = new Model();
String jsCode = "/* some JavaScript snippet */";
model.addAttribute("jsCode", jsCode);
// 在模板中使用
<pre th:text="${jsCode}" />
```
5. **Thymeleaf Expressions (Th:*)**:利用Thymeleaf的一些内置功能,如`th:inline`,可以在模板中直接执行简单的文本替换:
```html
<p th:inline="javascript">var myVar = ${variable};</p>
```
Thymeleaf的片段表达式用符号( ){...}来表示?
Thymeleaf的片段表达式用符号`th:fragment`来表示,而不是`( ) { }`。`th:fragment`是Thymeleaf中的一个属性,用于将HTML模板中的一部分内容定义为片段,以便在其他地方进行重用。
例如,以下代码定义了一个名为`header`的片段:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
<th:block th:fragment="header">
<header>
<h1>Welcome to My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
</th:block>
</head>
<body>
</body>
</html>
```
在以上代码中,`<th:block>`元素用于定义一个HTML块,并将其定义为名为`header`的片段。可以在其他地方使用`th:replace`或`th:insert`指令来重用该片段。
例如,在以下代码中,使用`th:replace`指令将`header`片段插入到`body`标签中:
```html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8"/>
<title>Document</title>
</head>
<body>
<div th:replace="fragments :: header"></div>
</body>
</html>
```
阅读全文