写在前边:
之前在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加入配置即可,具体看代码:
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<!-- set thymeleaf version -->
<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引入依赖:
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
下面针对thymeleaf的常用用法介绍一下:
1、注释:
1.1 <!--/* xxxc */-->
咱们html页面的注释 <!-- xxxx --> 这种虽然展示效果上没有了,但是通过查看源文件还是可以看到的。但是thymeleaf的注释 <!--/* <div>you can see me only before thymeleaf processes me!</div> */-->
<!--/* xxxc */--> 这些代码会被引擎解析时去掉,并且查看源代码也看不到哦。这种静态打开也动态运行都是看不到的哦。
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