thymeleaf公共页面元素抽取
1、抽取公共片段
使用thymeleaf的th:fragment为样抽取的公共片段命名,
如下把div标签命名为 copy,就可以获取到div整个里的内容
<div th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</div>
2、引入公共片段
<div th:insert="~{footer :: copy}"></div>
~{templatename::selector}:模板名::选择器
~{templatename::fragmentname}:模板名::片段名
3、默认效果:
insert的公共片段在div标签中
如果使用th:insert等属性进行引入,可以不用写~{}:
行内写法可以加上:[[~{}]];[(~{})];
三种引入公共片段的th属性:
th:insert:将公共片段整个插入到声明引入的元素中
th:replace:将声明引入的元素替换为公共片段
th:include:将被引入的片段的内容包含进这个标签中
<footer th:fragment="copy">
© 2011 The Good Thymes Virtual Grocery
</footer>
引入方式
<div th:insert="footer :: copy"></div>
<div th:replace="footer :: copy"></div>
<div th:include="footer :: copy"></div>
效果
<div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
</div>
<footer>
© 2011 The Good Thymes Virtual Grocery
</footer>
<div>
© 2011 The Good Thymes Virtual Grocery
</div>
引入片段的时候传入参数:
<nav class="col-md-2 d-none d-md-block bg-light sidebar" id="sidebar">
<a class="nav-link active" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}"></a>
</nav>
<!--引入侧边栏;传入参数-->
<div th:replace="commons/bar::#sidebar(activeUri='emps')"></div>
然后可以通过
<a class="nav-link active" th:class="${activeUri=='main.html'?'nav-link active':'nav-link'}" href="#" th:href="@{/main.html}"> </a>
像上面的<a>做一些自定义操作
thymeleaf公共页面元素抽取的更多相关文章
- 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取
thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...
- Thymeleaf静态资源引入方式及公共页面代码抽取
静态资源引入 Thymeleaf模板引擎url问题,要用如下的方式写,确保在任何情况下都能访问到 <!-- Bootstrap core CSS --> <link href=&qu ...
- 通过动态包含和Ajax机制抽取Web应用的公共页面
在Java Web应用开发中,经常遇到的一种情况是,许多的页面中都包含着“公共页面”,这部分动态页面的特征是:访问量大,会带来较大的性能压力.功能设计上会动态地改变自身的元素.比如在登录前和登录后所展 ...
- 如何针对Thymeleaf模板抽取公共页面
对于公共页面(导航栏nav.页头head.页尾footer)的抽取有三种方式: 1)基于iframe进行抽取,这种方式很有效,但比较老了,另外为了页面的自适应性,还得做不少工作: ...
- thymeleaf 模板使用 提取公共页面
切记!!!thymeleaf模板的使用,姿势很重要!!!姿势不对,可能导致样式.js等的使用受到影响 前台开发中,由于页面目录结构不同,可能导致引入的公共页面中的的跳转路径在部分页面能用,部分页面不能 ...
- themeleaf引入公共页面
<div th:include="/top :: html"></div>//引用公共页面 <div th:replace="head&qu ...
- 页面元素坐标和偏移(clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等)相关整理
鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...
- juery学习总结(二)——juery操作页面元素
所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...
- 一个简便的方法,获取某个页面元素的Xpath值
今天了解到一个比较方便获取页面元素Xpath的方法,以下是获取步骤. 1:使用chrome浏览器打开百度:http://www.baidu.com 2:点击邮件,检查. 3:定位到某个页面的元素:点击 ...
随机推荐
- windows环境安装python虚拟环境
虚拟环境安装参考 https://www.cnblogs.com/suke99/p/5355894.html workon环境变量配置参照 https://www.cnblogs.com/jiuyan ...
- CAD动态绘制带面积周长的圆(com接口)
CAD绘制图像的过程中,画圆的情况是非常常见的,用户可以在控件视区点取任意一点做为圆心,再动态点取半径绘制圆. 主要用到函数说明: _DMxDrawX::DrawCircle 绘制一个圆.详细说明如下 ...
- H5 应用程序缓存(离线缓存)
离线缓存这个功能的实现有以下步骤: 1,以nginx做web服务器为例,在mime.types文件中添加一行:text/cache-manifest manifest,作用是为了让服务器识别该 ...
- Codeforces Round #468 Div. 2题解
A. Friends Meeting time limit per test 1 second memory limit per test 256 megabytes input standard i ...
- PHP中的几个随机数生成函数
PHP中的几个随机数生成函数 rand() 基于 libc 的随机种子发生器 mt_rand() 基于 Mersenne Twister 算法返回随机整数.它可以产生随机数值的平均速度比 libc 提 ...
- TensorFlow 学习笔记(2)----placeholder的使用
此系列将会每日持续更新,欢迎关注 在TensorFlow中输入值的方式是通过placeholder来实现 例如:做两个数的乘法时,是先准备好两个place, 再将输出值定义成两数的乘法 最后利用ses ...
- hdu 5182 PM2.5
问题描述 目前,我们用PM2.5的含量来描述空气质量的好坏.一个城市的PM2.5含量越低,它的空气质量就越好.所以我们经常按照PM2.5的含量从小到大对城市排序.一些时候某个城市的排名可能上升,但是他 ...
- tp5 微信支付开发流程
1.用户在选择商品后,向APi提交包含它所选择商品的相关信息. 2.APi在接收到信息后,需要检查订单相关商品的库存量. 3.有库存,把订单数据存入数据库中= 下单成功了,返回客户端消息,告诉客户端可 ...
- SCI 论文金句
SCI 不会写?其实英语基础好一点,文献多看一点,多写写自然就能自己写出来了.当然,你肯定会说英语真的好难,好吧,就知道你们懒得学英语了.我给你们整理了一套万能模板,涵盖了论文不同部分的常用句型. 摘 ...
- 手机版地图api
手机版地图api一: <iframe style="height:300px;" src="http://map.baidu.com/mobile/webapp/s ...