thymeleaf cited public pages

This embodiment uses a Springboot + thymeleaf, pages belonging to a dynamic page because the public, and therefore needs to be placed (in particular layers can be custom) directory under templates, we do here an example of the head, body and bottom of the public information reference

1. Public Information Page

head.html, Use th: fragment attributes to define stencil release segment is included for reference or template comprising other, where we define the head (admin_head (title)), body (admin_common), a bottom (admin_bottom) three template fragments

<!DOCTYPE html>
<html>
<head th:fragment="admin_head(title)">
    <meta charset="UTF-8">
    <title th:text="${title}"></title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <base th:href="${#request.getContextPath()}+'/'">
    <!-- 引用页面css样式 -->
    <link rel="stylesheet" th:href="@{/css/common/public.css}" media="all"/>
</head>
<body>
<th:block th:fragment="admin_common">
这是公共信息
</th:block>
<th:block th:fragment="admin_bottom">
    <!-- jquery控件 -->
    <script type="text/javascript" charset="utf-8" th:src="@{/js/common/jquery-3.4.1.min.js}"></script>
</th:block>
</body>
</html>

2. Reference defined template fragments

2.1 Example 1

main.html, double colons (: :) Page path in front of the public, without affecting the current page level, you can write directly to the path from the root

<!DOCTYPE html>
<html>
<!-- 引用公共页面头部片段信息,双冒号(::)前后都要有空格,切记 -->
<head th:replace="common/head :: admin_head(测试页)">
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<!-- 引用公共页面主体片段信息 -->
<body th:include="common/head :: admin_common">

</body>
</html>

We look at the page source, headers and body have come already loaded

thymeleaf cited public pages

2.2 Example 2

list.html, double colons (: :) Page path in front of the public, without affecting the current page level, you can write directly to the path from the root

<!DOCTYPE html>
<html>
<!-- 引用公共页面头部片段信息,双冒号(::)前后都要有空格,切记 -->
<head th:replace="common/head :: admin_head(user列表)"></head>
<body>
    OK
    <!-- 引用公共页面底部片段信息 -->
    <th:block th:replace="common/head :: admin_bottom"></th:block>
</body>
</html>

We look at the page source, headers and body have come already loaded

thymeleaf cited public pages

3. Referencing instructions

When referring to a template may be used in th: insert or th: replace th: insert and th: replace differences are as follows:
th: insert: the template fragments referenced Insert to their tag body
th: replace: the referenced template replace the fragments themselves
th: include: similar to th: insert, ⽽ not insert release segment START, only Insert the contents of this release segment (Thymeleaf no longer recommended after 3.0 Using)

4. Project directory structure is as follows

thymeleaf cited public pages

5. Label Description

th: block empty tags Detailed

6 Source

Cloud download code venue

Guess you like

Origin blog.51cto.com/1197822/2471587