thymeleaf 引入模板

最新推荐文章于 2022-07-04 09:29:19 发布

o_瓜田李下_o

最新推荐文章于 2022-07-04 09:29:19 发布

阅读量386

点赞数

分类专栏： thymeleaf

本文链接：https://blog.csdn.net/weixin_43931625/article/details/107897526

版权

thymeleaf 专栏收录该内容

25 篇文章 3 订阅

订阅专栏

thymeleaf 引入模板

*********************

模板引入表达式

~{templateName :: fragement} 《==》 template :: fragment（两者等效）

templateName：模板名称，如 index.html在默认目录templates下，若要引入index.html中的片段，则需将templateName设置为index

fragment：th:fragment定义的名称，也可以是 juqery 选择器（#id、div、.class等）

说明：

templateName缺省（::fragment）：引入本地模版

fragmentment缺省（templateName）：将templateName全部引入

*********************

相关标签

th:fragment：定义模板片段

    <footer th:fragment="copy">
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>

th:insert：插入模板片段，模版片段作为当前标签的子标签插入

<div th:insert="~{footer :: copy}"></div>
<div th:insert="footer :: copy"></div>    //两者等同


************
插入结果

  <div>
    <footer>
      &copy; 2011 The Good Thymes Virtual Grocery
    </footer>
  </div>

th:replace：使用模板片段替换当前标签

<div th:replace="~{footer :: copy}"></div>
<div th:replace="footer :: copy"></div>       //两者等同


***********
插入结果

  <footer>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>

th:include ：从3.0 开始已经不推荐使用

*********************

示例

commons.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:fragment="header" th:align="center">
    <strong style="color: coral">欢迎，瓜田李下</strong>
</div>

<div id="footer" th:align="center">
    <strong style="color: deeppink">版权所有，切莫侵权</strong>
</div>
</body>
</html>

index.html

<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div th:align="center">
    <strong>
        <span th:text="引入commons模板" style="color: purple"></span>
    </strong>
    <div th:insert="commons :: header"></div>
    <div th:replace="commons :: #footer"></div><br>

    <strong>
        <span th:text="引入本地模版" style="color: purple"></span>
    </strong>
    <div th:replace=":: '#1'"></div>

    <div id="1">
        <strong style="color: greenyellow">hello world</strong>
    </div>
</div><br>

<div th:align="center">
    <strong>
        <span th:text="引入全部commons模版" style="color: purple"></span>
    </strong>
    <div th:replace="commons"></div>
</div>
</body>
</html>