在编写页面时,常常会需要用到通用模块,比如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>