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 ...
随机推荐
- mybatis pagehelper多数据源配置的坑
我用spring boot配置了2个数据源的工程用来同步不同库的数据,发现如果配置成如下格式报错 #分页配置pagehelper: helper-dialect: mysql reasonable: ...
- 序列化库MessagePack应用(C++)
介绍 MessagePack(简称msgpack)是一个小巧而高效的序列化/反序列化库,支持多种开发语言.官方网站:http://msgpack.org/ . 下面是官方的一个简介: It's lik ...
- 5. STL编程五
1. STL的六大组件: 容器(Container) 算法(Algorithm) 迭带器(Iterator) 仿函数(Function object) 适配器(Adaptor) 空间配置器(alloc ...
- JDK下载与安装、 Eclipse下载与使用的总结心得_20173311118_牛明旺
一.JDK下载与安装心得: ① 从官网http://www.oracl.com/technetwork/java上下载JDK,注意一定要同意该网站上的协议,否则下载不了(即点击“Accept Lic ...
- java学习笔记_接口
接口:interface(关键字) public interface USB {} 1. 接口中都是抽象方法,方法前面的可见度(public.private)和抽象关键字(abstract)可以不写. ...
- localhost, 127.0.0.1, 0.0.0.0
总结: localhost:是一个域名.域名可以认为是某个ip的别称,便于记忆.通常localhost对应的ip是127.0.0.1,不过这个也可以设置,参见知乎回答 127.0.0.1:是一个回环地 ...
- 解压命令tar zxvf中zxvf的意思
x : 从 tar 包中把文件提取出来 z : 表示 tar 包是被 gzip 压缩过的,所以解压时需要用 gunzip 解压 v : 显示详细信息 f xxx.tar.gz : 指定被处理的文件是 ...
- 并发编程>>四种实现方式(三)
概述 1.继承Thread 2.实现Runable接口 3.实现Callable接口通过FutureTask包装器来创建Thread线程 4.通过Executor框架实现多线程的结构化,即线程池实现. ...
- Python pip离线部署
因为生产环境不能联网,必须使用离线部署pip包,倒也不用部署Pypi镜像那么大工作量,其实蛮简单的,贴出了备忘 pip download -r requirements.txt -d packages ...
- follow up2-20190426
406. Minimum Size Subarray 同向双指针 https://www.lintcode.com/problem/minimum-size-subarray-sum/descript ...