Thymeleaf 模板布局

概述

这节主要介绍模板的引入。及如何在不改变前端人员的 HTML 显示结果的情况下设计模板（通过属性配置动态时不显示的部分）。

模板模块导入

首先定义一个 /resources/templates/footer.html 文件：

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
    <body>
        <div th:fragment="copy">
            &copy; 2018 Copyright by Lusifer.
        </div>
    </body>
</html>

上面的代码定义了一个片段称为 copy，我们可以很容易地使用 th:include 或者 th:replace 属性包含在我们的主页上

<body>
    <div th:include="footer :: copy"></div>
</body>

include 的表达式想当简洁。这里有三种写法：

templatename::domselector 或者 templatename::[domselector] 引入模板页面中的某个模块
templatename 引入模板页面
::domselector 或者 this::domselector 引入自身模板的模块

上面所有的 templatename 和 domselector 的写法都支持表达式写法：

<div th:include="footer :: (${user.isAdmin}? #{footer.admin} : #{footer.normaluser})"></div>

不使用 fragment 来引用模块

<div id="copy-section">
    &copy; 2018 Copyright by Lusifer.
</div>

我们可以用 CSS 的选择器写法来引入

<body>
    <div th:include="footer :: #copy-section"></div>
</body>

include 和 replace 的区别

th:include 和 th:replace 都可以引入模块，两者的区别在于：

th:include：引入子模块的 children，依然保留父模块的 tag
th:replace：引入子模块的所有，不保留父模块的 tag

举个例子

<footer th:fragment="copy">
    &copy; 2018 Copyright by Lusifer.
</footer>

引入界面

<body>
    <div th:include="footer :: copy"></div>
    <div th:replace="footer :: copy"></div>
</body>

显示结果

<body>
    <div>
        &copy; 2018 Copyright by Lusifer.
    </div>
    <footer>
        &copy; 2018 Copyright by Lusifer.
    </footer>
</body>

赏一赏

转载请注明: jiabaor-黄文贵个人博客 Thymeleaf 模板布局

Thymeleaf 内置对象

Thymeleaf 内置对象#dates/* * ====================================================================== * See javadoc API for cl

2019-11-23 SpringBoot-Thymeleaf

SpringBoot-Thymeleaf

Thymeleaf 常用语法

Thymeleaf 常用语法引入 Thymeleaf修改 html 标签用于引入 thymeleaf 引擎，这样才可以在其他标签里使用 th:* 语法，这是下面语法的前提。 <!DOCTYPE html SYSTEM "http://