網頁

▼

2021/5/23

Thymeleaf 使用Markup Selectors取得頁面片段

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>


沒有留言:

張貼留言