在html中使⽤thymeleaf编写通⽤模块在编写页⾯时,常常会需要⽤到通⽤模块,⽐如header部分、footer部分等。
项⽬前端使⽤的是themeleaf模板引擎,下⾯简单介绍下使⽤themeleaf写header通⽤模块:
1. 通⽤部分: header
2.html
前端页面模板主要使⽤th:gragment属性标记
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="">
<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" th:fragment="header">
这是来⾃header模块的内容...
</div>
</body>
</html>
2. 引⽤部分:
主要使⽤th:relpace属性进⾏标记
headDemo01.html
<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="">
<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="">
<head>
<meta charset="UTF-8">
<title>headDemo02</title>
</head>
<body>
<div th:replace="~{header2 :: header}"></div>
headDemo02
</body>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论