thymeleaf引用公共页面

本例采用的是Springboot+thymeleaf,因为公共页面属于动态页,因此需要放在templates目录下(具体几层自定义即可),我们这里做一个引用头部、主体和底部公共信息的示例

1. 公共信息页面

head.html,使?th:fragment 属性来定义被包含的模版?段,以供其他模版引用或者包含,这里我们定义了头部(admin_head(title))、主体(admin_common)、底部(admin_bottom)三个模板片段

<!DOCTYPE html>
<html>
<head th:fragment="admin_head(title)">
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <base th:href="${#request.getContextPath()}+‘/‘">
    <!-- 引用页面css样式 -->
    <link rel="stylesheet" th:href="@{/css/common/public.css}" media="all"/>
</head>
<body>
<th:block th:fragment="admin_common">
这是公共信息
</th:block>
<th:block th:fragment="admin_bottom">
    <!-- jquery控件 -->
    <script type="text/javascript" charset="utf-8" th:src="@{/js/common/jquery-3.4.1.min.js}"></script>
</th:block>
</body>
</html>

2. 引用定义好的模板片段

2.1 示例1

main.html,双冒号(::)前面是公共页面路径,不受当前页面层级影响,直接从根路径写即可

<!DOCTYPE html>
<html>
<!-- 引用公共页面头部片段信息,双冒号(::)前后都要有空格,切记 -->
<head th:replace="common/head :: admin_head(测试页)">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- 引用公共页面主体片段信息 -->
<body th:include="common/head :: admin_common">

</body>
</html>

我们来看一下页面源码,头部信息和主体都已经加载过来了

2.2 示例2

list.html,双冒号(::)前面是公共页面路径,不受当前页面层级影响,直接从根路径写即可

<!DOCTYPE html>
<html>
<!-- 引用公共页面头部片段信息,双冒号(::)前后都要有空格,切记 -->
<head th:replace="common/head :: admin_head(user列表)"></head>
<body>
    OK
    <!-- 引用公共页面底部片段信息 -->
    <th:block th:replace="common/head :: admin_bottom"></th:block>
</body>
</html>

我们来看一下页面源码,头部信息和主体都已经加载过来了

3. 引用说明

引用模板的时候可以使用 th:insert或者 th:replaceth:insert与th:replace 区别如下:
th:insert:将被引用的模板片段插?到自己的标签体中
th:replace:将被引用的模板片段替换掉自己
th:include:类似于 th:insert,?不是插??段,它只插?此?段的内容(Thymeleaf 3.0 之后不再推荐使?)

4. 项目目录结构如下

5. 标签说明

th:block空标签详解

6 源码

移步码云下载

原文地址:https://blog.51cto.com/1197822/2471587

时间: 2024-11-09 09:30:39

thymeleaf引用公共页面的相关文章

thymeleaf引入公共页面的某个片段

引入公共片段引入公共片段的th属性,包括三种方式 th:insert将公共片段,整个插入到声明引入的元素中 th:replace将声明引入的元素,替换为公共片段 th:include将被引入的片段的内容,包含进这个标签中 抽取公共片段 <footer th:fragment="copy">  2011 </footer> 引入方式 1 <div th:insert="footer :: copy"></div> 2 &

微信小程序引用外部js,引用外部样式,引用公共页面模板

https://blog.csdn.net/smartsmile2012/article/details/83414642 ================小程序引用外部js====================== //封装的函数function GetUserInfo2018() { console.log("获取用户信息8888")} function count(str) { console.log(str)} //转化成小程序模板语言 这一步非常重要 不然无法正确调用mod

Thymeleaf静态资源引入方式及公共页面代码抽取

静态资源引入 Thymeleaf模板引擎url问题,要用如下的方式写,确保在任何情况下都能访问到 <!-- Bootstrap core CSS --> <link href="bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"> <!-- 引用webjars的方式引入静态资源 --> <link th:href="@{/webjars/bootstrap/

如何抽离、引用公共部分页面

如何抽离.引用公共部分页面 如何抽离.引用公共部分页面.产生背景:最近,需要新开发一个jq官网项目.在做项目的时候经常会遇到一样的头部和底部,如果每个页面都复制一遍,不仅工作量大而且万一需要修改一下文章就更麻烦了,这时候就需要我们把公共部分提取出来,等需要的时候再引入页面.所以先考虑做的抽离页面,然后引用,这样可以自由拼凑,方便复用. 页面抽离及引入:使用jQ的load函数(公司项目一直用的JQ,出于兼容性原因) <!--在引入页面--> <div class="footer&

thymeleaf公共页面元素抽取

thymeleaf公共页面元素抽取 1.抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2.引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatename::selector}:模板名::选择器 ~{templatename::fragmentnam

如何针对Thymeleaf模板抽取公共页面

对于公共页面(导航栏nav.页头head.页尾footer)的抽取有三种方式:???????1)基于iframe进行抽取,这种方式很有效,但比较老了,另外为了页面的自适应性,还得做不少工作:???????2)如果是jsp页面,则可以通过<%@ include file="head.jsp"%>进行抽取???????3)利用ajax进行页面加载,但有不少问题???????基于Springboot后台开发框架,JSP虽然还是可以用,但已经强烈推荐使用Thymeleaf模板了,这

11、SpringBoot-CRUD-thymeleaf公共页面元素抽取

thymeleaf公共页面元素抽取 存在一种现象:两个文件的代码只有一部分代码不一样 其余的均相同,此时就可以提取公共的代码去简化开发 1.抽取公共片段 <div th:fragment="copy"> © 2011 The Good Thymes Virtual Grocery </div> 2.引入公共片段 <div th:insert="~{footer :: copy}"></div> ~{templatena

如何禁止使用框架iframe引用网站页面

如何禁止使用框架iframe引用网站页面:很多网站喜欢引用外站的页面,有的可能为了方便,有的可能喜欢对方网站,目的可能是多种多样的,但是有些站长并不像自己的网页被别人引用,下面就简单介绍一下如何实现此功能.方法一: if(top.location!==self.location){ top.location=self.location; } 只要在js中加上这句代码就可以解决此问题,代码比较简单这里就不多介绍了.相关阅读:1.top属性window对象的top属性一章节. 2.location属

Vuex的this.$store.commit和在Vue项目中引用公共方法

2018年11月22日 20:50:29 Funfction_Zero 阅读数 3230 1.在Vue项目中引用公共方法 作为一个新人小白,在使用vue的过程中,难免会遇到很多的问题,比如某个方法在很多组件中都能用的上,如果在每个组件上都去引用一次的话,会比较麻烦,增加代码量.怎么做比较好呢,话不多说直接看代码把 首先 要在main.js中引入公共js.然后,将方法赋在Vue的原型链上.像图中这样. 然后在需要的组件上去引入这个方法 mouted (){ //调用方法 this.common.l