内容简介:Thymeleaf 入门基础 | fanlychie
Thymeleaf 是一个服务器端 Java 模板引擎 , 类似于 FreeMarker 、 Velocity 等模板 。 它是 Java 服务器端 HTML5 开发的理想选择 。 并且能够很好的和 Spring Boot 集成 。
Thymeleaf 的主要目标是为 程序员 的开发工作流程带来优雅的自然模板 , 它可以作为静态原型来使用 , 这对前后端分离的开发团队来说无疑是一种很好的体验 。
Thymeleaf 开箱即用 ,
它提供了一套标准方言 ,
所有的数据都是通过标签 th:*
来完成 。
如:
<span th:text="${message}">Welcome to BeiJing!</span>
当它作为静态文件运行时 ,
Thymeleaf 会过虑 th:
标签属性 ,
显示静态文本值 Welcome to BeiJing!
。
当它运行在服务器环境时 ,
Thymeleaf 会使用 th:
标签属性的值替换掉静态文本的值 ,
动态显示 ${message}
的具体内容 。
除了上面提到的 th:text
,
Thymeleaf 还提供了许多其他功能 ,
这些功能对于大多数情况是足够满足日常开发的需求的 ,
下面来一一做介绍 。
如何使用 Thymeleaf 创建一个真正有效的 HTML5 文档?
welcome.html
<!DOCTYPE HTML> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>Welcome Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <span th:text="${message}">Welcome to BeiJing!</span> </body> </body> </html>
正如你所见 ,
这是一个 HTML5 页面文件 ,
它可以直接在任何浏览器中正确显示(浏览器会自动忽略它们不能理解的属性 th:text
) 。
但这不是一个真正有效的 HTML5 文档 ,
因为 HTML5 规范是不允许使用 th:*
这些非标准属性的 。
而且 ,
我们还在 <html> 标签中添加了一个 xmlns:th
属性 。
<html xmlns:th="http://www.thymeleaf.org">
实际上 ,
xmlns:th="http://www.thymeleaf.org"
在 Thymeleaf 模板引擎处理过程中完全没有任何影响 ,
它只是用来防止 IDE 提示找不到 th:*
属性命名空间的错误(在 IntelliJ IDEA 中 th:*
属性变红色) ,
但这对页面的正常显示是毫无影响的 。
因此 ,
我们甚至可以不使用 th:*
属性 ,
我们可以切换到 Thymeleaf 的数据属性语法 ,
用 data-th-*
替换 th:*
:
<!DOCTYPE HTML> <html> <head> <title>Welcome Page</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> </head> <body> <span data-th-text="${message}">Welcome to BeiJing!</span> </body> </body> </html>
HTML5 规范是允许 data-*
这样自定义的属性的 。
至此 ,
我们已经将模板改造成了一个真正有效的 HTML5 文档 。
th:*
和 data-th-*
这两个符号是完全等效且是可以互换的 。
为了简单直观和代码的紧凑性 ,
这里采用 th:*
的表示方式 。
标准表达式语法
Thymeleaf 提供了非常丰富的标准表达式语法 , 总共有 8 大类 , 它们分别是:
- 简单表达式
- 字面值
- 文本操作
- 算术运算
- 布尔运算
- 比较和相等
- 条件运算
- 无操作符
简单表达式
Thymeleaf 提供的简单表达式语法有 5 类 , 它们分别是:
语法 | 名称 | 描述 | 作用 |
---|---|---|---|
${}
|
Variable Expressions | 变量表达式 | 取出上下文变量的值 |
*{}
|
Selection Variable Expressions | 选择变量表达式 | 取出选择的对象的属性值 |
#{}
|
Message Expressions | 消息表达式 | 使文字消息国际化 , I18N |
@{}
|
Link URL Expressions | URL 链接表达式 | 用于表示各种超链接地址 |
~{}
|
Fragment Expressions | 代码片段表达式 | 引用一段公共的代码片段 |
${…}
下面代码表示取出上下文环境中的 message
变量的值:
<span th:text="${message}"></span>
内置对象
跟 JSP 相像的 ,
Thymeleaf 也为我们提供了一些内置的对象变量 ,
它们都是以 #
开头表示:
对象 | 描述 |
---|---|
#ctx
|
上下文对象 |
#vars
|
上下文变量 |
#locale
|
上下文区域变量 |
#request
|
HttpServletRequest 对象 |
#response
|
HttpServletResponse 对象 |
#session
|
HttpSession 对象 |
#servletContext
|
ServletContext 对象 |
举个栗子:
<!-- zh_CN --> <p th:text="${#locale}"></p> <!-- 小饭 --> <p th:text="${#session.user.name}"></p>
工具类
另外 ,
Thymeleaf 还提供了许多内置的 工具 类 ,
它们也是以 #
开头:
对象 | 描述 |
---|---|
#messages
|
消息工具类 ,
与 #{}
作用相同; |
#uris
|
地址相关的工具类 |
#conversions
|
对象转换工具类 |
#dates
|
日期时间工具类 |
#calendars
|
日历工具类 |
#numbers
|
数字工具类 |
#strings
|
字符串工具类 |
#objects
|
对象工具类 |
#bools
|
布尔工具类 |
#arrays
|
数组工具类 |
#lists
|
List 工具类 |
#sets
|
Set 工具类 |
#maps
|
Map 工具类 |
举个栗子:
<p th:text="${#lists.isEmpty(cities)}"></p> <p th:text="${not #lists.isEmpty(cities)}"></p> <!-- 2017年4月8日 下午09时01分12秒 --> <p th:text="${#dates.format(now)}"></p> <!-- 2017-04-08 21:01:12 --> <p th:text="${#dates.format(now, 'yyyy-MM-dd HH:mm:ss')}"></p>
*{…}
使用 *{}
表达式时 ,
如果没有选择对象 ,
那么 ,
*{}
和 ${}
表达式所达到的效果是完全相同的:
<p th:text="${user.name}"></p> <p th:text="*{user.name}"></p>
*{}
表达式的上下文是父标签( th:object
)所选择的对象 ,
而 ${}
表达式是面向整个上下文的 ,
这是 *{}
和 ${}
表达式语法的一个重要的区别 。
<div th:object="${user}"> <p>姓名: <span th:text="*{name}"></span></p> <p>性别: <span th:text="*{sex}"></span></p> <p>年龄: <span th:text="*{age}"></span></p> </div>
它相当于:
<div> <p>姓名: <span th:text="${user.name}"></span></p> <p>性别: <span th:text="${user.sex}"></span></p> <p>年龄: <span th:text="${user.age}"></span></p> </div>
#{…}
首先我们来了解一下 i18n 资源文件的命名规则:
- basename.properties
- basename_language.properties
- basename_language_country.properties
其中 ,
basename
是自定义的资源文件名称 ,
language
和 country
必须是 Java 支持的语言和国家 。
basename.properties
是缺省加载的资源文件 ,
它是必须存在的 。
当客户端根据本地语言查找不到相关的资源文件时 ,
则使用 basename.properties
。
处理静态消息
我们来创建以下几个文件:
1. /src/main/resources/i18n/messages.properties
welcome.message=北京欢迎你!
2. /src/main/resources/i18n/messages_en_US.properties
welcome.message=Welcome to BeiJing!
3. /src/main/resources/application.properties
(Spring Boot)
spring.messages.basename:i18n/messages
举个栗子:
<!-- 北京欢迎你! --> <p th:text="#{welcome.message}"></p>
处理非静态消息
#{}
表达式是不允许直接处理非静态消息的 ,
我们可以在资源文件中使用占位符 {}
来处理非静态消息:
/src/main/resources/i18n/messages.properties
welcome.user={0}<span class="fuhao">,</span>欢迎来到北京!
使用时 , 通过消息的键值以参数的形式来传递变量:
<!-- 小饭<span class="fuhao">,</span>欢迎来到北京! --> <p th:text="#{welcome.user(${user.name})}"></p>
@{…}
在 WEB 应用开发里面 URL 链接地址是非常常见的 ,
@{}
表达式就是专门用来处理 URL 链接的:
<!-- /css/mian.css --> <p th:text="@{/css/mian.css}"></p> <!-- /css/mian.css?v=1.0 --> <p th:text="@{/css/mian.css(v=1.0)}"></p> <!-- /user/order?uid=1001 --> <p th:text="@{/user/order(uid=${user.id})}"></p> <!-- /user/order?uid=1001&status=PAIED --> <p th:text="@{/user/order(uid=${user.id},status='PAIED')}"></p> <!-- /user/1001/info --> <p th:text="@{/user/{uid}/info(uid=${user.id})}"></p>
绝对地址:
<!-- http://fanlychie.github.io --> <p th:text="@{http://fanlychie.github.io}"></p>
页面相对地址:
<!-- commons/base.html --> <p th:text="@{commons/base.html}"></p>
上下文相对地址(相对于当前的服务):
<!-- /css/mian.css --> <p th:text="@{/css/mian.css}"></p>
服务器相对地址(相对于部署在同一个服务器中的不同服务):
<!-- /image/upload --> <p th:text="@{~/image/upload}"></p>
~{…}
当需要引用某个模板文件的公共的 HTML 代码片段时 ,
可以使用 ~{}
语法:
语法 | 描述 |
---|---|
~{templatename :: selector}
|
selector
可以是 th:fragment
指定的名称 ,
如 ~{footer :: base} 。
也可以是其他选择器 , 如类选择器 、 ID选择器等; |
~{templatename}
|
引用整个模板文件的代码片段; |
~{::selector}
|
相当于 ~{this :: selector}
,
表示引用当前模板定义的代码片段; |
具体使用参考模板布局章节 。
字面值
什么是字面值?首先它不是一个变量 ,
它是一个具体的确切的值 ,
通常这些值是比较简单的 ,
例如: 18
、
'welcome'
等 ,
它们没有名称 ,
以至于我们只能用值来称呼它们 ,
因此我们称其为字面值 。
文字字面值
文字字面值是用单引号引起来的任何字符内容 , 如果字符内容里面含有单引号 , 则需要进行转义:
<!-- Welcome to BeiJing! --> <p th:text="'Welcome to BeiJing!'"></p> <!-- 'Welcome to BeiJing!' --> <p th:text="'\'Welcome to BeiJing!\''"></p>
数字字面值
<!-- 2017 --> <p th:text="2017"></p> <!-- 2018 --> <p th:text="2017 + 1"></p>
布尔字面值
<!-- false --> <p th:text="1 > 2"></p> <!-- 否 --> <p th:text="1 > 2 ? '是' : '否'"></p>
空字面值
<!-- false --> <p th:text="${user == null}"></p>
字面令牌
字面令牌(Literal Tokens)的内容只能含有(不能含有空格 、 特殊符号等):
- 大小写的字母
- 0 到 9 的数字
- 中括号
- 下划线
- 连字符(-)
- 点(.)
- 中文(官网文档未提及)
- 还有其他的?
实际上 , 数字 、 布尔和空字面值都是字面令牌的特殊情况 。
字面令牌能够用来对标准表达式语法进行简化(可以将包裹它的单引号去掉):
<p th:text="BeiJing"></p>
它等效于:
<p th:text="'BeiJing'"></p>
文本操作
文本操作包含字符连接和替换的操作 。
字符串连接
不管是字面值还是表达式的结果 ,
我们都可以使用 +
符号将它们连接起来:
<!-- Welcome to BeiJing! --> <p th:text="'Welcome to ' + ${province.name} + '!'"></p>
字面值替换
||
符号可以用来将字面值和表达式包裹起来 ,
这样就能方便的替换变量的值 ,
而不需要使用 +
连接符:
<!-- Welcome to BeiJing! --> <p th:text="|Welcome to ${province.name}!|"></p>
算术运算
支持 +
(加) 、
-
(减) 、
*
(乘) 、
/
(除) 、
%
(模)运算:
<!-- 6 --> <p th:text="4 + 2"></p> <!-- 2 --> <p th:text="4 - 2"></p> <!-- 8 --> <p th:text="4 * 2"></p> <!-- 2 --> <p th:text="4 / 2"></p> <!-- 0 --> <p th:text="4 % 2"></p>
布尔运算
支持 and
(且) 、
or
(或) 、
!
(非) 、
not
(非)运算:
<p th:text="${user.online and user.vip}"></p> <p th:text="${user.online or user.vip}"></p> <p th:text="${!user.online}"></p> <p th:text="${not user.online}"></p>
比较和相等
支持 <
( lt
) 、
>
( gt
) 、
<=
( le
) 、
>=
( ge
) 、
==
( eq
) 、
!=
( ne
):
<p th:text="${user.age < 60}"></p> <p th:text="${user.age <= 60}"></p> <p th:text="${user.age > 18}"></p> <p th:text="${user.age >= 18}"></p> <p th:text="${user.age == 18}"></p> <p th:text="${user.age != 18}"></p>
条件运算
三元运算符: (if) ? (then) : (else)
<p th:text="${user.online ? '在线' : '离线'}"></p> <p th:text="${user.online ? (user.vip ? 'VIP用户在线' : '普通用户在线') : '离线'}"></p>
二元运算符: (value) ?: (defaultValue)
,
其中 ,
value
非空(null)即真 ,
条件为真时输出 value
,
否则输出 defaultValue
。
假设 token = null
,
user.email = fanlychie@gmail.com
<!-- 你还没有登录<span class="fuhao">,</span>请先登录 --> <p th:text="${token} ?: '你还没有登录<span class="fuhao">,</span>请先登录'"></p> <!-- fanlychie@gmail.com --> <p th:text="${user.email} ?: '你还没有绑定邮箱'"></p>
无操作符
当模板运行在服务器端时 ,
无论如何 Thymeleaf 都会用 th:*
属性的具体值替换标签体的内容 。
无操作符( _
)则允许使用原型标签体的内容作为默认值:
<!-- 你还没有登录<span class="fuhao">,</span>请先登录 --> <p th:text="${token} ?: _">你还没有登录<span class="fuhao">,</span>请先登录</p>
使用文本
了解了标准表达式的语法之后 , 接下来介绍如何正确的使用它们 。
标准表达式通常需要搭配 th:*
属性来使用 ,
这样 Thymeleaf 引擎才能正确的解析出表达式的结果 。
首先介绍两个最基础的 th:*
属性 ,
它们分别是: th:text
和 th:utext
,
这两个属性都是用于处理文本内容 。
th:text
在标签体中显示表达式的值的文本内容:
<span th:text="${message}"></span>
使用外部化的文本内容:
<span th:text="${message}">Welcome to BeiJing!</span>
当它作为静态文件直接运行时 ,
浏览器会自动忽略它不能识别的 th:text
属性 ,
而显示 <span>
标签体的文本内容 Welcome to BeiJing!
当它作为模板文件运行在服务器端时 ,
th:text
属性的具体值将会替换 <span>
标签体的文本内容 。
th:utext
th:utext
与 th:text
的区别在于:
-
th:text
默认会对含有 HTML 标签的内容进行字符转义; -
th:utext
(Unescaped Text)则不会对含有 HTML 标签的内容进行字符转义;
假设: message = "<b>Welcome to BeiJing!</b>"
th:text
栗子:
<span th:text="${message}"></span>
th:text
效果:
<b>Welcome to BeiJing!</b>
th:utext
栗子:
<span th:utext="${message}"></span>
th:utext
效果:
Welcome to BeiJing!
设置属性值
在 Thymeleaf 模板文件中 ,
你可以使用 th:*
(或者使用 th:attr
属性)来设置任意的 HTML5 标签属性的值 。
不仅如此 ,
你还可以 th:*-*
来同时为多个不同的标签属性设置相同的一个值 ,
甚至你可以使用 th:attrappend
和 th:attrprepend
来追加新的值到现有的标签属性值中 。
th:attr
这种方式是不推荐的 ,
了解一下就好 。
下面是用 th:attr="href=..."
来设置标签 href
属性的值:
<a th:attr="href=@{https://www.google.com.hk}">谷歌一下你能知道的更多</a>
th:*
上面 th:attr="href=@{http://www.baidu.com}"
语法显得臃肿甚至不简洁 ,
我们更推荐下面的这种语法:
<a th:href="@{https://www.google.com.hk}">谷歌一下你能知道的更多</a>
这样代码就简洁多了 ,
其中 th:*
中的 *
可以是 HTML5 支持的任意属性名称 ,
甚至这些属性名称可以是自定义的:
<!-- <div item-id="1001">Welcome to BeiJing!</div> --> <div th:item-id="${user.id}">Welcome to BeiJing!</div>
th:*-*
如果想要同时为标签的多个不同属性设置相同的一个值 ,
可以使用 th:*-*
的语法:
<img src="logo.png" th:alt-title="LOGO图片">
它相当于:
<img src="logo.png" th:alt="LOGO图片" th:title="LOGO图片">
th:attrappend & th:attrprepend
th:attrappend
和 th:attrprepend
可以将表达式的结果分别追加到指定的属性值之后和之前 。
<!-- <button class="btn enable">购买</button> --> <button class="btn" th:attrappend="class=${outOfStock} ? ' enable' : ' disable'">购买</button> <!-- <button class="enable btn">购买</button> --> <button class="btn" th:attrprepend="class=${outOfStock} ? 'enable ' : 'disable '">购买</button>
另外 ,
Thymeleaf 还提供了两个常用的具体附加属性 th:classappend="..."
和 th:styleappend=""
。
它们分别用来代替 th:attrappend="class=..."
和 th:attrappend="style=..."
。
<!-- <button class="btn enable">购买</button> --> <button class="btn" th:classappend="${outOfStock} ? ' enable' : ' disable'">购买</button>
布尔属性
在 HTML 中有些属性是布尔属性 ,
布尔属性是指没有值的属性 ,
如 readonly
、
checked
、
selected
等 。
它们若存在那就意味着值为 true 。
<input type="checkbox" name="rememberme" checked /> 记住我 <input type="radio" name="sex" value="male" checked> 男 <input type="radio" name="sex" value="female"> 女 <input type="text" name="appId" value="J123654" readonly> <select> <option selected>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> </select>
Thymeleaf 也允许我们通过 th:*
(这里的 *
表示任意的布尔属性) 来选择是否使用这些布尔属性 。
<input type="checkbox" name="rememberme" ch:checked="${rememberme}" /> 记住我
正如你所见 ,
如果表达式的结果为 true
,
则自动勾选复选框 ,
若为 false
,
则不会自动勾选 。
遍历
遍历(迭代)的语法 th:each="自定义的元素变量名称 : ${集合变量名称}"
:
<div> <spn>你所在城市:</spn> <select name="mycity"> <option th:each="city : ${cities}" th:text="${city.name}"></option> </select> </div>
th:each
提供了一个用于跟踪迭代的状态变量 ,
它包含以下几个属性:
属性 | 类型 | 描述 |
---|---|---|
index | int | 当前迭代的索引 , 从 0 开始 |
count | int | 当前迭代的计数 , 从 1 开始 |
size | int | 集合中元素的总个数 |
current | int | 当前的元素对象 |
even | boolean | 当前迭代的计数是否是偶数 |
odd | boolean | 当前迭代的计数是否是奇数 |
first | boolean | 当前元素是否是集合的第一个元素 |
last | boolean | 当前元素是否是集合的最后一个元素 |
状态变量的使用语法: th:each="自定义的元素变量名称, 自定义的状态变量名称 : ${集合变量名称}"
:
<div> <spn>所在城市:</spn> <select name="mycity"> <option th:each="city, status : ${cities}" th:text="${city.name}" th:item-index="${status.count}"></option> </select> </div>
不管什么时候 ,
Thymeleaf 始终会为每个 th:each
创建一个状态变量 ,
默认的状态变量名称就是自定义的元素变量名称后面加 Stat
字符串组成:
<div> <spn>所在城市:</spn> <select name="mycity"> <option th:each="city : ${cities}" th:text="${city.name}" th:item-index="${cityStat.count}"></option> </select> </div>
条件判断
条件判断语句有三种 ,
分别是: th:if
、
th:unless
、
th:swith
。
th:if
当表达式的评估结果为真时则显示内容 , 否则不显示:
<a th:href="@{/user/order(uid=${user.id})}" th:if="${user != null}">我的订单</a>
真假评估的依据:
-
当表达式的值不为空(null)时
-
如果表达式的值是一个布尔类型 ,
且值为
true
评估为真 , 否则为假; -
如果表达式的值是一个数字类型 ,
且值为非
0
评估为真 , 否则为假; -
如果表达式的值是一个字符类型 ,
且值为非
0
评估为真 , 否则为假; -
如果表达式的值是一个字符串类型 ,
且值为非
"false"
、"off"
、"no"
评估为真 , 否则为假; -
如果表达式的值不是一个
布尔
、数字
、字符
或字符串
评估为真;
-
如果表达式的值是一个布尔类型 ,
且值为
- 当表达式的值为空(null)时 , 评估结果为假
因此 , 上面代码我们也可以简写成:
<a th:href="@{/user/order(uid=${user.id})}" th:if="${user}">我的订单</a>
但是 , 为了代码的可读性 , 我们并不建议这样使用 。
th:unless
th:unless
与 th:if
判断恰好相反 ,
当表达式的评估结果为假时则显示内容 ,
否则不显示:
<a th:href="@{/user/order(uid=${user.id})}" th:unless="${user == null}">我的订单</a>
th:swith
多路选择语句 ,
它需要搭配 th:case
来使用:
<div th:switch="${user.role}"> <p th:case="admin">管理员</p> <p th:case="user">普通用户</p> </div>
模板布局
在 WEB 应用开发中 , 我们通常会将一些公共的代码片段如页眉 、 页脚 、 菜单等抽取出来放到一个或多个独立的文件里面 , 其他模板文件可以通过标签轻松的将这些代码片段引用进来 , 从而实现代码的复用性 。
在 Thymeleaf 中 ,
你可以使用 th:fragment
来定义一个公共的代码片段 ,
然后通过使用 th:insert
、
th:replace
、
th:include
(Thymeleaf 3.0 开始不再推荐使用 ,
本文也将不再介绍它)属性可以实现将定义的公共代码片段引用到模板文件中 。
th:fragment
我们可以通过 th:fragment
来定义一段公用的代码片段:
templates/footer.html
<div th:fragment="base">© 2017 fanlychie</div>
th:insert
templates/welcome.html
文件中引用 footer.html
中 base
代码片段的方式为:
<div th:insert="~{footer :: base}"></div>
其中 ,
~{}
是可选的 ,
我们可以去掉这层的包裹:
<div th:insert="footer :: base"></div>
如果 footer.html
与 welcome.html
不在同级目录 ,
如 templates/commons/footer.html
:
<div th:insert="@{commons/footer} :: base"></div>
类选择器 、 ID选择器等
除了可以使用 th:fragment
来定义一段公用的代码片段外 ,
我们也可以使用类选择器 、
ID选择器等:
templates/footer.html
<div id="base">© 2017 fanlychie</div>
templates/welcome.html
文件中引用 footer.html
中 id="base"
片段的方式为:
<div th:insert="footer :: #base"></div>
th:replace
跟 th:insert
相似的 ,
th:replace
也可以用来引用公共的代码片段 。
不同的是 ,
th:insert
是直接将代码片段插入到标签体内 ,
而 th:replace
则是用代码片段直接替换标签体内容 。
举个栗子:
<!-- <div><div id="base">© 2017 fanlychie</div></div> --> <div th:insert="footer :: base"></div> <!-- <div id="base">© 2017 fanlychie</div> --> <div th:replace="footer :: base"></div>
th:fragment 参数使用
使用 th:fragment
来定义一个代码片段时 ,
它允许你指定一组参数 ,
语法: th:fragment="fragmentname(arg1, arg2, ...)"
<div th:fragment="crumbs(parent, child)"> <span th:text="|${parent} > ${child}|"></span> </div> <!-- 用户中心 > 我的订单 --> <div th:replace="::crumbs('用户中心', '我的订单')"></div>
th:assert
断言 ,
它可以同时指定多个表达式 ,
每个表达式的结果评估值必须为 true ,
否则它将会抛出一个异常 。
语法: th:assert="expression1, expression2..."
:
<div th:replace="::crumbs(${parentMenuName}, ${childMenuName})" th:assert="${!#strings.isEmpty(parentMenuName), !#strings.isEmpty(childMenuName)}"></div>
定义局部变量
使用 th:with
属性可以定义局部变量:
<p th:with="name='fanlychie'"> <span th:text="${name}"></span> </p>
同时定义多个局部变量时 ,
用英文 ,
号分隔开:
<p th:with="name=${user.name},age={user.age}"> ...... </p>
注释
下面介绍常见的两种注释:
标准注释
语法: <!-- ... --->
,
注释的代码块会在文件源代码中显示出来 。
单行注释
<!-- <span>${message}</span> --->
多行注释
<!-- <div th:switch="${user.role}"> <p th:case="admin">管理员</p> <p th:case="user">普通用户</p> </div> --->
解析器级注释
语法: <!--/* ... */-->
,
注释的代码块会在引擎解析的时候抹去 。
单行注释:
<!--/* <span>${message}</span> */-->
多行注释
<!--/*--> <div th:switch="${user.role}"> <p th:case="admin">管理员</p> <p th:case="user">普通用户</p> </div> <!--*/-->
内联表达式
内联表达式允许我们直接在 HTML 文本中使用标准表达式 ,
而不需要使用 th:*
标签属性 。
[[…]]
[[]]
相当于 th:text
,
对含有 HTML 标签的内容自动进行字符转义 。
htmlContent = "<b>Welcome to BeiJing!</b>"
<p>The message is : [[${htmlContent}]]</p>
输出:
The message is : <b>Welcome to BeiJing!</b>
[(…)]
[()]
相当于 th:utext
,
对含有 HTML 标签的内容不进行字符转义 。
<p>The message is : [(${htmlContent})]</p>
输出:
The message is : Welcome to BeiJing!
th:inline
我们已经了解到 ,
使用 [[]]
和 [()]
语法可以直接在 HTML 文本中使用标准表达式 ,
如果想要使用更多高级的功能 ,
需要使用 th:inline
属性来激活 ,
它的取值如下:
值 | 描述 |
---|---|
none |
禁止内联表达式 ,
如果需要输出 [[]]
和 [()]
字符串 |
text |
文本内联 ,
可以使用 th:each
等高级语法 |
css |
样式内联 ,
如: <style th:inline="css">
|
javascript |
脚本内联 ,
如: <style th:inline="javascript">
|
none
<!-- [[1, 2], [3, 4]] --> <p th:inline="none">[[1, 2], [3, 4]]</p>
text
<!-- 北京 上海 广州 深圳 --> <p th:inline="text"> [# th:each="city : ${cities}"] [(${city.name})] [/] </p>
css
<style th:inline="css"> body { background-color:[[${bgColor}]]; } </style>
javascript
<script th:inline="javascript"> var user = [[${user}]]; alert("用户名:" + user.name); </script>
以上所述就是小编给大家介绍的《Thymeleaf 入门基础 | fanlychie》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Python基础入门_5面向对象基础
- Apache Flink 零基础入门(一):基础概念解析
- Apache Flink 零基础入门(一):基础概念解析
- React 入门 (基础概念)
- OALP基础入门
- 入门:基础语法(五)函数
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
CSS权威指南(第三版·英文影印版)
[美] Eric A.Meyer / 东南大学出版社 / 2007-06 / 68.00元
著名的CSS专家Eric A.Meyer他招牌式的智慧和无与伦比的经验引领读者探索了CSS的各个部 分,包括属性、标记、特性和实现。此外,他还就现实应用中的一些问题,例如浏览器的支持和设计方针,发表了看法。你所要知道的就是HTML 4.0的知识,这样就可以创建整洁、易于维护的脚本,以与桌面出版系统同样的优雅和控制能力管理网站布局和分页。你将会学到: 精妙地设计文本风格 用户界面、......一起来看看 《CSS权威指南(第三版·英文影印版)》 这本书的介绍吧!