Thymeleaf学习记录(7)--页面引入/片段引入
1.为页面添加footer:
Templates文件夹下新建HTML文件:
<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org"> <body> <div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div> </body> </html>
在主文件添加
<div th:include="footer :: copy"></div>
即可。
运行结果如下:
2.th:include
和th:replace
之间的区别
th:include
将片段的内容包含在其主机标签中,但th:replace
实际上将用片段替换主机标签
3.可参数化的片段签名
前台插入代码:
<div th:fragment="frag (a,b)">
<p th:text="hello + ${a} + ' - ' + ${b}">...</p>
</div> <div th:include="::frag (zhang,san)">...</div>
<div th:include="::frag (a=li,b=si)">...</div>
运行结果如下:
3.文本内联
采用inline关键字可以将表达式嵌入文本。
以下两种方式等价:
<h1>Hello : <b th:text="${user.name}">姓名</b></h1>
<p th:inline="text">Hello, [[${user.name}]]!</p>
运行结果:
此外,还可以签入Js文件
<script th:inline="javascript">
/*<![CDATA[*/
... var username = /*[[${session.user.name}]]*/ 'Sebastian'; ...
/*]]>*/
</script>
Thymeleaf学习记录(7)--页面引入/片段引入的更多相关文章
- Thymeleaf学习记录(1)--启动模板及建立Demo
Thymeleaf是什么? Thymeleaf是适用于Web和独立环境的现代服务器端Java模板引擎.相比于JSP,Thymeleaf更简洁,渲染性能更好,维护性更好,它可以XML/XHTML/HTM ...
- Thymeleaf学习记录(6)--迭代及条件语法
迭代: 条件选择: IF-THEN: (if) ? (then) IF-THEN-ELSE: (if) ? (then) : (else) 默认: (value) ?: (defaultvalue) ...
- Thymeleaf学习记录(5)--运算及表单
Thymeleaf文本及预算: 字面 文本文字:'one text','Another one!',... 号码文字:0,34,3.0,12.3,... 布尔文字:true,false 空字面: nu ...
- Thymeleaf学习记录(4)--$/*/#/@语法
表达式符号 Thymeleaf对于变量的操作主要有$\*\#三种方式: 变量表达式: ${...},是获取容器上下文变量的值. 选择变量表达式: *{...},获取指定的对象中的变量值.如果是单独的对 ...
- Thymeleaf学习记录(2)--自动编译设置
了方便每次修改HTML文件都能实时刷新,做一下更改. 在application.properties文件加入以下命令: #thymeleaf start spring.thymeleaf.mode=H ...
- Vue学习记录-画页面
webstorm 因为之前开发ReactNative的时候,选择了webstorm,这回转战Vue,自然还是用它.如果什么也不做的话,打开Vue工程,编辑区域基本上没有语法高亮.怎么办呢? 安装插件( ...
- Thymeleaf学习记录(8)--表达式基本对象
基础对象 #ctx:上下文对象 /* * ====================================================================== * See ja ...
- Thymeleaf学习记录(3)--语法
语法: 标准表达式语法 简单表达: 变量表达式: ${...} 选择变量表达式: *{...} 消息表达式: #{...} 链接网址表达式: @{...} 字面 文本文字:'one text','An ...
- vue第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法)
第四单元(初识vue-在页面中直接引入vue框架-学习使用vue语法-vue的指令-介绍data用法-methods用法) #课程目标 了解 vue 框架的特点 掌握创建 vue 实例 掌握 data ...
随机推荐
- Jquery、Ajax实现新闻列表页分页功能
前端页面官网的开发,离不开新闻列表,新闻列表一般都会有分页的功能,下面是我自己总结加查找网上资料写的一个分页的功能,记录一下. 首先,官网的开发建立在前后端分离的基础上: 再有,后端小伙伴们提供列表页 ...
- 线程池(Linux实现)
讨论QQ群:135202158 本文技术参考了sourceforge项目c thread pool,链接:http://sourceforge.net/projects/cthpool/ 线程池如上一 ...
- Spring注解大全,汇总版
Spring使用的注解大全和解释 注解 解释 @Controller 组合注解(组合了@Component注解),应用在MVC层(控制层),DispatcherServlet会自动扫描注解了此注解的类 ...
- LINUX云服务器 安装 nginx
什么是nginx? 是一个高性能的 HTTP 和反向代理服务器,也是一个IMAP/POP3/SMTP 代理服, 是一个asynchronousservers异步服务器 为什么使用nginx? 因为它的 ...
- windows安装tesseract-OCR及使用
tesseract是Python的一个OCR(光学字符识别)库 首先下载tesseract的exe安装文件 https://github.com/UB-Mannheim/tesseract/wik ...
- SuperMap(无对应字段)空间属性挂接
一.数据准备 将一个没有基本属性的模型数据集和一个含有位置等属性信息的shp属性表进行挂接,两组数据之间没有连接字段,但同属一个坐标系下,只能通过空间位置信息进行属性挂接. 二.数据处理 基本思路:将 ...
- ui4-5
2016PS第4-5周 图像的高级编辑方法: 4-1.用变换将照片放入相框 1.打开素材文件01-1.jpg 2.执行:文件/置入,选素材01-2.jpg 3.执行:编辑/变换/缩放,缩小照片,暂不退 ...
- 使用NHibernate(1)--资料汇总
NHibernate最新版本是4.0,目前还只是alpha版,没有发布.稳定版本是3.3,项目中用的也是这个版本,所以以后的介绍都是基于这个版本的. 在网上找了一下相关的学习资料,现汇总如下: NHi ...
- linux mint 18.2 install erlang
由于Linux min 18.2仓库中的erlnag是18.2,我们手动安装最新版本,参考 https://www.erlang-solutions.com/resources/download.ht ...
- 微服务Kong(五)——添加一个用户(Consumer)
在本节中,我们将学习如何添加一个用户(consumer)到KONG实例中.用户是与使用您的API的个人相关联,可用于跟踪,访问管理等. NOTE:本节假设您已经正确启用了密钥验证插件.如果没有,请参考 ...