如何針對Thymeleaf模板抽取公共頁面

時間 2020-01-19

標籤如何針對 thymeleaf 模板抽取公共頁面简体版

原文原文鏈接

對於公共頁面（導航欄nav、頁頭head、頁尾footer）的抽取有三種方式：
        1）基於iframe進行抽取，這種方式頗有效，但比較老了，另外爲了頁面的自適應性，還得作很多工做；
        2）若是是jsp頁面，則能夠經過<%@ include file="head.jsp"%>進行抽取
        3）利用ajax進行頁面加載，但有很多問題
       基於Springboot後臺開發框架，JSP雖然仍是能夠用，但已經強烈推薦使用Thymeleaf模板了，這個時候問題就來了，Thymeleaf模板是html頁面，又不想經過iframe或者ajax的方式，那咱們該如何作？
       其實，Thymeleaf已經給咱們提供了極好的方式，而且不單單是頁面，還能夠對樣式CSS、Javascript進行抽取。
       使用Thymeleaf模板的 th:replace、th:include或th:insert屬性，藉助th:fragment屬性來實現。
th:replace----不保留本身的主標籤，保留th:fragment的主標籤
th:include----保留本身的主標籤，不保留th:fragment的主標籤
th:insert----保留本身的主標籤，也保留th:fragment的主標籤
一、公共抽取部分的頁面定義，如mycommon.html

說明：
1）<head th:fragment="commonHeader(title)">
<title th:text="${title}"></title>其中的${title}，這樣頁面的標題就靈活了。
2）通常在頁面頭部引入CSS，而在頁尾引入JS，這樣保證頁面出如今用戶面前樣式就已經加載，提升用戶體驗
二、在具體頁面中引入公共部分，如mydemo.html

說明：
th:replace，include，th:insert三者的使用形式皆如：th:include="模板路徑::id"
    更詳細的細節，你們能夠能夠看個人視頻介紹：https://edu.51cto.com/sd/091c7 ，但願對你們有所幫助html