thymeleaf日常用法博客分类： thymeleaf thymeleaf

程序员文章站 2024-03-17 12:47:22

...

写在前边：

之前在spring boot 开发的时候，在Spring boot中使用thymeleaf的 ~{...} 这种针对fragment的写法一直不好使。原来是使用的版本和所看的文档不一致，用的是2.0的版本，但一直看3.0的文档。

<head th:fragment="common_header(title,links)">
<title th:replace="${title}">The awesome application</title>
<!-- Common styles and scripts -->
<link rel="stylesheet" type="text/css" media="all" th:href="@{/css/awesomeapp.css}">
<link rel="shortcut icon" th:href="@{/images/favicon.ico}">
<script type="text/javascript" th:src="@{/sh/scripts/codebase.js}"></script>
<!--/* Per-page placeholder for additional links */-->
<th:block th:replace="${links}" />
</head>
 
 
<head th:replace="base :: common_header(~{::title},~{::link})">
<title>Awesome - Main</title>
<link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
<link rel="stylesheet" th:href="@{/themes/smoothness/jquery-ui.css}">
</head>

Spring Boot默认选择的Thymeleaf是2.0版本的，那么如果我们就想要使用3.0版本或者说指定版本呢，那么怎么操作呢？在这里要说明下 3.0的配置在spring boot 1.4.0+才支持的，在1.4.0版本默认的还是选择2.0版本的。

只需要在pom.xml加入配置即可，具体看代码：

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>

<thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>

</properties>

那么之后就是使用了3.0的模板引擎进行渲染的。

spring boot中使用thymeleaf引入依赖：

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-thymeleaf</artifactId>

</dependency>

下面针对thymeleaf的常用用法介绍一下：

1、注释：

1.1

咱们html页面的注释  这种虽然展示效果上没有了，但是通过查看源文件还是可以看到的。但是thymeleaf的注释

这些代码会被引擎解析时去掉，并且查看源代码也看不到哦。这种静态打开也动态运行都是看不到的哦。

1.2

<table>
<tr>
<td>aaa</td>
</tr>
<!--/*-->
<tr>
<td>aaa1</td>
</tr>
<tr>
<td>aaa2</td>
</tr>
<!--*/-->
</table>

如果是以上的这种写法，在静态打开是就会显示，但是动态程序运行时也是不显示的哦。

1.3 静态解析时被注释，thymeleaf解析时会移除标签对，内容保留

静态时被注释掉，查看源文件可以看到，但是浏览器打开的效果是看不到展示内容的

thymeleaf解析，即动态运行时可以正常执行

2 、th:block

th:block用来定义一个代码块。并执行里面的属性。这将在循环的时候特别有用。

3、简单表达式

变量表达式: ${...}

Selection Variable Expressions: *{...}

消息表达式: #{...}

URL表达式: @{...}

Fragment Expressions: ~{...}

4、th:fragment、th:include 、th:replace

默认spring boot读取thymeleaf文件的路径是src/main/resource/templates，静态文件是src/main/resource/static

这个默认的值是可以再application.properties中进行修改的

spring.thymeleaf.prefix=classpath:/templates/

classpath的路径是读取.class的路径

文件路径：src/main/resource/templates/commom

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div th:fragment="copyright">
      © 2016 xxx 
    </div>
  </body>
</html>

Footer:
	<div th:include="common/footer :: copyright"></div>

5、Flexible layouts: beyond mere fragment insertion

<head th:fragment="header(title,links,scripts)">
<title th:replace="${title}">The awesome application</title>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<th:block th:replace="${links}" />
<th:block th:replace="${scripts}" />

</head>

调用：

<head th:include="common/header :: header(~{::title},~{::link},~{::script})"> 
<title>Awesome - Main</title>
<link rel="stylesheet" th:href="@{/css/index.css}">
<script th:src="@{/js/index.js}"></script>
</head>

css的目录为：src\main\resources\static\css\index.css

@{}这种不需要执行contextPath了，默认就加入了

注意是link 和script，不是links 和scripts

如果调用的页面没有link或者script ，则指定传入的参数为~{}即可。

<head th:include="common/header :: header(~{::title},~{},~{})">

相关技术来源：http://www.iteye.com/topic/1144720

thymeleaf日常用法博客分类： thymeleaf thymeleaf

Spring Boot使用thymeleaf模板博客分类： Spring Boot Spring BootThymeleaf博客

thymeleaf与spring整合博客分类： Js基础 thymeleaf

thymeleaf常用工具对象博客分类： thymeleaf thymeleaf

Thymeleaf 分页功能博客分类： Thymeleaf thymeleafth:onclick

thymeleaf 学习笔记博客分类： Js基础 thymeleaf