Thymeleaf的模板使用介绍
参考网址: https://blog.csdn.net/hry2015/article/details/73476973
先定义一个html文件, 如下:
文件路径: templates/template/footer.html
内容如下:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<meta charset="UTF-8" />
<body>
<span th:fragment="copy"> 2017 hry loaded by fragment=copy</span>
<span id="copy-section"> 2017 hry loaded by id=copy-section</span>
<span th:fragment="frag(month, date)"> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>
</body>
</html>
fragment语法
加载语法如下:
templatename::selector:”::” 前面是模板文件名,后面是选择器
::selector:只写选择器,这里指fragment名称,则加载本页面对应的fragment
templatename:只写模板文件名,则加载整个页面 example:
<!-- 语法说明 "::"前面是模板文件名,后面是选择器 -->
<div th:include="templates/template/footer::copy"></div>
<!-- 只写选择器,这里指fragment名称,则加载本页面对应的fragment -->
<div th:include="::#copy-section"></div>
<!-- 只写模板文件名,则加载整个页面 -->
<div th:include="templates/template/footer"></div>
<!-- 语法说明"::"前面是模板文件名,后面是选择器 -->
<div> 2017 hry loaded by fragment=copy</div>
<!-- 只写选择器,这里指fragment名称,则加载本页面对应的fragment -->
<div>2017 hry loaded by id=copy-section</div>
<!-- 只写模板文件名,则加载整个页面 -->
<div>
<html>
<meta charset="UTF-8" />
<body>
<spanth:fragment="copy"> 2017 hry loaded by fragment=copy</span>
<span id="copy-section"> 2017 hry loaded by id=copy-section</span>
<span th:fragment="frag(month, date)"> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>
</body>
</html>
</div>
<!-- 这里加载”th:fragment 定义用于加载的块“ -->
<div th:include="templates/template/footer::copy"></div> <!-- 这里加载”id=copy-section“的节点 -->
<div th:include="templates/template/footer::#copy-section"></div>
结果:
<!-- 这里加载”th:fragment 定义用于加载的块“ -->
<div> 2017 hry loaded by fragment=copy</div> <!-- 这里加载”id=copy-section“的节点 -->
<div> 2017 hry loaded by id=copy-section</div>
th:include 和 th:replace 区别
<span th:fragment="copy">2017 hry loaded by fragment=copy</span>
th:include: 加载模板的内容: 读取加载节点的内容(不含节点名称),替换div内容
th:replace: 替换当前标签为模板中的标签,加载的节点会整个替换掉加载他的div <!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
<div th:include="templates/template/footer::copy">1</div>
<!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div> -->
<div th:replace="templates/template/footer::copy">2</div> 结果:
<!-- 加载模板的内容: 读取加载节点的内容(不含节点名称),替换<div>的内容 -->
<div> 2017 hry loaded by fragment=copy</div> <!-- 替换当前标签为模板中的标签: 加载的节点会整个替换掉加载他的<div> -->
<span> 2017 hry loaded by fragment=copy</span>
参数化模板配置
<span th:fragment="frag(month, date)"> <span th:text="'welcome hry come in ' + ${month} + '-' + ${date}"></span></span>
${month} 和 ${date}是从后台传过来的
<div th:include="templates/template/footer::frag(${month},${date})">config</div>
结果:
<div> <span>welcome hry come in 6-19</span></div>
Thymeleaf的模板使用介绍的更多相关文章
- 对Thymeleaf的一些笼统介绍和理解
(随手记录的,,可能没那么易看,sorry le) 先大概介绍一下关于Thymeleaf的概念和理解:首先Thymeleaf模板引擎(换句话说他是现代服务器端的Java模板引擎,) 他所对应的主要作用 ...
- [Xcode 实际操作]一、博主领进门-(1)iOS项目的创建和项目模板的介绍
目录:[Swift]Xcode实际操作 本文将演示iOS项目的创建和项目模板的介绍. [Create a new Xcode project]创建一个新的项目. 在弹出的模板窗口中,显示了所有的项目模 ...
- Django笔记&教程 3-2 模板语法介绍
Django 自学笔记兼学习教程第3章第2节--模板语法介绍 点击查看教程总目录 参考:https://docs.djangoproject.com/en/2.2/topics/templates/# ...
- SpringBoot入门篇--Thymeleaf引擎模板的基本使用方法
我们在使用SpringBoot框架的时候在前面已经介绍了Thymelea引擎模板,因为SpringBoot对JSP惨不忍睹的支持.那我们在使用引擎模板对前端页面进行渲染能够返回的情况下我们怎么才能在静 ...
- Visro 应用的前端模板工具介绍 -JsRender
1.什么是JsRender: JsRender是一款JavaScript模版引擎,是具有简单直观,功能强大,可扩展的,早期版本是基于JQUERY 写的,后来作者重构了,就不再依赖JQUERY了. 它的 ...
- STL标准模板库介绍
1. STL介绍 标准模板库STL是当今每个从事C++编程的人需要掌握的技术,所有很有必要总结下 本文将介绍STL并探讨它的三个主要概念:容器.迭代器.算法. STL的最大特点就是: 数据结构和算法的 ...
- js模板引擎介绍搜集
js模板引擎越来越多的得到应用,如今已经出现了几十种js模板引擎,国内各大互联网公司也都开发了自己的js模板引擎(淘宝的kissy template,腾讯的artTemplate,百度的baiduTe ...
- Underscore.js 的模板功能介绍与应用
Underscore是一个非常实用的JavaScript库,提供许多编程时需要的功能的支持,他在不扩展任何JavaScript的原生对象的情况下提供很多实用的功能,需要了解的朋友可以详细参考下 U ...
- 使用MyGeneration创建模板:介绍(翻译)
原文信息 原文地址 原文作者信息: Justin Greenwood MyGeneration Software http://www.mygenerationsoftware.com April 2 ...
随机推荐
- 36.浅谈DLL劫持
最近在搞内网,需要实现免杀后门,大佬推荐了dll劫持,DLL劫持后,能干很多事情,比如杀软对某些厂商的软件是实行白名单的,你干些敏感操作都是不拦截,不提示的.还有留后门,提权等等.本文主要介绍如何检测 ...
- 实用掌中宝--HTML&CSS常用标签速查手册 PDF扫描版
实用掌中宝--HTML&CSS常用标签速查手册 内容推荐: 本书第一篇以语法和实例相结合的形式,详细讲解了HTML语言中各个元素及其属性的作用.语法和显示效果:第二篇从CSS基本概念开始,分别 ...
- 新一代web框架Koa源码学习
此文已由作者张佃鹏授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. Koa 就是一种简单好用的 Web 框架.它的特点是优雅.简洁.表达力强.自由度高.本身代码只有1000多行 ...
- Ocelot(五)- 流量限制、服务质量
Ocelot(五)- 流量限制.服务质量 作者:markjiang7m2 原文地址:https://www.cnblogs.com/markjiang7m2/p/10965300.html 源码地址: ...
- matplotlib.pyplot import报错: ValueError: _getfullpathname: embedded null character in path
Environment: Windows 10, Anaconda 3.6 matplotlib 2.0 import matplotlib.pyplot 报错: ValueError: _getfu ...
- ES6扩展运算符...进行的数组删除
今天写了按照React小书写了Reducer,发现基础真是太重要了,所有关于上层建筑的细节都需要回到下层细节中去寻找,而且现在的基础也由ES3变成了ES6了. const ADD_USER = &qu ...
- Asp.net Core 创建控制器时出错问题记录(运行所选代码生成器时出错)
问题描述:在创建一个MVC控制器(带读写,使用EF) 解决方法:添加nuget包
- Models-查询详细操作
# 单表简单查询13种方法 1.all(): 查询所有结果 all: models.表名.objects.all() book_all=models.Book.objects.all() # 结果是q ...
- 配置HEXO
软件介绍 Hexo 是一个快速.简洁且高效的博客框架.Hexo 使用 Markdown(或其他渲染引擎)解析文章,在几秒内,即可利用靓丽的主题生成静态网页. 使用版本和操作系统 官网最新版 Windo ...
- 009 Palindrome Number 判断一个正整数是否是回文数
详见:https://leetcode.com/problems/palindrome-number/description/ 实现语言:Java 方法一: class Solution { publ ...