themyleaf include,insert,replace及公共代码的引入
1.简单的例子区分include,insert与replace:
需要导入的代码
<header th:fragment="nav">
<p>引入</p>
</header>
前端代码
//include3.0版本后不推荐使用,public/head为文件相对路径;include不保留引入标签,保留前端标签
<div th:include="public/head :: nav"></div>
//insert插入,3.0新增,保留引入标签,保留前端标签
<div th:insert="public/head :: nav"></div>
//replace替换,3.0新增,保留引入标签,不保留前段标签
<div th:replace="public/head :: nav"></div>
结果代码
//include
<div>
<p>引入</p>
</div>
//insert
<div>
<header>
<p>引入</p>
</header>
</div>
//replace
<header>
<p>引入</p>
</header>
2.引入公共代码
如头部的引入,公共的css或js直接可以引用,不过若要加入额外的css或js会产生一些问题
如,你在公共页面head.html中写上
<head th:fragment="head(title)">
<meta charset="UTF-8">
<title>${title}</title>//替换某一元素
<link ...>//公共css
<link ...>
</head>
然后在页面引入的时候可以写
<head th:replace="public/head :: head('首页')"></head>
这样能在首页引入公共页面的头部标签所有内容,但是若首页有独立的css样式需要引入,
只剩下两种方法,一个是直接在页面上编写,另一种将在下面讲到
创建新的文件head-config.html,直接在里面写上
<meta charset="UTF-8">
<link ...>//公共css
<link ...>
然后在首页写上
<head>
<title>首页</title>
<head th:replace="public/head-config"></head>
<link ...>//额外的css
</head>
这是直接把整个页面全部引入
浙公网安备 33010602011771号