springboot-thymeleaf的使用（2）

最新推荐文章于 2022-03-26 21:46:27 发布

chenyang1010

最新推荐文章于 2022-03-26 21:46:27 发布

阅读量248

点赞数

分类专栏： springboot 文章标签： springboot

本文链接：https://blog.csdn.net/chenyang1010/article/details/99701392

版权

springboot 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

themeleaf高级标签的使用

A. url标签的使用

使用@{}来表示url，(type=${type})表示路径参数，用来替换路径参数

<a  th:href="@{http://www.baidu.com/{type}(type=${type})}">
link1
</a>

或者使用@{${}}这样直接传参

<div th:style="'background:url(' + @{${img}} + ');'">
        <br/><br/><br/>
</div>

B. 内置工具的使用

dates和strings是thymeleaf提供的内部指令，
使用方式#command.method(params),输出的依然是java对象
要使java对象转换成html元素，还需要套一层${}

<p th:text="${#dates.format(date, 'yyyy-MM-dd HH:mm:ss')}">neo</p>
        <!--创建当前时间 精确到天-->
        <p th:text="${#dates.createToday()}">neo</p>
        <!--创建当前时间 精确到秒-->
        <p th:text="${#dates.createNow()}">neo</p>
        <!--判断是否为空-->
        <p th:text="${#strings.isEmpty(userName)}">userName</p>
        <!--判断 list 是否为空-->
        <p th:text="${#strings.listIsEmpty(users)}">userName</p>
        <!--输出字符串长度-->
        <p th:text="${#strings.length(userName)}">userName</p>
        <!--拼接字符串-->
        <p th:text="${#strings.concat(userName,userName,userName)}"></p>
        <!--创建自定长度的字符串-->
        <p th:text="${#strings.randomAlphanumeric(count)}">userName</p>

C. 布局器的使用

我们可以在一个web上定义不同的布局器，然后在另外一个web上引用。
假设定一个a.html：

<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>header</title>
</head>
<body>
<header th:fragment="header">
    <h1>head布局器</h1>
</header>
</body>
</html>

再定义一个b.html,内部引用a.html:

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"></meta>
    <title>Layout</title>
</head>
<body>
<div >
    <div th:replace="a :: header"></div>
</div>
<div>
    body
</div>
</body>
</html>

a::header就是一个对fragment的使用，a代表a.html，header代表a.html里面定义的fragment。

D. 两个特殊的标签语法/标签

layout:fragment：
定义模板片段，可以在子页面用同名片段覆盖

layout:decorator：
引用Thymeleaf页面作为母版/模板

我们可以使用layout:decorator定义一个母模版，然后使用layout:fragment替换母模版里面的部分内容。

母模版shared/layout1.html：

<!DOCTYPE html>
<html lang="en">
<head>
    <title th:text="${title}"></title>
</head>
<body>
<div layout:fragment="content">
    默认内容
</div>
</body>
</html>

子模板demo/page1.html：

<div layout:decorator="shared/layout1">
    <div layout:fragment="content">
        page1子页面内容
    </div>
</div>

E. fragment参数定义和使用

我们定义一个fragment名字叫common_header，传入两个参数，一个title，一个links。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title,links)">
    <title th:replace="${title}">comm title</title>

    <link rel="stylesheet" type="text/css" media="all" th:href="@{/css/myapp.css}">
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}">
    <script type="text/javascript" th:src="@{/js/myapp.js}"></script>

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

</body>
</html>

在另外一个page上使用common_header参数，~{::title}, ~{::link}分别代表内部的title元素还有link元素。

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="base :: common_header(~{::title},~{::link})">
    <title>Fragment - Page</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/cs/fragment.css}">
</head>
<body>

</body>
</html>

F.布局器需要的依赖

<dependency>
	<groupId>nz.net.ultraq.thymeleaf</groupId>
	<artifactId>thymeleaf-layout-dialect</artifactId>
</dependency>

chenyang1010

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
springboot-thymeleaf的使用（2）

themeleaf高级标签的使用A. url标签的使用使用@{}来表示url，(type=${type})表示路径参数，用来替换路径参数<a th:href="@{http://www.baidu.com/{type}(type=${type})}">link1</a>或者使用@{${}}这样直接传参<div th:style="'backgroun...
复制链接

扫一扫

专栏目录