一.前言

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

二.公共页面抽取

1.公共页面位置

如上图所示,我们首先在项目中新建一个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>

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

我们来解释下上面的代码，在公共页面我们定义了header和footer两个代码片段(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的下方,我们也可以引入当前页面特有的样式表.

三.结果展示

我们需要写一个跳转方法来展示刚才的页面,这里跳转方法大家自己写就行.

大家可以看到,我们在引入header片段时传递的参数已经生效,页面也正常显示,那我们看看刚才引入的代码段是否真正渲染到了页面?

通过右键查看网页源代码,我们发现我们已经成功的引入了公共页面,至此,大功告成!

thymeleaf页面中引入公共页面相关推荐

在html页面中引入公共的头部和底部
参考链接: http://www.cnblogs.com/jason-star/p/3345225.html http://blog.csdn.net/jsxzzliang/article/detai ...
springboot的thymeleaf一个页面中引入其它页面
引入页面内容(copy为自定义的) <div th:fragment="copy">这是引入内容</div> 引入方式(footer为引入页面名称) < ...
普通页面引入公共页面之后bootstrap中下拉菜单js效果失效无反应的问题
说下最近写页面遇到的一个坑,公共页面里用bootstrap框架搭了一个导航条,带有下拉菜单的导航条,bootstrap的css样式和js代码,在公共页面里已经引过了. 普通页面只需要引入下公共页面, ...
怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
同一页面中引入多个JS库产生的冲突解决方案(转)
发生JS库冲突的主要原因:与jQuery库一样,许多JS库都使用'$'符号作为其代号.因此在一个页面中引入多个JS库,并且使用'$'作为代号时,程序不能识别其代表哪个库(这个是我自己的解释,但更深的原 ...
【转】Vue.js入门教程（二）在页面中引入vue的方式
第二章:安装和基础效果展示页面中引入vue 因为我们的目标是在最短的时间之内学会vue的使用方法,所以我们不一定需要通过npm工程化进行安装,你直接用script在页面中引用也完全没有问题. 第一种 ...
如何在vue页面中引入其他的子组件？(局部引入/全局引入)
在页面中引入子组件分为局部引入和全局引入,局部引入顾名思义就是只在当前页面引入且只在当前页面显示,全局引入即引入后在所有页面都显示. 首先我们创建两个页面Test.vue和Tset2.vue: 起始效 ...
如何在vue项目中引入html页面
在vue项目中引入html页面的两种方法第一种:/static/page.html 第二种:通过iframe嵌入第一种:/static/page.html 在static或public文件夹下,新 ...
Vue | 实现页面跳转刷新，在Vue页面中调用其他页面的方法
最近有一个登录界面的需求,感觉很简单,尝试各种方法每次都感觉快要成功了,但还是没能解决问题,果然没有系统学习就是很难立刻找到突破点,难以一语中的,好在历经千帆,在页面调用中就解决了这个问题. 需求描述 ...

thymeleaf页面中引入公共页面