लेआउट बोली एक Thymeleaf बोली है जो उपयोगकर्ताओं को HTML कोड के पुन: उपयोग के लिए लेआउट और टेम्पलेट बनाने की अनुमति देती है। इसमें एक पदानुक्रमित दृष्टिकोण है और लेआउट फ़ाइलों को "सजाने" के लिए एक डेकोरेटर टेम्पलेट का उपयोग करता है। लेआउट बोली एक स्टैंडअलोन परियोजना है और यह थाइमेलफ के साथ जहाज नहीं करता है। हालाँकि, यह एक ओपन सोर्स कोड है जो GitHub पर उपलब्ध है, यह अच्छी तरह से प्रलेखित है और लगता है कि अच्छी स्थिति में भी बना हुआ है।
स्थापना
हमें अपने स्प्रिंग बूट पोम में थाइमेल्फ स्टार्टर पैक जोड़ने की आवश्यकता होगी:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
हालाँकि, स्प्रिंग बूट 2 के साथ शुरू, यह अब पर्याप्त नहीं है। पोम बोली स्प्रिंग बूट का हिस्सा नहीं है, और हमें इसे स्वयं जोड़ना चाहिए:
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>2.3.0</version> </dependency>
कोड उदाहरण भी बूटस्ट्रैप का उपयोग करते हैं, इसलिए आपको वेब फ़ाइलों को भी जोड़ना होगा:
<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency>
अंतिम चरण के रूप में, हमें एनोटेट @Configuration क्लास में एक LayoutDialect बीन बनाने की आवश्यकता है।
@Bean public LayoutDialect layoutDialect() { return new LayoutDialect(); }
आगे चलते हैं।
लेआउट बोली उदाहरण
यह उदाहरण दिखाएगा कि हम अपने पृष्ठों के लिए लेआउट को परिभाषित करने के लिए लेआउट बोली का उपयोग कैसे कर सकते हैं ताकि हम कोड का बेहतर उपयोग कर सकें: index.html पृष्ठ का उपयोग करके, जो लेआउट का उपयोग लेआउट के रूप में करता है। Layout.html नाम मनमाना है और कुछ भी हो सकता है। कुछ और फाइलें वहां जोड़ी गई हैं, लेकिन वे सिर्फ प्रदर्शन के लिए हैं।
चित्र संसाधन फ़ोल्डर की संरचना दिखाता है। स्प्रिंग बूट संसाधनों / टेम्प्लेट निर्देशिका में स्वचालित रूप से सभी थाइमेल्फ टेम्पलेट प्राप्त करेगा।
Layout.html
<!DOCTYPE html> <html> <head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Igorski.co</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" rel="stylesheet" media="screen" /> </head> <body> <div th:replace="fragments/header :: header"> This header content is going to be replaced.</div> <div class="container"> <div class="row"> <div class="col-2" layout:fragment="sidebar"> <h1>This is the layout's sidebar</h1> <p>This content will be replaced if the page using the layout also defines a layout:fragment="sidebar" segment.</p> </div> <div class="col" layout:fragment="content"> <h1>This is the Layout's main section</h1> <p>This content will be replaced if the page using the layout also defines a layout:fragment="content" segment. </p> </div> </div> </div> <footer th:insert="fragments/footer :: footer" class="footer"> This content will remain, but other content will be inserted after it. </footer> </body> </html>
Layout.html लेआउट बोली द्वारा दिए गए
पाँच में से दो प्रोसेसर का उपयोग करता है। पहला लेआउट है:
हेडर टेम्पलेट प्रोसेसर । शीर्ष लेख टेम्पलेट प्रोसेसर उपयोगकर्ता को परिणामी पृष्ठ के लिए सर्वश्रेष्ठ शीर्षक निर्धारित करने में मदद करता है। इस उदाहरण में, यह पृष्ठ शीर्षक और लेआउट हेडर के संयोजन के रूप में अंतिम शीर्षक को परिभाषित करता है। इसके लिए, दो विशेष टोकन का उपयोग किया जाता है, जो लेआउट बोली,
$ LAYOUT_TITLE और
$ CONTENT_TITLE में प्रस्तुत किए जाते हैं।
लेआउट में सबसे बड़ा महत्व का। html दो प्लेसहोल्डर (या टुकड़े) हैं जिन्हें लेआउट द्वारा परिभाषित किया गया है:
टुकड़ा प्रोसेसर । यह प्रोसेसर हमें अपने लेआउट में सामग्री प्लेसहोल्डर को परिभाषित करने की अनुमति देता है। इन प्लेसहोल्डर्स की सामग्री को बाद में लेआउट का उपयोग करके पृष्ठों की सामग्री से बदल दिया जाएगा। उदाहरण दो अलग-अलग अंशों को परिभाषित करता है, एक साइडबार के लिए और दूसरा मुख्य सामग्री के लिए। हालाँकि, हम जितनी चाहें उतने टुकड़े कर सकते हैं, बशर्ते कि वे सभी के अलग-अलग नाम हों।
index.html
<!DOCTYPE html> <html xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorate="~{layouts/layout}"> <head> <title>Home Page</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link th:href="@{/css/core.css}" rel="stylesheet" media="screen" /> </head> <body> <div class="container"> <div class="row"> <div class="col-2" layout:fragment="sidebar"> <h1>Sidebar</h1> <a href="#">Login</a> </div> <div class="col" layout:fragment="content"> <h1>Welcome to the Index page</h1> <br>This content is replacing the content of the layout:fragment="content"<br> placeholder in layout.html</p> </div> </div> </div> </body> </html>
हम घोषणा करते हैं कि index.html layout.html का उपयोग लेआउट के साथ अपने लेआउट के रूप में करता है: प्रोसेसर को सजाएं। ऐसा करने के बाद, हम यह घोषित करते हैं कि index.html layout.html टेम्पलेट का उपयोग करेगा। यहां सबसे महत्वपूर्ण बात यह है
कि टुकड़ा प्रोसेसर का उपयोग। यह उस सामग्री को इंगित करता है जिसका उपयोग लेआउट के टुकड़ों के बजाय एक ही नाम के साथ किया जाएगा। एक और बात ध्यान देने लायक है। परिणामी index.html पृष्ठ पर, जो हमें मिलता है, प्रसंस्करण के बाद, शीर्ष लेख दो शीर्ष लेखों का एक संयोजन होगा, एक index.html से और दूसरा लेआउट से। उन्हें जोड़ दिया जाएगा।
बिना किसी प्रोसेसिंग के Layout.html और index.html दोनों को ब्राउज़र में देखा जा सकता है। लेकिन प्रसंस्करण के बाद, हम देखते हैं कि index.html बहुत अलग है। Index.html की सामग्री का उपयोग लेआउट को स्टाइल करने के लिए किया जाता है और लेआउट के आधार पर सामग्री को लेआउट परिभाषित करने के आधार पर रखा जाता है।
दो अन्य तत्व उदाहरण में मौजूद हैं: हेडर और फुटर। हालाँकि, वे Thymeleaf Standard Layout th: प्रतिस्थापित और वें: इन्सर्ट प्रोसेसर का उपयोग करते हैं।
लेआउट बोली में प्रस्तुत पांच प्रोसेसर के
पिछले दो के समान
, लेआउट: सम्मिलित करें और लेआउट: प्रतिस्थापित करें । वे कमोबेश यही करते हैं। पिछले प्रोसेसर के बारे में, जिस पर हमने चर्चा की, ये दोनों एक पदानुक्रमित, लेकिन एक समावेशी दृष्टिकोण का उपयोग नहीं करते हैं। यह थाइमेलफ फॉर्म की अधिक विशेषता है।
चित्र अंतिम पृष्ठ दृश्य दिखाता है। इसमें एक हेडर और एक पाद लेख दोनों हैं, हालांकि उनमें से कोई भी index.html मार्कअप में उल्लिखित नहीं है।