Two ways to implement page layout using thymeleaf template

Method 1:

Using thymeleaf Layout:fragmentLabel, layout page as follows:

<!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}">Layout method one</a> <a th:href="@{/two}">Layout method 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>

The content page is as follows:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout"
    Layout:decorator="Layout1"><!-- layout file path-->
<head>
    <title>Page 1</title>
</head>
<body>
    <div layout:fragment="content">
        Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content Page 1 Content
    </div>
</body>
</html>

When rendering a page, the thymeleaf engine will render the content page

Replace content in with the layout page's
To achieve the purpose of layout.

Method 2:

Using the th:include or th:replace tags of thymeleaf, the layout page is as follows:

<!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}">Layout method one</a> <a th:href="@{/two}">Layout method 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>

The content page is as follows:

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
    Th:replace="layout2(title='page 2')"><!-- layout file path-->
    <div th:fragment="content">
        Page 2 Content Page 2 Content Page 2 Content Page 2 Content Page 2 Content Page 2 Content
    </div>
</html>

In general blog posts, the first method and the second method are generally only used to contain a single page fragment. In fact, th:include and th:replace contain the entire page is not a problem, but also can pass parameters to the included page at the same time. This method is strongly recommended.

The sample demo written with springboot has been updated to https://github.com/hylun/SpringWeb/tree/master/springboot-thymeleaf-layout-demo or
https://gitee.com/hylun/SpringWeb/tree/master/springboot-thymeleaf-layout-demo

Welcome to the crowd!

Tags: Thymeleaf Fragment SpringBoot Javascript

Posted on Thu, 09 Jul 2020 10:44:41 -0400 by Dethman