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>

这是直接把整个页面全部引入

 

posted on 2019-11-21 10:53  银の扉页  阅读(279)  评论(0)    收藏  举报