Thymeleaf引入公共片段方式
引入公共片段
引入公共片段的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>
注意
引入语法~{}
波浪线、花括号可以写,可以不写
但是,在行内写法中[[~{}]]、[(~{})]
必须,加上~{}
参考:https://blog.csdn.net/nangeali/article/details/82215708
Thymeleaf引入公共片段方式的更多相关文章
- thymeleaf引入公共css、js
有时候很多css文件是公共的,我们必须要在每个html文件中引入它们,其实我们可以利用Thymeleaf的模板布局,把这些css文件抽出来,同时如果有某个html文件专属的css文件,还可在引入模板的 ...
- thymeleaf 引入公共html注意事项
详细连接https://blog.csdn.net/u010260737/article/details/83616998 每个页面都会用到分页.html或者头部.html.尾部.html,在其他页面 ...
- th:insert、th:replace、th:include抽取和引用页面公共片段、传参等
一.抽取公共片段 th:fragment 给片段命名 将公共片段抽取出来,并在顶级标签内使用th:fragment给该片段命名. 例如:将公共片段抽取出来放到comment/bar.html中: & ...
- 基于 Webpack 引入公共库的几种方式
以 jquery 和其插件 jquery-modal 为例,记录下引入公共库的几种方式. 为了方便,首先安装 jquery 和 jquery-modal: cnpm i jquery jquery-m ...
- ThinkPHP5——引入公共部分head和foot(多种方法)
在项目中,header和footer重复使用的次数高,于是我们把header和footer作为公共部分,其他模板需要的话就引用.下面我教大家引用公共模板 1.使用include 首先在view下面新建 ...
- asp.net开发中常见公共捕获异常方式总结(附源码)
本文实例总结了asp.net开发中常见公共捕获异常方式.分享给大家供大家参考,具体如下: 前言:在实际开发过程中,对于一个应用系统来说,应该有自己的一套成熟的异常处理框架,这样当异常发生时,也能得到统 ...
- thinkphp5引入公共部分header、footer等
由于用惯了tp3.2,改用tp5有些还是感觉别扭的 直接上问题:项目中需要用到引入公共导航.头部.底部.右边部分等等 首先要弄清楚thinkphp5的配置项是哪个文件,众所周知:config.php, ...
- js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用)
js进阶ajax函数封装(匿名函数作为参数传递)(封装函数引入文件的方式非常好用) 一.总结 2.匿名函数作为参数传递 二.js进阶ajax函数封装 ajax1.js function ajax(ur ...
- vue 引入公共css文件
1.在入口js文件main.js中引入,一些公共的样式文件,可以在这里引入. import Vue from 'vue'import App from './App' // 引入App这个组件impo ...
随机推荐
- Luogu P2580 于是他错误的点名开始了 Trie树 字典树
字典树裸题.每次插入询问串,查询的时候拿出来直接查,信息保留在节点上. #include <bits/stdc++.h> using namespace std; char s[51]; ...
- (链表 双指针) leetcode 160. Intersection of Two Linked Lists
Write a program to find the node at which the intersection of two singly linked lists begins. For ex ...
- (DIjsktra算法) nyoj1401-一场说走就走的旅行
题目描述: 有一天,孩子回来对我说:“妈妈,听说马尔代夫很不错,放假了我想去玩.”马尔代夫?我也想去!没有人不向往一场说走就走的旅行!“其实我想去的地方很多,呼伦贝尔大草原.玉龙雪山.布达拉宫.艾菲尔 ...
- STM32 ------ 串口 数据位长度 和 奇偶校验位
USART_InitStructure.USART_WordLength 的值是数据位长度+一个奇偶校验位(如果无奇偶校验则不加一)
- Java Web服务收到请求时线程的情况
Web请求线程的状态 在开发中,突然想到了这样的一个问题, Java对每一次Web的请求,是否都会创建一条线程去进行处理呢?也就是说,当一个Class的方法同时有1000个请求访问时,线程是如何运作的 ...
- jest-babel报错:Requires Babel "^7.0.0-0", but was loaded with "6.26.3"
解决方法: yarn remove jest babel-jest babel-core @babel/core yarn add --dev jest babel-jest babel-core@^ ...
- Freemarker中的日期输出
<p> ${scheme.createTime?string("yyyy年MM月dd日 HH:mm:ss")}</p>
- linux部署Web项目总结
本文用的是CentOS7系统,不是虚拟机. 1.什么是Xshell? xshell连接上linux之后,就等同于linux本身的终端命令窗口. xshell不是必需品,但是它能更好的辅助我们学习lin ...
- vue-router拦截
说明:以下均在main.js中添加. 主要思路 1.在路由分发时,检查本地缓存是否有账号信息,如果没有,跳转登陆页面,传入当前路由 2.在发送请求时,添加账号token 3.在接收请求时,检查响应的数 ...
- 我的长大app开发教程第三弹:实现四个子页面绑定RadioButton
在开始之前先上一张图 在上一节中我们实现了底部Button,这一弹我们要实现点击四个按钮分别切换到不同页面,我们可以把页面分为两部分,顶部栏和中间内容部分,我们可以通过线性布局包裹两部分内容,顶部栏又 ...