1、抽取公共片段

使用thymeleaf的th:fragment为样抽取的公共片段命名,

如下把div标签命名为 copy,就可以获取到div整个里的内容
<div th:fragment="copy">
  &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">
  &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>
    &copy; 2011 The Good Thymes Virtual Grocery
  </footer>
</div>

<footer>
  &copy; 2011 The Good Thymes Virtual Grocery
</footer>

<div>
  &copy; 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公共页面元素抽取的更多相关文章

  1. 11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

    thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 .抽取公共片段 <div th:fragment=&quo ...

  2. Thymeleaf静态资源引入方式及公共页面代码抽取

    静态资源引入 Thymeleaf模板引擎url问题,要用如下的方式写,确保在任何情况下都能访问到 <!-- Bootstrap core CSS --> <link href=&qu ...

  3. 通过动态包含和Ajax机制抽取Web应用的公共页面

    在Java Web应用开发中,经常遇到的一种情况是,许多的页面中都包含着“公共页面”,这部分动态页面的特征是:访问量大,会带来较大的性能压力.功能设计上会动态地改变自身的元素.比如在登录前和登录后所展 ...

  4. 如何针对Thymeleaf模板抽取公共页面

    对于公共页面(导航栏nav.页头head.页尾footer)的抽取有三种方式:        1)基于iframe进行抽取,这种方式很有效,但比较老了,另外为了页面的自适应性,还得做不少工作:     ...

  5. thymeleaf 模板使用 提取公共页面

    切记!!!thymeleaf模板的使用,姿势很重要!!!姿势不对,可能导致样式.js等的使用受到影响 前台开发中,由于页面目录结构不同,可能导致引入的公共页面中的的跳转路径在部分页面能用,部分页面不能 ...

  6. themeleaf引入公共页面

    <div th:include="/top :: html"></div>//引用公共页面 <div th:replace="head&qu ...

  7. 页面元素坐标和偏移(clientX/pageX/screenX/layerX/offsetWidth/scrollWidth/clientWidth等)相关整理

    鼠标事件都是在特定位置发生的,我们可以通过event事件对象的各种属性来获得事件发生的坐标位置,有相对于视口的,有相对于整个文档的,同样页面元素的位置也有相对视口的,也有滚动后的,这些都比较容易混淆, ...

  8. juery学习总结(二)——juery操作页面元素

    所有的操作都可以分为增.删.改.查四种,juery选择器代表查看的功能,那么剩下的操作就是对页面元素增.删.改.页面元素有3部分构成:标签,属性和内容,juery对元素的操作可以从这3方面入手. 一. ...

  9. 一个简便的方法,获取某个页面元素的Xpath值

    今天了解到一个比较方便获取页面元素Xpath的方法,以下是获取步骤. 1:使用chrome浏览器打开百度:http://www.baidu.com 2:点击邮件,检查. 3:定位到某个页面的元素:点击 ...

随机推荐

  1. c#仿照qq登录界面编辑框内容操作

    using System; using System.Drawing; using System.Windows.Forms; namespace 案例演示 { public partial clas ...

  2. vue 与 angular 的区别

    vue仅仅是mvvm中的view层,只是一个如jquery般的工具库,而不是框架,而angular而是mvvm框架. vue的双向邦定是基于ES5 中的 getter/setter来实现的,而angu ...

  3. Python-暑期实训day 1

    python基础: 一 编程语言 什么是编程语言? 上面提及的能够被计算机所识别的表达方式即编程语言,语言是沟通的介质,而编程语言是程序员与计算机沟通的介质.在编程的世界里,计算机更像是人的奴隶,人类 ...

  4. Sersync+Rsync实现数据文件实时同步

    rsync+inotify-tools与rsync+sersync架构的区别1,rsync+inotify-tools只能记录下被监听的目录发生的变化(增删改)并没有把具体变化的文件或目录记录下来在同 ...

  5. 蓝桥-区间K大数查询

    问题描述: 给定一个序列,每次询问序列中第l个数到第r个数中第K大的数是哪个. 输入格式 第一行包含一个数n,表示序列长度. 第二行包含n个正整数,表示给定的序列. 第三个包含一个正整数m,表示询问个 ...

  6. vue 微信授权解决方案

    背景 前后端分离项目 - SpringSocial 绑定与解绑社交账号如微信.QQ2018-08-14更新时隔四个月第一次更新,因为项目重构有一次接触到了微信授权,思路已经比原来清晰的多了,将重新修改 ...

  7. BZOJ 1444 [JSOI2009]有趣的游戏 (AC自动机、概率与期望DP、矩阵乘法)

    诶这题洛谷居然没有??? 题目链接: https://www.lydsy.com/JudgeOnline/problem.php?id=1444 题解: 我见到主要有三种做法. 一是矩阵乘法.设\(d ...

  8. Django——13 Auth系统 登陆注册实例 权限的实现

    Django Auth系统中的表 注册登陆实例 权限的实现 登陆权限 操作权限 组操作  Auth系统中的表 从表的名称我们就能看出,auth_user,auth_group,auth_permiss ...

  9. 【郑轻邀请赛 F】 Tmk吃汤饭

    [题目链接]:https://acm.zzuli.edu.cn/zzuliacm/problem.php?id=2132 [题意] [题解] 很容易想到用队列来模拟; 这个队列维护的是正在煮的4个人煮 ...

  10. SVN学习总结(3)——分支合并

    首先在主干trunck上,创建分支branch1.0.0,如下图: 从主干切换到branch1.0.0,在branch1.0.0中添加test.java文件, 分支与主干的合并,首先应将主干trunc ...