thymeleaf模版实现页面布局(layout)两种方法

最新推荐文章于 2024-08-10 08:32:58 发布

heylun

最新推荐文章于 2024-08-10 08:32:58 发布

阅读量2.1w

点赞数 1

分类专栏： java 文章标签： spring-boot spring-mvc thymeleaf

本文链接：https://blog.csdn.net/heylun/article/details/78732192

版权

java 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

方法一：

使用thymeleaf的layout:fragment标签，布局页如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
    * {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
    .header {background-color: #f5f5f5;padding: 20px;}
    .header a {padding: 0 20px;}
    .container {padding: 20px;margin:20px auto;}
    .footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
    </style>
</head>
<body>
    <header class="header">
        <div>
            <a th:href="@{/one}">布局方法一</a> <a th:href="@{/two}">布局方法二</a>
        </div>
    </header>
    <div class="container" layout:fragment="content"></div>
    <footer class="footer">
        <div>
            <p style="float: left">&copy; Hylun 2017</p>
            <p style="float: right">
                Powered by <a href="http://my.oschina.net/alun" target="_blank">Alun</a>
            </p>
        </div>
    </footer>
    <script th:inline="javascript" th:if="${alertMsg}">alert('[[${alertMsg}]]');</script>
</body>
</html>

内容页如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    layout:decorator="layout1"><!-- layout文件路径-->
<head>
    <title>页面1</title>
</head>
<body>
    <div layout:fragment="content">
        页1内容 页1内容 页1内容 页1内容 页1内容 页1内容 页1内容 页1内容 页1内容 页1内容
    </div>
</body>
</html>

在页面渲染时，thymeleaf引擎会将内容页中

中的内容替换至布局页的

，达到布局的目的。

方法二：

使用thymeleaf的th:include或th:replace标签，布局页如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title th:text="${title}"></title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
    * {font-family: Microsoft YaHei, Tahoma, Helvetica, Arial, sans-serif;}
    .header {background-color: #f5f5f5;padding: 20px;}
    .header a {padding: 0 20px;}
    .container {padding: 20px;margin:20px auto;}
    .footer {height: 40px;background-color: #f5f5f5;border-top: 1px solid #ddd;padding: 20px;}
    </style>
</head>
<body>
    <header class="header">
        <div>
            <a th:href="@{/one}">布局方法一</a> <a th:href="@{/two}">布局方法二</a>
        </div>
    </header>
    <div  class="container" th:include="::content"></div>
    <footer class="footer">
        <div>
            <p style="float: left">&copy; Hylun 2017</p>
            <p style="float: right">
                Powered by <a href="http://my.oschina.net/alun" target="_blank">Alun</a>
            </p>
        </div>
    </footer>
    <script th:inline="javascript" th:if="${alertMsg}">alert('[[${alertMsg}]]');</script>
</body>
</html>

内容页如下：

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    th:replace="layout2 (title='页面2')"><!-- layout文件路径-->
    <div th:fragment="content">
        页2内容 页2内容 页2内容 页2内容 页2内容
    </div>
</html>