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

来源：互联网发布：庆钰软件科技有限公司编辑：程序博客网时间：2024/05/16 14:24

方法一：

使用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>

在一般博文中多为使用方法一，方法二也一般只用于包含单个页面片段，其实th:include及th:replace包含整个页面也是没有问题的，而且还可以在包含的同时传参数给包含的页面，强烈推荐使用此方法

用springboot编写的示例demo已经更新至https://github.com/hylun/SpringWeb/tree/master/springboot-thymeleaf-layout-demo 或
https://gitee.com/hylun/SpringWeb/tree/master/springboot-thymeleaf-layout-demo

欢迎围观！

阅读全文

0 0