一个网站,一般header和footer是公共的,每个页面都需要,但是又不能每个页面都写一遍header和footer,对于thymeleaf来说也可以和jsp那样有include指令可以用。下面具体操作怎么用。

首先建立一个页面common_header.html,然后在里面写入下面内容:此处是引入公共js和css

,在这个页面使用了一个标签fragment=“common_js_css”,可以理解是在这个页面中某个代码块的ID,此页面可以写多个fragment。

 

<div th:fragment="common_js_css">

<script type="text/javascript" th:src="@{/plugins/jquery/jquery-3.0.2.js}"></script>

<link href="/css/style.css" rel="stylesheet" type="text/css">

</div>

 

在具体需要使用的页面,比如index.htm中这样使用,在需要的地方直接引入:

<span th:replace="common_header::common_js_css"></span>

其中common_header是需要引入页面的html名称,后面common_js_css是需要引入的代码块的ID,如果2个页面不在同一个页面,需要加路径,我这里是一个目录,就没有加。

 

我这里用的是replace,类似功能的还有下面2个,有所区别:

  • th:insert   :保留自己的主标签,保留th:fragment的主标签。
  • th:replace :不要自己的主标签,保留th:fragment的主标签。
  • th:include :保留自己的主标签,不要th:fragment的主标签。(官方3.0后不推荐)
下面截图展示了3个标签效果: