Thymeleaf引入公共片段方式

引入公共片段

引入公共片段的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>

注意

引入语法~{}
波浪线、花括号可以写，可以不写

但是，在行内写法中[[~{}]]、[(~{})]
必须，加上~{}

Thymeleaf引入公共片段方式相关推荐

thymeleaf引入公共header
创建公共的header <!DOCTYPE html> <html lang="en" xmlns:th="http://www.thymeleaf.o ...
Thymeleaf抽取公共页面片段
抽取页面项目中,一般把所有的公共页面片段都抽取出来放在一个独立的页面中其他,所有的页面根据需要进行引用参考文档 th:fragment 抽取公共元素 Name,随便自定义命名 <!DOC ...
Thymeleaf中设置每个页面引入公共css样式
场景 Thymeleaf提取公共页面(从实例入手,以inspinia模板为例): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/9 ...
thymeleaf页面中引入公共页面
一.前言当我们在html页面使用thymeleaf时,经常会遇到这样的情况.有一些html片段在我们所有页面都存在,造成了代码重复.遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用 ...
Thymeleaf选择器引用公共片段
引用公共片段可以使用选择器,引用公共片段 ~{templatename::selector} 模板名::选择器侧边栏设置一个id属性  <nav c ...
npm file方式引入公共包遇到的几个坑
背景在<前端多个vue项目公共组件的三种方法(推荐npm file引入)>这一篇里讲了npm通过file方式引入公共包的方法,但在实际运用中,会遇到不少坑,这里就讲述笔者遇到的2个问题并 ...
vue 公用页面引用_vue中实现部分页面引入公共组件
前言我们可以把公共组件放到App.vue中,但是有时候我们希望某个页面不需要这写公共部分,那么需要怎么设置呢? 本文为大家介绍三种部分页面引入公共组件的方法. 方法一:利用子路由创建一个layou ...
php页面引用公共文件,WeiPHP插件模板中快速引入公共模板文件
WeiPHP插件模板中快速引入公共模板文件,weiphp建立于onethink之上,简单修改代码,无需填写绝对路径实现轻松引入模板.记录一下,分享给需要的人. 修改文件: ThinkPHP/Libra ...
iOS - 一个工程多个target引入CocoaPods的方式
一个工程多个target引入CocoaPods的方式 (推荐)方式一:通过abstract方式引入 #targetA: [AFNetworking,Masonry] #targetB:[AFNetwo ...

Thymeleaf引入公共片段方式

引入公共片段

th:insert

th:replace

th:include

引入方式

页面效果

注意

Thymeleaf引入公共片段方式相关推荐

最新文章

热门文章