Thymeleaf 使用Markup Selectors取得頁面片段。
Thymeleaf在使用th:insert
及th:replace
插入頁面片段時,除了在片段標籤定義th:fragment
外,也可透過Thymeleaf的Markup Selectors來選擇要插入的片段。
Markup Selectors語法類似XPath,CSS及JQuery選擇器,源於 AttoParser。
例如在「Spring Boot Thymeleaf 取代頁面片段」是透過th:fragment
來選擇片段。下面則移除th:fragment
改用Markup Selectors的方式插入片段。
片段頁面header.html
把th:fragment="header"
改為id="header"
如下。
header.html
<!DOCTYPE html>
<html">
<head>
</head>
<body>
<div id="header"><!--改為 id="header"-->
<h1>Thymeleaf Basic Include Demo</h1>
</div>
</body>
</html>
片段頁面footer.html
把th:fragment="footer"
改為class="footer"
如下。
footer.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="footer"><!--改為 class="footer"-->
Copyright © 2014-2021 菜鳥工程師 肉豬 All rights reserved.
</div>
</body>
</html>
在hello.html
改用th:replace="~{header :: #header}"
加入header.html
的片段:改用th:replace="~{footer :: .footer}"
加入footer.html
的片段。
hello.html
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Hello Thymeleaf</title>
</head>
<body>
<div th:replace="~{logo}"></div>
<div th:replace="~{header :: #header}">Header</div><!--改為 .#header-->
<div>
<p th:text="'Hello, ' + ${name} + '!'"/>
</div>
<div th:replace="~{footer :: .footer}">Footer</div><!--改為 .footer-->
</body>
</html>
上面解析的結果如下。
<!DOCTYPE html>
<html">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Hello Thymeleaf</title>
</head>
<body>
<div><img src="spring.png"></div>
<div>
<h1>Thymeleaf Basic Include Demo</h1>
</div>
<div>
<p>Hello, World!</p>
</div>
<div>
Copyright © 2014-2021 菜鳥工程師 肉豬 All rights reserved.
</div>
</div>
</body>
</html>
沒有留言:
張貼留言