溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

如何針對(duì)Thymeleaf模板抽取公共頁面

發(fā)布時(shí)間:2020-07-10 08:17:37 來源:網(wǎng)絡(luò) 閱讀:1122 作者:江成軍 欄目:web開發(fā)

對(duì)于公共頁面(導(dǎo)航欄nav、頁頭head、頁尾footer)的抽取有三種方式:
????????1)基于iframe進(jìn)行抽取,這種方式很有效,但比較老了,另外為了頁面的自適應(yīng)性,還得做不少工作;
????????2)如果是jsp頁面,則可以通過<%@ include file="head.jsp"%>進(jìn)行抽取
????????3)利用ajax進(jìn)行頁面加載,但有不少問題
???????基于Springboot后臺(tái)開發(fā)框架,JSP雖然還是可以用,但已經(jīng)強(qiáng)烈推薦使用Thymeleaf模板了,這個(gè)時(shí)候問題就來了,Thymeleaf模板是html頁面,又不想通過iframe或者ajax的方式,那我們?cè)撊绾巫觯?br/>???????其實(shí),Thymeleaf已經(jīng)給我們提供了極好的方式,并且不僅僅是頁面,還可以對(duì)樣式CSS、Javascript進(jìn)行抽取。
???????使用Thymeleaf模板的 th:replace、th:includeth:insert屬性,借助th:fragment屬性來實(shí)現(xiàn)。
th:replace----不保留自己的主標(biāo)簽,保留th:fragment的主標(biāo)簽
th:include----保留自己的主標(biāo)簽,不保留th:fragment的主標(biāo)簽
th:insert----保留自己的主標(biāo)簽,也保留th:fragment的主標(biāo)簽
1、公共抽取部分的頁面定義,如mycommon.html
如何針對(duì)Thymeleaf模板抽取公共頁面
說明:
1)<head th:fragment="commonHeader(title)">
<title th:text="${title}"></title>其中的${title},這樣頁面的標(biāo)題就靈活了。
2)一般在頁面頭部引入CSS,而在頁尾引入JS,這樣保證頁面出現(xiàn)在用戶面前樣式就已經(jīng)加載,提高用戶體驗(yàn)
2、在具體頁面中引入公共部分,如mydemo.html
如何針對(duì)Thymeleaf模板抽取公共頁面
說明:
th:replace,include,th:insert三者的使用形式皆如:th:include="模板路徑::id"
????更詳細(xì)的細(xì)節(jié),大家可以可以看我的視頻介紹:https://edu.51cto.com/sd/091c7 ,希望對(duì)大家有所幫助

向AI問一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI