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 ...
随机推荐
- [javascript]——移动端 HTML5 图片上传预览和压缩
在开发移动端web网页中,我们不可避免的会遇到文件上传的功能,但由于手机图片尺寸太大,上传时间过长导致用户体验太差,就需要在上传前对图片进行一定的压缩. 在代码之前,有必要先了解我们即将使用到的几个A ...
- 把redhat源换成centos的,解决redhat未注册不能下载相关软件的问题
修改 vim /etc/yum.repos.d/centos-base.repo如下,清华源地址为 https://mirrors.tuna.tsinghua.edu.cn/help/cento ...
- js的window对象
js的window对象 1.子窗口方法 function testOpen(){ window.open('son.html','newwindow','height=400, width=600, ...
- 2016级算法期末上机-D.简单·AlvinZH's Fight with DDLs I
1117 AlvinZH's Fight with DDLs I 思路 简单题,动态规划. 本题与期末练习赛B题很相似,而且更为简单些.简化问题:在数字序列上取数,不能取相邻的数. DP数组定义,dp ...
- Django中的Cookie--实现登录
Django中的Cookie--实现登录 Django Cookie Cookie Cookie 是什么 保存在浏览器端的键值对,让服务器提取有用的信息. 为什么要有 Cookie 因为HTTP请求 ...
- webpack打包报错Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead
npm install –save-dev extract-text-webpack-plugin@next 会下载到+ extract-text-webpack-plugin@4.0.0-beta. ...
- dede发布内容限制违规词
DEDE限制违规词代码 //词汇过滤检查 if( $cfg_notallowstr != '' ) { if(preg_match("#".$cfg_notallowstr.&qu ...
- (转)DB2性能优化 – 如何通过调整锁参数优化锁升级
原文:http://blog.51cto.com/5063935/2074306 1.概念描述 所谓的锁升级(lock escalation),是数据库的一种作用机制,为了节约内存的开销, 其会将为数 ...
- 【Vim】Vim学习
1. 三种模式 (1)命令模式:刚启动vim便进入命令模式,此时敲击键盘会被当做命令来处理 以下是常用的几个命令: i 切换到插入模式,以输入字符.x 删除当前光标所在处的字符.: 切换到底线命令模式 ...
- rocksDB vs InnoDB vsTokuDB
原文地址 https://minervadb.com/index.php/2018/08/06/comparing-tokudb-rocksdb-and-innodb-performance-on-i ...