`html
Spring Boot के साथ Thymeleaf में हेडर्स और फुटर्स निकालना: एक व्यापक मार्गदर्शिका
सामग्री तालिका
- परिचय ……………………………………… 3
- फ्रैगमेंट्स के महत्व को समझना ……………………………………… 5
- अपने Spring Boot प्रोजेक्ट की सेटअप करना ……………………………………… 7
- फ्रैगमेंट फाइलें बनाना ……………………………………… 10
- 4.1 हेड फ्रैगमेंट
- 4.2 हेडर फ्रैगमेंट
- 4.3 फुटर फ्रैगमेंट
- अपने वेब पेजों में फ्रैगमेंट्स को एकीकृत करना ……………………………………… 14
- स्क्रिप्ट्स के साथ अपने फुटर को बेहतर बनाना ……………………………………… 18
- अपने एप्लिकेशन को चलाना और परीक्षण करना ……………………………………… 22
- निष्कर्ष ……………………………………… 26
- अतिरिक्त संसाधन ……………………………………… 28
परिचय
वेब विकास के क्षेत्र में, कई पृष्ठों में एक समान लेआउट बनाए रखना उपयोगकर्ता अनुभव और कुशल विकास दोनों के लिए अत्यंत महत्वपूर्ण है। विशेष रूप से हेडर्स और फुटर्स के लिए दोहरावदार कोड, भारी फाइलों और बढ़े हुए रखरखाव प्रयासों की ओर ले जा सकते हैं। यह ईबुक Spring Boot और Thymeleaf का उपयोग करके सामान्य वेब पेजों से हेडर्स और फुटर्स निकालने की प्रक्रिया में गहराई से प्रवेश करती है, आपके एप्लिकेशन की संरचना को बेहतर बनाए रखने और विस्तारणीयता के लिए सरल बनाती है।
हेडर्स और फुटर्स क्यों निकालें?
- संगति: सभी वेब पृष्ठों में एक समान रूप और अनुभव सुनिश्चित करता है।
- कुशलता: दोहरावदार कोड अंशों से बचकर पुनरावृत्ति को कम करता है।
- रखरखाव क्षमता: अपडेट को सरल बनाता है; फ्रैगमेंट्स में परिवर्तन सभी पृष्ठों पर परिलक्षित होते हैं।
- प्रदर्शन: छोटी फाइल साइज लोड समय और समग्र प्रदर्शन को बढ़ावा देती हैं।
फ्रैगमेंट्स का उपयोग कब करें
जब आपके पास UI घटक हों जो कई पृष्ठों में दोहराए जाते हैं, जैसे कि नेविगेशन बार, फुटर्स, या साइडबार, तब फ्रैगमेंट्स आदर्श हैं। ये विशेष रूप से बड़े एप्लिकेशन में फायदेमंद होते हैं जहाँ एक समान UI तत्व आवश्यक होते हैं।
फ्रैगमेंट्स के महत्व को समझना
Thymeleaf में फ्रैगमेंट्स डेवलपर्स को उनके HTML टेम्पलेट्स के कुछ हिस्सों को मॉड्यूलर बनाने की अनुमति देते हैं। हेडर्स और फुटर्स जैसे सामान्य अनुभागों को अलग-अलग फ्रैगमेंट फाइलों में निकालकर, आप अपने वेब पेजों की संरचना और पठनीयता को काफी हद तक बढ़ा सकते हैं।
फ्रैगमेंट्स का उपयोग करने के लाभ
लाभ | विवरण |
---|---|
पुन: प्रयोग | एक ही कोड को एप्लिकेशन के विभिन्न भागों में पुन: उपयोग करने की अनुमति देता है। |
रखरखाव क्षमता | एक ही फ्रैगमेंट फाइल को संशोधित करके आसान अपडेट और बग फिक्स की सुविधा देता है। |
पठनीयता | जटिल पृष्ठों को प्रबंधनीय हिस्सों में विभाजित करके कोड की पठनीयता बढ़ाता है। |
विस्तारणीयता | UI घटकों को अलग से प्रबंधित करके एप्लिकेशन को स्केल करना सरल बनाता है। |
मुख्य अवधारणाएँ और शब्दावली
- Thymeleaf: वेब और स्टैंडअलोन वातावरण के लिए एक आधुनिक सर्वर-साइड Java टेम्पलेट इंजन।
- Fragment: एक पुन: प्रयोज्य टेम्पलेट का हिस्सा जिसे कई पृष्ठों में शामिल किया जा सकता है।
- Spring Boot: नए Spring एप्लिकेशन के बूटस्ट्रैपिंग और विकास को आसान बनाने वाला एक फ्रेमवर्क।
अपने Spring Boot प्रोजेक्ट की सेटअप करना
फ्रैगमेंट निर्माण में घुटने से पहले, सुनिश्चित करें कि आपका Spring Boot प्रोजेक्ट सही ढंग से सेटअप किया गया है जिसमें Thymeleaf एकीकृत है।
पूर्व आवश्यकताएँ
- Java Development Kit (JDK): सुनिश्चित करें कि JDK 8 या उससे ऊपर इंस्टॉल है।
- Maven: प्रोजेक्ट प्रबंधन और डिपेंडेंसी प्रबंधन के लिए उपयोग किया जाता है।
- IDE: IntelliJ IDEA, Eclipse, या कोई पसंदीदा Java IDE।
- Spring Boot: Spring Boot की बुनियादी जानकारी।
नया Spring Boot प्रोजेक्ट बनाना
- प्रोजेक्ट इनिशियलाइज़ करना: Spring Initializr का उपयोग करके आवश्यक डिपेंडेंसी के साथ नया Spring Boot प्रोजेक्ट जनरेट करें।
- Thymeleaf डिपेंडेंसी जोड़ें: सुनिश्चित करें कि
spring-boot-starter-thymeleaf
आपकेpom.xml
में शामिल है।
1 2 3 4 |
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> |
- प्रोजेक्ट संरचना: निम्नलिखित मुख्य निर्देशिकाओं से परिचित हों:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
src/main/java └── com/example/demo ├── DemoApplication.java └── controller └── HomeController.java src/main/resources ├── templates │ ├── about.html │ ├── book.html │ ├── home.html │ └── fragments │ ├── header.html │ ├── footer.html │ └── head.html └── static ├── css ├── js └── images |
फ्रैगमेंट फाइलें बनाना
फ्रैगमेंट्स आपके वेब पेजों के दोहरावदार अनुभागों को अलग करने में मदद करते हैं। हम तीन मुख्य फ्रैगमेंट्स बनाएंगे: head.html
, header.html
, और footer.html
.
4.1 हेड फ्रैगमेंट
head.html
फ्रैगमेंट आपके HTML के <head>
सेक्शन को शामिल करता है, जिसमें मेटा टैग, टाइटल, और CSS लिंक शामिल हैं।
1 2 3 4 5 6 7 8 9 10 |
<!-- head.html --> <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head th:fragment="head"> <meta charset="UTF-8"> <title th:text="${title}">My Spring Boot Application</title> <link rel="stylesheet" th:href="@{/css/bootstrap.css}"> <link rel="stylesheet" th:href="@{/css/font-awesome.min.css}"> <link rel="stylesheet" th:href="@{/css/style.css}"> </head> |
4.2 हेडर फ्रैगमेंट
header.html
फ्रैगमेंट नेविगेशन बार और अन्य हेडर तत्वों को शामिल करता है।
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<!-- header.html --> <header th:fragment="header"> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar-brand" href="#">Home</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="#">About</a> </li> <li class="nav-item"> <a class="nav-link" href="#">Book Online</a> </li> </ul> </div> </nav> </header> |
4.3 फुटर फ्रैगमेंट
footer.html
फ्रैगमेंट फुटर सेक्शन को शामिल करता है, जिसमें संपर्क जानकारी और स्क्रिप्ट्स शामिल हैं।
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- footer.html --> <footer th:fragment="footer"> <div class="footer-content"> <p>Contact Us | Template Name | Opening Hours</p> <a href="https://www.linkedin.com"><i class="fa fa-linkedin"></i></a> <a href="https://www.twitter.com"><i class="fa fa-twitter"></i></a> <p>Distributed by ThemeWagon</p> </div> <script th:src="@{/js/jquery-3.4.1.min.js}"></script> <script th:src="@{/js/bootstrap.js}"></script> <script th:src="@{/js/custom.js}"></script> </footer> |
अपने वेब पेजों में फ्रैगमेंट्स को एकीकृत करना
फ्रैगमेंट्स स्था