thymeleaf页面中引入公共页面_thymeleaf

一.前言

当我们在html页面使用thymeleaf时,经常会遇到这样的情况。有一些html片段在我们所有页面都存在,造成了代码重复。遇到这种场景,我们就可以把公共代码段抽取到一个公共页面,在需要使用它的地方,我们引入就行。

二.公共页面抽取

1.公共页面位置

thymeleaf页面中引入公共页面_# Thymeleaf_02
如上图所示,我们首先在项目中新建一个html文件,名称为:include.html,位置如图中所示。

2.公共页面内容

<!DOCTYPE html>
<!--suppress ALL-->
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">

<head th:fragment=header(title)>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no"/>
    <title th:text="${title}"></title>
    <link th:href="${application.webStaticUrl}+@{common/layer/need/layer.css}" rel="stylesheet"/>
</head>
<body>
<!-- 通用JS -->
<div th:fragment="footer">
    <script th:src="${application.webStaticUrl}+@{common/jquery-2.1.0.js}"></script>
    <script type="text/javascript" th:src="${application.webStaticUrl}+@{common/pop_up/pop_up.js}"></script>
    <script th:src="${application.webStaticUrl}+@{common/layer/layer.js}"></script>
</div>
</body>
</html>

上述代码中涉及的标签的使用方法这里不做赘述,大家可以自行百度

我们来解释下上面的代码,在公共页面我们定义了headerfooter两个代码片段(fragment翻译过来就是片段),其中在header片段我们传递了一个参数,将它设置到title标签。

大家可以看出,我们将页面中head的公共部分和常用的js抽取出来,形成了这个公共页面.至于代码中的${application.webStaticUrl}是我们项目自己定义的静态资源访问前缀,大家可以替换为自己项目中访问路径即可.

3.公共页面使用

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head lang="en">
    <th:block th:include="include :: header('test')" />
    <!--引入页面样式-->
    <!--<link rel="stylesheet" th:href="${application.webStaticUrl}+'test.css'" />-->
</head>
<body>
<p>milogenius</p>
<th:block th:include="include :: footer" />
</body>
</html>

我们来说明下上面的代码,大家可以看到我用两对th:block标签和th:include标签来引入了我们刚才定义的代码段,在引入header时,我们传递了参数test,在引入header的下方,我们也可以引入当前页面特有的样式表.

三.结果展示

我们需要写一个跳转方法来展示刚才的页面,这里跳转方法大家自己写就行.
thymeleaf页面中引入公共页面_公共页面_03
大家可以看到,我们在引入header片段时传递的参数已经生效,页面也正常显示,那我们看看刚才引入的代码段是否真正渲染到了页面?
thymeleaf页面中引入公共页面_thymeleaf_04
通过右键查看网页源代码,我们发现我们已经成功的引入了公共页面,至此,大功告成!