码迷,mamicode.com
首页 > Web开发 > 详细

在html中使用thymeleaf编写通用模块

时间:2017-11-08 17:56:11      阅读:242      评论:0      收藏:0      [点我收藏+]

标签:介绍   bsp   header   col   har   set   ble   使用   footer   

在编写页面时,常常会需要用到通用模块,比如header部分、footer部分等。

项目前端使用的是themeleaf模板引擎,下面简单介绍下使用themeleaf写header通用模块:

1. 通用部分: header2.html

主要使用th:gragment属性标记

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="common_header(title)">
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
  <title th:replace="${title}">head real</title>
</head>
<body>
<div class="header" style="height: auto;" th:fragment="header">
  这是来自header模块的内容...
</div>
</body>
</html>

2. 引用部分:

主要使用th:relpace属性进行标记

headDemo01.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>headDemo01</title>
</head>
<body>
<div th:replace="~{header2 :: header}"></div>
headDemo01
</body>
</html>

headDemo02.html

<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>headDemo02</title>
</head>
<body>
<div th:replace="~{header2 :: header}"></div>
headDemo02
</body>
</html>

 

在html中使用thymeleaf编写通用模块

标签:介绍   bsp   header   col   har   set   ble   使用   footer   

原文地址:http://www.cnblogs.com/miaoying/p/7804351.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!