SSM整合Thymeleaf时,抽取公共页面并向其传递参数
第一步
创建一个名为 header.html 的公共头部页面模板,放在 WEB-INF 目录下的 common 文件夹中。在 header.html 中可以编写头部页面的HTML代码,并通过Thymeleaf的语法来接收参数,如下所示:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head><meta charset="UTF-8"><title>公共头部</title>
</head>
<body><header><h1 th:text="${pageTitle}">默认页面标题</h1></header>
</body>
</html>
第二步
在需要引用公共头部的页面中,使用Thymeleaf的 th:replace 属性来引用公共页面,并通过 th:with 属性传递参数。
例如,在 index.html 页面中需要引用公共头部,并传递页面标题参数,可以在 标签中添加以下代码:
<body><div th:replace="common/header :: header" th:with="pageTitle='首页'"></div><!-- 其他页面内容 -->
</body>
这样,
标签中的 th:replace 属性会根据指定的模板路径 common/header 来替换为 header.html 中的内容,并通过 th:with 属性将 pageTitle 参数传递给公共头部页面。
在公共头部页面中,可以通过Thymeleaf的语法 ${pageTitle} 来获取传递的参数值,并动态显示在页面上。