thymeleaf的fragment例子

時間 2019-11-09

標籤 thymeleaf fragment 例子简体版

原文原文鏈接

fragment介紹

fragment相似於JSP的tag，在html中文件中，能夠將多個地方出現的元素塊用fragment包起來使用。javascript

定義fragment

新建foot.html文件css

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<footer th:fragment="footDiv">
    the content of footer
</footer>
</html>

fragment的引用

th:insert:保留本身的主標籤，保留th:fragment的主標籤。
th:replace:不要本身的主標籤，保留th:fragment的主標籤。
th:include:保留本身的主標籤，不要th:fragment的主標籤。（官方3.0後不推薦）

新建test.html文件html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<!--導入片斷-->
<div th:insert="footer :: footDiv"></div>
<div th:replace="footer :: footDiv"></div>
<div th:include="footer :: footDiv"></div>
</html>

獲得的結果爲java

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!--導入片斷-->
<div><footer>
    the content of footer
</footer></div>
<footer>
    the content of footer
</footer>
<div>
    the content of footer
</div>
</html

fragment的參數設置

定義：jquery

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<div th:fragment="headDiv(showInfo)">
    the content of head!message:[(${showInfo})]
</div>
</html>

調用：bootstrap

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<!--導入片斷-->
<div th:include="head :: headDiv('測試')"></div>
</html>

結果：app

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<!--導入片斷-->
<div>
    the content of head!message:測試
</div>
</html>

若是是多個參數的時候例子：測試

<div th:fragment="frag (onevar,twovar)">
    <p th:text="${onevar} + ' - ' + ${twovar}">...</p>
</div>

按參數定義時的順序進行傳遞
<div th:replace="::frag (${value1},${value2})">...</div>
<div th:replace="::frag (onevar=${value1},twovar=${value2})">...</div>
能夠不按照參數定義的順序
<div th:replace="::frag (twovar=${value2},onevar=${value1})">...</div>

fragment的lexible layouts

定義：ui

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head th:fragment="head(title,links,scripts)">
    <title th:replace="${title}">The awesome application</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/static/css/test.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <th:block th:replace="${links}" />
    <th:block th:replace="${scripts}" />
</head>
</html>

使用：spa

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="head :: head(~{::title},~{::link},~{::script})">
    <title>html的title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <script th:src="@{/js/bootstrap.js}"></script>
</head>
</html>

結果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>html的title</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="/static/css/test.css" rel="stylesheet">
    <script type="text/javascript" src="/static/js/jquery.js"></script>
    <link rel="stylesheet" href="/css/bootstrap.css">
    <script src="/js/bootstrap.js"></script>
</head>
</html>

注意是link 和script，不是links 和scripts
若是調用的頁面沒有link或者script ，則指定傳入的參數爲~{}便可。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="head :: head(~{::title},~{::link},~{})">
    <title>html的title</title>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
</head>
</html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。