thymeleaf應該如何布局?

阿裏雲問答 2022-01-08 04:39:10 阅读数:496

thymeleaf 布局

thymeleaf應該如何布局?




采納答案1:
創建一個包含模板間共享布局的模板,通常這樣的模板包含: 頁面頭部、導航欄、脚部、內容展示區域。Layout.html<!DOCTYPE html><html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head> <title>Layout page</title> <script src="common-script.js"></script></head><body> <header> <h1>My website</h1> </header> <section layout:fragment="content"> <p>Page content goes here</p> </section> <footer> <p>My footer</p> <p layout:fragment="custom-footer">Custom footer here</p> </footer> </body></html>注意事項:1. html標簽上附上命名空間2. section與脚部p標簽上使用layout:fragment屬性這些是布局中的插入候選槽點,通過匹配內容模板中片段進行替換。創建一些內容模板:Content1.html<!DOCTYPE html><html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="~{Layout}"><head> <title>Content page 1</title> <script src="content-script.js"></script></head><body> <section layout:fragment="content"> <p>This is a paragraph from content page 1</p> </section> <footer> <p layout:fragment="custom-footer">This is some footer content from content page 1</p> </footer></body></html>html標簽中的layout:decorate說明哪一個布局模板使用這個內容模板進行裝飾。內容模板定義自身標題與脚本、content與custom-footer片段。custom-footer片段處於footer元素內部,這其實是不必要的,但是可能會是很方便的,如果想要做內容模板的靜態模板,這是一開始使用Thymeleaf的原因之一。 在一個模板內片段名稱必須唯一,否則可能會出現片段不匹配,各種各樣的可笑事情會接踵而至。不管如何,一旦告知Thymeleaf處理Content1.html,最終的頁面會是這樣子:<!DOCTYPE html><html><head> <title>Content page 1</title> <script src="common-script.js"></script> <script src="content-script.js"></script></head><body> <header> <h1>My website</h1> </header> <section> <p>This is a paragraph from content page 1</p> </section> <footer> <p>My footer</p> <p>This is some footer content from content page 1</p> </footer> </body></html>內容模板裝飾Layout.html,結果是布局的組合,加上內容模板的片段(兩個模板的<head>元素,來自內容模板的<title>元素替換布局文件內的,所有的元素來自布局文件,但是由所有指定的內容模板進行替換)想了解更多可以如何控制<head>元素合並,參看<head>元素合並一小節。 裝飾進程重定向處理從內容模板至布局,將layout:fragment部分從內容模板中挑選出來,因為布局需要它們。正因如此,任何在layout:fragment之外的東西實際從未得到執行,這說明在內容模板中不能這樣做: <div th:if="${user.admin}"> <div layout:fragment="content"> ... </div> </div> 如果布局模板想要’內容’片段,那麼會得到那個片段,不顧任何所在條件,因為那些條件不會執行。如果說只想用絕對最小HTML代碼量替換裝飾器脚部:Content2.html<p layout:decorate="~{Layout}" layout:fragment="custom-footer"> This is some footer text from content page 2.</p> 這就是全部所需的東西!<p>標簽同時用作根元素與片段定義,生成一個像這樣的頁面:<!DOCTYPE html><html><head> <title>Layout page</title> <script src="common-script.js"></script></head><body> <header> <h1>My website</h1> </header> <section> <p>Page content goes here</p> </section> <footer> <p>My footer</p> <p> This is some footer text from content page 2. </p> </footer> </body></html> 可以把布局看作母版,會得以填充或者被內容(子模板)覆蓋,僅當內容會填充/覆蓋父類。以這種方式,布局充當某種’默認’,內容充當這種默認之上的實現。給布局傳送數據子模板向上給母版布局傳送數據,在涉及到布局/裝飾過程的任意元素上使用th:with/ data-th-with屬性處理器,可以在任何地方layout:decorate/ data-layout-decorate 或者可以發現 layout:fragment/data-layout-fragment, 例如:孩子/內容模板:<html layout:decorate="your-layout.html" th:with="greeting='Hello!'"> 1父類/布局模板:<html> ... <p th:text="${greeting}"></p> <!-- You'll end up with "Hello!" in here --> 將來,或許會增加支持使用分片局部變量,很像Thymeleaf用於創建片段簽名。配置標題鑒於布局方言自動用內容模板中所發現的重載布局<title>,可能會發現自己重複布局中發現的標題部分,尤其是想要創建面包屑或者在頁面標題中保留頁面名稱。layout:title-pattern處理器可以免除重複布局標題的問題,通過使用一些特殊標記以想要標題如何出現的模式。這是一個例子:Layout.html<!DOCTYPE html><html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">My website</title></head>...</html> layout:title-pattern處理器采取簡單字符串,識別兩種特殊標記:$LAYOUT_TITLE與$CONTENT_TITLE。每種標記在結果頁中會被各自相應的標題替換。所以,如果有下面的內容模板:Content.html<!DOCTYPE html><html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorator="Layout"><head> <title>My blog</title></head>...</html> 結果頁會是這樣:<!DOCTYPE html><html><head> <title>My website - My blog</title></head>...</html> 這對<title>元素內的靜態/內聯文本或者<title>元素上發現使用th:text的動態文本均有效。上述例子中的模式在布局中指定,所以對所有使用布局的內容模板均適用。如果在內容模板中指定另一種標題模式,那麼會覆蓋布局中發現的那個,允許細粒度的控制標題的展現形式。可重用模板假如發現有一些HTML或者結構經常性地重複,想要做成自己的模板從不同地方插入以便减少代碼重複。(模塊化Thymeleaf?)這個的例子可能會是一個模態面板,由幾個HTML元素與CSS類構成,在網頁應用中產生一個新窗口的效果:Modal.html<!DOCTYPE html><html><body> <div id="modal-container" class="modal-container" style="display:none;"> <section id="modal" class="modal"> <header> <h1>My Modal</h1> <div id="close-modal" class="modal-close"> <a href="#close">Close</a> </div> </header> <div id="modal-content" class="modal-content"> <p>My modal content</p> </div> </section> </div></body></html> 會發現可以將一些東西轉換成像頭部、ID的變量,以便包含Modal.html的頁面可以設定它們自己的名稱/ID。繼續盡可能泛型化編寫模態代碼,然而會遇到填充自己的模態框內容的問題,那是開始接觸一些限制的地方。一些頁面使用單一消息的模態框,其他想要使用模態框容納一些更複雜的東西比如接受用戶輸入的錶單。模態框可能性變得無休無止,但是未支持想象,發現自己得不得將這段模態框代碼拷貝到每一個模板中,每一次使用場合變化相應內容,重複同樣的HTML代碼維持同樣的外觀感受,打破了過程中的DRY原則。主要妨礙適當重用的事情是無法將HTML元素傳遞至插入模板中。這正是layout:insert有用的地方。它運作起來完全像th:insert,但是通過指定與實現片段很像內容/布局實例,可以創建一個公共的結構,對插入它的模板使用場合作出響應。這是一個更新的模態框模板,使用Thymeleaf與layout:fragment屬性定義一個可替換的模態框內容部分以變得更加泛型化:Modal2.htmlModal2.html<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"><body layout:fragment="modal(modalId, modalHeader)"> <div th:id="${modalId} + '-container'" class="modal-container" style="display:none;"> <section th:id="${modalId}" class="modal"> <header> <h1 th:text="${modalHeader}">My Modal</h1> <div th:id="'close-' + ${modalId}" class="modal-close"> <a href="#close">Close</a> </div> </header> <div th:id="${modalId} + '-content'" class="modal-content"> <div layout:fragment="modal-content"> <p>My modal content</p> </div> </div> </section> </div></body></html>現在可以插入這個模板,使用layout:insert處理器與無論怎樣需要實現modal-content片段,通過在調用模板插入元素內創建同樣名稱的片段:Content.html<!DOCTYPE html><html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"> ... <div layout:insert="Modal2 :: modal(modalId='message', modalHeader='Message')" th:remove="tag"> <p layout:fragment="modal-content">Message goes here!</p> </div> ...</html>就像內容/布局實例,插入模板layout:fragment會被匹配片段名稱的元素替換掉。在這種場合下,Modal2.html的整個modal-content部分會被上述自定義段落替換掉。這是結果:<!DOCTYPE html><html> ... <div id="message-container" class="modal-container" style="display:none;"> <section id="message" class="modal"> <header> <h1>Message</h1> <div id="close-message" class="modal-close"> <a href="#close">Close</a> </div> </header> <div id="message-content" class="modal-content"> <p>Message goes here!</p> </div> </section> </div> ...</html>定義在模板內包含Modal2.html的自定義消息作為模態框內容的一部分。在插入模板上下文環境中的片段與用於內容/布局過程中的片段一樣工作:如果片段未在模板中定義,那麼它不會覆蓋插入模板中的內容,使得在可重用版本中創建默認。



采納答案2:

2602707680-5c27203ec4c9f.jpg


版权声明:本文为[阿裏雲問答]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080439101732.html