thymeleaf layout

時間 2019-12-05

標籤 thymeleaf layout 简体版

原文原文鏈接

thymeleaf是spring boot默認的模板引擎，屬於比較新的模板引擎，這個提供了不少新功能，頁面就是原生的html頁面，而且經過標籤的方式能完全的進行先後端分離。一般的時候無論是管理系統仍是網站系統，總會有不少共用的部分，例如header和footer等等。
若是使用的是springboot 1.5.9版本，則它內置的thymeleaf版本是1.4.2，在官網上能夠看到，如今thymeleaf都都已經升級到了3.0版本，對於layout佈局的這種，3.0支持insert標籤。html

更改thymeleaf版本

<properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
        <java.version>1.8</java.version>
        <!-- set thymeleaf version -->
        <thymeleaf.version>3.0.0.RELEASE</thymeleaf.version>
        <thymeleaf-layout-dialect.version>2.0.0</thymeleaf-layout-dialect.version>
    </properties>

使用 replace

根據官網的例子，咱們有一個文件footer.html文件，這個文件位於 layout文件夾下，代碼以下java

<!DOCTYPE html>\
<html xmlns:th="http://www.thymeleaf.org">
<body>
<div th:fragment="copy">
    &copy; 2011 The Good Thymes Virtual Grocery
</div>
</body>
</html>

而後在另一個頁面中引用spring

<div th:replace="layout/footer::copy"></div>

這樣就把剛纔的footer頁面引用進來了.
固然咱們在被引入頁面中也不必定非得使用fragment ,在引用的時候 "：："是一個選擇器。能夠爲footer的div起一個id = 「footer」，在引用的時候使用 ~{layout/footer::#footer}這樣也能引入。若是不加選擇器，則引用的就是整個頁面，例如像下面這種引用方式後端

<div th:replace="layout/footer"></div>

這樣就會把整個footer.html頁面的內容引用進來springboot

其餘佈局元素 replace，insert，include

replace :替換元素內容 2.0版本和3.0版本均支持
**insert **,3.0版本新增的標籤，會把須要的內容插入到父元素的內部
include ,3.0版本已經推薦放棄使用上述說的比較抽象，具體看生成的代碼便一目瞭然

<div th:replace="layout/footer::copy"></div>
<div th:insert="~{layout/footer:: copy}"></div>
<div th:include="layout/footer::copy"></div>

生成後的代碼前後端分離

<!--replace 在此處，替換div元素-->
<div>
    &copy; 2011 The Good Thymes Virtual Grocery
</div>
<!--insert 在此處 footer中copy元素的內容會被插入到 div中-->
<div><div>
    &copy; 2011 The Good Thymes Virtual Grocery
</div></div>
<!--include,footer中的內容會被插入到div中-->
<div>
    &copy; 2011 The Good Thymes Virtual Grocery
</div>

仔細觀察生成後的代碼，對這塊thymeleaf這塊的使用就會比較清晰了。這樣該使用哪一個，就會變得比較自如。佈局

相關標籤/搜索

每日一句

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