在页面编辑中，有一些公共的页面部分（比如header，footer等）可以抽取出来放到模板中，其他页面使用的时候可以调取该模板，这样的好处是如果修改这些公共部分，只修改模板中的代码即可。

为了做到这一点,Thymeleaf需要我们定义包含可用的片段,我们可以通过使用：

  • th:fragment属性定义模板
  • th:include属性引入模板

例如：

1.创建一个template.html模板文件，加入如下代码：

<!--fotter-->

<div th:fragment="footer">

    <div class="page-footer">

        <div class="scroll-to-top">

            <i class="icon-arrow-up"></i>

        </div>

    </div>

</div>

注意：要加入th标签引用，<html lang="en" xmlns:th="http://www.thymeleaf.org">

2.在其他页面中引用即可：

<div th:include="template :: footer"></div>

引用语法解释：th:include="templatename::domselector"

templatename是要引入页面的路劲加上去掉后缀的名称，例如footer.html页面建立在/WEB-INF/templates/footer.html，所以templatename为footer;domselector就是dom选择器，即为th:fragment中的值，或是选择id

注意：这里同样也需要引入th标签。

其他灵活运用方式，请参考：

thymeleaf中的模板布局

Thymeleaf添加页面模板的更多相关文章

  1. thymeleaf 添加语法提示

    thymeleaf 添加语法提示: xmlns:th="http://www.thymeleaf.org"

  2. springboot 1.5.2 thymeleaf 添加templates 静态资源访问路径

    从velocity 模板切换到thymeleaf 后, 默认模板位置为templates , 有时候静态资源方在该目录下会出现访问404错误 解决办法: application.properties ...

  3. 极简 Spring Boot 整合 Thymeleaf 页面模板

    虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板, ...

  4. Spring Boot2 系列教程(九)Spring Boot 整合 Thymeleaf

    虽然现在慢慢在流行前后端分离开发,但是据松哥所了解到的,还是有一些公司在做前后端不分的开发,而在前后端不分的开发中,我们就会需要后端页面模板(实际上,即使前后端分离,也会在一些场景下需要使用页面模板, ...

  5. SpringBoot框架 之 Thymeleaf

    目录 Thymeleaf 添加启动器 创建模板文件夹 基本使用 综合使用 Thymeleaf 介绍 SpringBoot并不推荐使用jsp Thymeleaf 是一个跟 Velocity.FreeMa ...

  6. springboot02 Thymeleaf

    一.http协议 1. 什么是协议? 协议是交易双方共同遵守的一种约定,比如: 租房协议 , 购买协议.... 2. 什么是http协议? HTTP协议是Hyper Text Transfer Pro ...

  7. 【SpringBoot】转载 springboot使用thymeleaf完成数据的页面展示

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/weixin_36380516/artic ...

  8. springboot学习日志（二）-- thymeleaf学习

    本次学习如何使用thymeleaf以及相关语法1.在上一章写的那样 引入jar包到maven工程 <dependency> <groupId>org.springframewo ...

  9. 笔记43 Spring Security简介

    基于Spittr应用 一.Spring Security简介 Spring Security是为基于Spring的应用程序提供声明式安全保护的安全 性框架.Spring Security提供了完整的安 ...

随机推荐

  1. CCNA2.0笔记_ipv6的EIGRP

    IPv6的eigrp特征: 邻居发现 增量更新 快速收敛 负载均衡 三个表 -邻居表 -拓扑表 -路由表 配置ipv6的eigrp Router(config)#ipv6 unicast-routin ...

  2. vim搜索设置高亮

    vim搜索设置高亮 linux vim打开文档搜索字符串时,设置被搜索到字符串高亮显示. 有两种方法: 1.暂时设置:vim打开文档-->命令行形式输入set hlsearch. 缺点:关闭文档 ...

  3. Android之2D图形(圆、直线、点)工具类 （持续更新）

    public class Circle { private PointF centerPoint; private float radius; public PointF getCenterPoint ...

  4. redis存储对象与对象序列化详解

    redis主要存储类型最常用的五种数据类型: String Hash List Set Sorted set redis存储对象序列化和反序列化 首先来了解一下为什么要实现序列化 为什么要实现序列化接 ...

  5. rsync--数据镜像备份_转

    转载:rsync的配置使用 Rsync全称为remoterynchronization,rsync具有可使本地和远程两台主机之间的数据快速复制同步镜像.远程备份的功能,这个功能类似于scp命令,但优于 ...

  6. shellscript

    shell script 运行方法 -------------------------------------- 1. 以命令方式执行( 一般是以这种方式执行 ) 首先修改档案权限可以运行 chmod ...

  7. Jetty修改默认端口

    1.webserver: Jetty2.version:   7.6.5, 8.1.53.operation: 修改默认端口3.1 修改Jetty目录下的/etc/jetty.xml 文件中的[por ...

  8. Python之pandas

    official document: http://pandas.pydata.org/pandas-docs/stable/10min.html 基本数据结构:http://www.open-ope ...

  9. jQuery左右选择框

    <!DOCTYPE html> <html> <head> <title>左右选择框</title> <style type=&quo ...

  10. js 数组求和，多种方法，并比较性能

    可以借用下面12种方法对数组求和,创建一个长度为10w的数组,进行测试 every()       检测数值元素的每个元素是否都符合条件. filter()      检测数值元素,并返回符合条件所有 ...