thymeleaf日常用法

写在前边:

 

之前在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

猜你喜欢

转载自slnddd.iteye.com/blog/2341185
今日推荐