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

引入公共片段
引入公共片段的th属性,包括三种方式

th:insert
将公共片段,整个插入到声明引入的元素中

th:replace
将声明引入的元素,替换为公共片段

th:include
将被引入的片段的内容,包含进这个标签中

抽取公共片段

<footer th:fragment="copy">
  2011
 </footer>

引入方式

1 <div th:insert="footer :: copy"></div>
2 <div th:replace="footer :: copy"></div>
3 <div th:include="footer :: copy"></div>

引入语法~{模板名(即html)::片段名} 
波浪线、花括号可以写,可以不写

但是,在行内写法中[[~{}]]、[(~{})] 
必须,加上~{}

原文地址:https://www.cnblogs.com/wangchaoqi/p/11846955.html

时间: 2024-11-09 16:08:33

thymeleaf引入公共页面的某个片段的相关文章

thymeleaf引用公共页面

本例采用的是Springboot+thymeleaf,因为公共页面属于动态页,因此需要放在templates目录下(具体几层自定义即可),我们这里做一个引用头部.主体和底部公共信息的示例 1. 公共信息页面 head.html,使?th:fragment 属性来定义被包含的模版?段,以供其他模版引用或者包含,这里我们定义了头部(admin_head(title)).主体(admin_common).底部(admin_bottom)三个模板片段 <!DOCTYPE html> <html&

thymeleaf引入公共css、js

有时候很多css文件是公共的,我们必须要在每个html文件中引入它们,其实我们可以利用Thymeleaf的模板布局,把这些css文件抽出来,同时如果有某个html文件专属的css文件,还可在引入模板的基础上单独引入该css文件. 首先,建立一个公共文件layout.html 1 <!DOCTYPE html> 2 <html xmlns:th="http://www.thymeleaf.org"> 3 <head th:fragment="com

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

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

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

引入公共头部

现在的网站大多数都有公共的头部和尾部,如果在每个页面都复写一次,不仅仅加大了工作量,也不利于后期的维护,如果能将公共的部分单独建文件引入,就提高了工作效率,整理集中文件引入公共文件的方式如下: 1.html文件 新建公共头部文件,利用ifram引入 ,代码如下: <iframe marginwidth=0 marginheight=0 hspace=0 vspace=0 iframeborder=0 scrolling=no src="header.html" height=12

如何引入公共代码?

刚开始写项目的时候,有多少个页面,就复制多少次公共的代码(如头部,尾部).显然这不是明智之举.下面介绍一种引入公共头部的方法. 1.首先在页面引入该JavaScript文件(include.js). (function(window, document, undefined) { var Include39485748323 = function() {} Include39485748323.prototype = { //倒序循环 forEach: function(array, callb

不使用iframe引入其他页面的方法

不使用iframe引入其他页面的方法:大家知道iframe可以引入外部页面,这个自然很简单,这里就不多介绍了,其实还有一种其他的方式可以引入其他页面,废话不多说,直接看代码: <script type="text/javascript"> $(document).ready(function(){ $("#content").load("iframe.html"); }); </script> </head>