Thymeleaf导入其他html(th:replace & th:include)

最新推荐文章于 2024-05-16 17:28:54 发布
最新推荐文章于 2024-05-16 17:28:54 发布
阅读量1.3w 收藏 8
点赞数 4

模板模块导入

首先定义一个/WEBINF/templates/footer.html文件：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     <body>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     <div th:fragment="copy">
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
                 &copy; 2011 The Good Thymes Virtual Grocery
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
            
     
     </div>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
        
     
     </body>
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </html>

上面的代码定义了一个片段称为copy,我们可以很容易地使用th:include 或者 th:replace属性包含在我们的主页上:


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <body>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     ...
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div th:include=
     
     "footer :: copy"
     
     >
     
     </div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </body>

include的表达式想当简洁。这里有三种写法：

<div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

不使用th:fragment来引用模块


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     ...
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div id=
     
     "copy-section"
     
     >
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     &copy; 
     
     2011 The Good Thymes Virtual Grocery
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </div>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     ...

我们可以用css的选择器写法来引入


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <body>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     ...
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div th:include=
     
     "footer :: #copy-section"
     
     >
     
     </div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </body>

th:include 和 th:replace的区别

th:include和th:replace都可以引入模块，两者的区别在于 
th:include：引入子模块的children，依然保留父模块的tag。 
th:replace：引入子模块的所有，不保留父模块的tag。 
举个栗子：


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

引入界面：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <body>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     ...
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div th:include=
     
     "footer :: copy"
     
     >
     
     </div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div th:replace=
     
     "footer :: copy"
     
     >
     
     </div>
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </body>

结果是：


 
 
  1. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <body>
    
    
    
   
   
  2. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     ...
    
    
    
   
   
  3. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <div>
    
    
    
   
   
  4. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     &copy; 
     
     2011 The Good Thymes Virtual Grocery
    
    
    
   
   
  5. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </div>
    
    
    
   
   
  6. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     <footer>
    
    
    
   
   
  7. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     &copy; 
     
     2011 The Good Thymes Virtual Grocery
    
    
    
   
   
  8. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </footer>
    
    
    
   
   
  9. 
   
   
    
    
    
    
   
   
    
   
   
    
    
    
    
     
     </body>
诚o
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
thymeleaf的th标签
08-24
Thymeleaf 的 th 标签大全 Thymeleaf 是一个基于服务器端的 Java 模板引擎，主要用来生成 HTML、XML、TXT 等文件。Thymeleaf 的 th 标签是其核心组件之一，提供了多种方式来控制模板的输出。本文将详细介绍 ...
thymeleaf:百里香叶
03-12
7. 模板导入：`th:include`和`th:replace`可以将一个模板嵌入到另一个模板中，实现代码复用。 三、Thymeleaf与Spring的集成 Thymeleaf与Spring框架结合使用时，可以方便地处理MVC模式中的视图部分。通过Spring MVC...
thymeleaf 页面引用实现动态布局加载
风子杨的博客中心
02-11 5022
thymeleaf 页面引用实现动态布局加载 最近在学习使用 springboot+thymeleaf，在把基本的框架布局功能实现了之后，发现了一些新的问题，就是所有页面都是全加载，也就是说每个页面都要实现布局，真是费时又费力。介于之前的web开发经验，一般都是上左右的布局方式，对于一些小的信息化系统建设也是很方便的一说。 通过这几天不停的看资料（其实就是百度...
thymeleaf引入其他html页面,相当于jsp的include用法
myth_g的博客
01-18 2万+
html为后缀名
springboot 通过thymeleaf引入静态html页面并引入js、css文件
最新发布
weixin_41463944的博客
05-16 438
springboot 通过thymeleaf引入静态html页面并引入js、css文件
SpringBoot系列教材 （三十）- Thymeleaf - thymeleaf 如何通过 fragment 包含另一个文件举例
Lan_ht的博客
11-30 452
把你自己做的项目文件夹，和我的可运行项目文件夹进行比较。在页面底部可以看到如图所示的版权信息，这个版权信息就是包含另一个页面的内容而来的。的可运行项目，配置运行起来，确认可用之后，再学习做了哪些步骤以达到这样的效果。在确保可运行项目能够正确无误地运行之后，再严格照着教程的步骤，对代码模仿一遍。th:replace ：不要自己的主标签，保留th:fragment的主标签。th:insert ：保留自己的主标签，保留th:fragment的主标签。，可以较为明显地提升学习速度，跨过学习路上的各个槛。
（项目实战干货）Spring boot 中Thymeleaf 模板 html 标签使用
热门推荐
zhtbs的博客
07-07 2万+
Spring boot 中Thymeleaf 模板 html 标签使用 ​ 在Spring boot 项目开发中，会常常使用到Thymeleaf模板。在对Thymeleaf模板标签的使用技巧，有的人不是很熟悉。这篇文章专门介绍一下模板标签的使用技巧。静态原型中（html页面）Thymeleaf元素与html元素相结合使用的说明与代码例子。文中会提高大量Thymeleaf标签的属性介绍和使用的逻辑示例代码。 1 文字内联标签引入 ​ Thymeleaf模板中的使用文字内联标签，需要在使用的html元素上加上
java渲染html_模板引擎 Thymeleaf 动态渲染 HTML
weixin_34208146的博客
02-15 1028
file1、添加依赖org.thymeleafthymeleaf3.0.9.RELEASE2、编码工具类 HTMLTemplateUtils.javaimport org.thymeleaf.TemplateEngine;import org.thymeleaf.context.Context;import java.util.Map;/*** HTML模板渲染工具类*/public class ...
HTML5模板引擎 Thymeleaf
06-06
通过`th:replace`和`th:include`属性，可以引入其他模板或片段，这对于构建复杂页面结构非常有用。 6. **延迟计算**：Thymeleaf的模板在服务器端预处理，但只有在需要时才会执行表达式，这使得在处理大量数据时提高...
java源码：HTML5模板引擎 Thymeleaf.zip
10-13
使用`th:include`和`th:replace`指令可以引入其他模板片段，这有助于代码重用和模块化。 总的来说，Thymeleaf作为一款现代的HTML5模板引擎，以其强大的功能和易用性，极大地简化了Java Web应用的视图层开发，提升...
thymeleaf th fragment高级应用 – Pure nonsense.rar
06-10
然后，我们可以通过`th:include`或`th:replace`指令来引用和插入Fragment。`th:include`会将Fragment内容嵌入到当前元素内部，而`th:replace`则会替换掉当前元素。例如： ```html <div th:include="/fragments/...
thymeleaf 引入公共html踩过的坑
u010260737的专栏
11-01 1万+
每个页面都会用到分页.html或者头部.html、尾部.html，在其他页面如何引入 1.注意::前后都要有空格，我第一次没有看到试了好多次，网上博客不实用，好多坑，无奈自己踩坑，一定要记一下。 2.目录这里举例 index.html 引入header.html  同一目录下 3.html 配置如图 div中 th:fragment="header" 与1中的：：后面的heade...
使用thymeleaf实现div中加载html
b078109的专栏
06-14 1696
目标：固定顶部或者左侧导航，点击导航动态更新中间content区域的页面，也就是在放一个div在页面上，把html加载到div里，以前类似的实现都是通过Iframe或者js实现，在使用springboot+thymeleaf后，以前的办法有点过时。 步骤一： 添加依赖 <dependency> <groupId>nz.net.ultraq...
模板引擎 Thymeleaf 动态渲染 HTML
程序员泥瓦匠
05-11 882
1、添加依赖 <!-- Thymeleaf 模板引擎 --> <dependency> <groupId>org.thymeleaf</groupId> <artifactId>thymeleaf</artifactId> <version>3.0.9.RELEASE</version> &l.
thymeleaf引用html_Thymeleaf 引入公共代码页面
weixin_29091837的博客
01-13 936
前面写过，写前端页面的时候，尤其是写后台管理系统，每个页面都会遇到一些重复的代码，比如左侧导航栏，头部的信息，前面也做了一些整合，把代码放在了公共的页面，每个页面调用时只需要用script引入即可。但是项目里面 用到的是Thymeleaf 模板，为了减少请求速度，用Thymeleaf 引入公共代码页面会提高页面跳转和打开的速度，虽然前端是有三大框架可以使用，但对于没有应用框架的代码里面，我们可以使...
thymeleaf 动态在html中根据后台返回到前台的值添加class样式
Lei_Da_Gou的博客
11-23 1万+
说明下：外层为一个div。class样式中有几个值，现在想动态添加一个class样式。myShowStyle和myHideStyle都是两个css样式。 这里对象lunbo1的id如果不为空就添加myShowStyle，否则就添加myHideStyle th:classappend="${lunbo1.id != null} ? 'myShowStyle' : 'myHideStyl...
Spring boot(17) thymeleaf 使用类似于include的方式
kkgbn的博客
03-27 1万+
1.建立模板secure_template.html<!DOCTYPE html> <!-- 仅作为模板使用,服务端不要直接返回 --> <html xmlns:th="http://www.thymeleaf.org"> <head> <title>权限center</title> <meta http-equiv="Content-Type" conten
Thymeleaf一个HTML文件A中引入另一张HTML文件B
m0_37540382的博客
07-30 1070
HTML A <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml" xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4"> ...
Thymeleaf定义和引用模板及include和replace的区别
Luck_ZZ的博客
03-08 5259
一、定义模板 可通过th:fragment定义模板片段和id定义模板片段th:fragment的值为模板片段的名称One通过th:fragmen定义模板片段；Two通过id定义模板片段；Three和four为了引用时，显示include和replace的区别；Five模板片段传参。myfrag.html&lt;html xmlns="http://www.w3.org/1999/xhtml" xm...
thymeleaf语法大全
06-08
Thymeleaf是一个流行的服务器端Java模板引擎，它提供了一套丰富的语法和标签，让开发者可以更加方便地处理HTML模板。以下是Thymeleaf的语法大全： 1. 基本语法 Thymeleaf的基本语法是使用${}表示表达式，例如： ``` <p th:text="${user.name}">John Doe</p> ``` 上面的代码会将user对象中的name属性的值显示在页面上。 2. 属性设置 Thymeleaf可以在HTML标签中添加属性，例如： ``` <img src="image.png" th:src="@{${user.avatarUrl}}" /> ``` 上面的代码中，使用@{}包裹表达式，将${user.avatarUrl}的值设置为img标签的src属性。 3. 条件判断 Thymeleaf支持if/else条件判断语句，例如： ``` <p th:if="${user.isAdmin}">Welcome Admin</p> ``` 上面的代码中，如果user.isAdmin为true，则显示“Welcome Admin”。 4. 列表循环 Thymeleaf可以通过th:each指令实现列表循环，例如： ``` <ul> <li th:each="item : ${items}" th:text="${item}"></li> </ul> ``` 上面的代码中，将items列表中的每个元素显示在li标签中。 5. 模板继承 Thymeleaf支持模板继承，可以在父模板中定义公共部分，例如： 父模板： ``` <html> <head th:fragment="head"> <title>My Website</title> <link href="style.css" rel="stylesheet" /> </head> <body> <header th:fragment="header"> <h1>My Website</h1> </header> <div th:fragment="content"></div> <footer th:fragment="footer"></footer> </body> </html> ``` 子模板： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org" th:include="layout/layout :: head"> <body> <div th:include="layout/layout :: header"></div> <div th:replace="content"></div> <div th:include="layout/layout :: footer"></div> </body> </html> ``` 上面的代码中，子模板使用th:include指令引入父模板的公共部分，使用th:replace指令替换content内容。 6. URL处理 Thymeleaf可以处理URL，例如： ``` <a th:href="@{http://www.example.com}">Example Website</a> ``` 上面的代码中，将链接指向http://www.example.com。 以上是Thymeleaf的语法大全，希望能帮助到你！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值