thymeleaf的layout常用的有两种方式用法
第一种
将页面里的每个部分都分成 块
-> fragment
使用 th:include
和 th:replace
来引入页面
这种用法没有layout的概念, 因为每个部分都是 fragment
, 下面例子说明
<!-- index.html -->
<html>
<head>
<meta charset="utf-8"/>
<title>demo</title>
</head>
<body>
<div th:include="components/header :: header"></div>
<div class="container">
<h1>hello world</h1>
</div>
<div th:include="components/footer :: footer"></div>
</body>
</html>
<!-- components/header.html -->
<header th:fragment="header">
<ul>
<li>news</li>
<li>blog</li>
<li>post</li>
</ul>
</header>
<!-- components/footer.html -->
<header th:fragment="footer">
<div>i am footer.</div>
</header>
上面例子里用到的是th:include
, 也就是把定义好的fragment
引入的意思, 还有一个是th:replace
, 意思是替换当前页面里的这部分代码, 下面例子说明一下
<html>
<head>
<meta charset="utf-8"/>
<title>demo</title>
</head>
<body>
<div th:replace="components/header :: header">
<!-- 使用th:replace进来的header.html会替换下面的这个header -->
<header>
<ul>
<li>static - news</li>
<li>static - blog</li>
<li>static - post</li>
</ul>
</header>
</div>
<div class="container">
<h1>hello world</h1>
</div>
<div th:include="components/footer :: footer"></div>
</body>
</html>
第二种
写一个layout.html页面,当作页面的基础页面
<!-- layout/layout.html -->
<html>
<head>
<meta charset="utf-8"/>
<title>demo</title>
</head>
<body>
<div th:include="components/header :: header"></div>
<div layout:fragment="content"></div>
<div th:include="components/footer :: footer"></div>
</body>
</html>
在子页面里使用 layout:decorator
来将子页面里的内容加入到 layout.html里去
<!-- index.html -->
<html layout:decorator="layout/layout">
<head>...</head>
<body>
<div layout:fragment="content">
<h2>hello world!!!</h2>
</div>
</body>
</html>
这样在layout.html里引入的css,js,imgs都可以在子页面里用了,而且在子页面里还可以引入子页面需要用到的css,js,imgs, 就很方便了 推荐
模板传值
假如要往header.html里传入一个tab来区别应该高亮哪个菜单,可以使用下面的写法实现
先定一个样式
.active {
background-color: green;
}
<header th:fragment="header (tab)">
<ul>
<li><span th:class="${tab eq 'news'} ? active">news</span></li>
<li><span th:class="${tab eq 'blog'} ? active">blog</span></li>
<li><span th:class="${tab eq 'post'} ? active">post</span></li>
</ul>
</header>
调用写法
<div th:include="components/header :: header(tab='blog')"></div>
相关链接:
http://www.thymeleaf.org/doc/articles/layouts.html
END
原文链接: https://tomoya92.github.io/2017/03/09/thymeleaf-layout/
相关推荐
# spring-boot-thymeleaf 在springboot用thymeleaf模板引擎
Spring Boot Thymeleaf是一个集成了Thymeleaf模板引擎的Spring Boot Starter,用于简化在Spring Boot应用程序中使用Thymeleaf的过程。 Thymeleaf是一个现代服务器端Java模板引擎,可以处理HTML、XML、JavaScript、...
springboot整合thymeleaf模板
开源项目结合了springboot框架+thymeleaf模板引擎+layui前端框架+数据库+redis等技术
SpringBoot加Thymeleaf模板
使用SpringBoot 集成Spring-data-jpa,Druid连接池,thymeleaf模板实现的一个简单网上商城项目
thymeleaf模板解析.doc
使用Thymeleaf模板引擎渲染web视图 使用Thymeleaf模板引擎渲染web视图
Springboot怎么集成Thymeleaf模板引擎?
Thymeleaf模板驱动web1
Thymeleaf是⾯向Web和独⽴环境的现代服务器端Java模板引擎, 能够处 理HTML, XML, JavaScript, CSS甚⾄纯⽂本。 Thymeleaf旨在提供⼀个优雅的、 ⾼度可维护的创建模板的⽅式。 为了实 现这⼀⽬标, Thymeleaf建⽴...
Thymeleaf是一种用于Java和Spring应用程序的现代化服务器端Java模板引擎。它允许在模板中嵌入动态内容,并能够与后端Java代码进行交互,生成动态的HTML页面。 以下是Thymeleaf模板的一些基本特点和语法: 1. 声明...
07【掌握】Thymeleaf模板引擎.md
主要给大家介绍了关于Spring Boot集成Thymeleaf模板引擎的完整步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
在模板文件的表达式中,可以使用“${T(全限定类名).方法名(参数)}”这种格式来调用Java类的静态方法。 开发环境:IntelliJ IDEA 2019.2.2 Spring Boot版本:2.1.8 新建一个名称为demo的Spring Boot项目。 1、pom....
SpringBoot-thymeleaf模板集成,博文地址:http://blog.csdn.net/ABAP_Brave/article/details/53005794
SpringBoot集成Mybatis以及thymeleaf模板Demo。使用alibaba的druid数据库连接池。配置对应开发、测试、生产的配置架构。
基于springBoot+mybatis+shiro+thymeleaf 模板引擎 实现的后台管理系统
SpringBoot在搭建的时候不用XML配置文件,同时嵌入Tomcat,无需部署war,是一个搭建、使用起来都比较方便的框架。
此项目是基本Spring Boot 2.0.4版本开发的,使用Thymeleaf模板作为前端展示页面,进行基本的增删改查加分页