springboot使用thymeleaf模板引擎配置layout

1036浏览

2022-01-08 23:23:34

1.目录结构

2.layout.html代码

<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- head-通用CSS -->
<head th:fragment="header(title)">
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <link rel="stylesheet" th:href="@{/static/pc/css/reset.css}">
</head>

<!-- 通用JS -->
<div th:fragment="script">
<script src="https://www.zxlmx.com/static/js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
</div>

3.home.html代码

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="~{'pc/common/layout' :: header('首页')}"/>
</head>
<body>
<div>
    首页
</div>

<th:block th:include="~{'pc/common/layout' :: script}"/>
</body>
</html>

4.编译后结果