لهجة
التخطيط هي لهجة Thymeleaf التي تتيح للمستخدمين إنشاء تخطيطات وقوالب لإعادة استخدام تعليمات HTML البرمجية. لديه نهج هرمي ويستخدم قالب ديكور "لتزيين" ملفات التخطيط. تعد Layout Dialect مشروعًا مستقلًا ولا يتم شحنها مع Thymeleaf. ومع ذلك ، فهو مفتوح المصدر ، ومتوفر على جيثب ، وهو موثق جيدًا ويبدو أنه في حالة جيدة.
تركيب
سنحتاج إلى إضافة حزمة بداية Thymeleaf إلى pom التمهيد الربيع الخاص بك:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
ومع ذلك ، بدءًا من برنامج Spring Boot 2 ، لم يعد هذا كافيًا. لا تعد لهجة Pom جزءًا من Spring Boot ، ويجب علينا إضافتها بأنفسنا:
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>2.3.0</version> </dependency>
تستخدم أمثلة التعليمات البرمجية أيضًا Bootstrap ، لذلك تحتاج أيضًا إلى إضافة ملفات الويب:
<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency>
كخطوة أخيرة ، نحتاج إلى إنشاء فاصوليا LayoutDialect في فئةConfiguration المشروح.
@Bean public LayoutDialect layoutDialect() { return new LayoutDialect(); }
دعنا نذهب أبعد من ذلك.
مثال لهجة تخطيط
سيوضح
هذا المثال كيف يمكننا استخدام "لهجة التخطيط" لتحديد التنسيقات لصفحاتنا حتى نتمكن من استخدام الكود بشكل أفضل مرة أخرى: استخدام صفحة index.html ، التي تستخدم layout.html كتخطيط. اسم Layout.html تعسفي ويمكن أن يكون أي شيء. تتم إضافة المزيد من الملفات هناك ، لكنها مخصصة للتظاهر فقط.
تُظهر الصورة بنية مجلد الموارد. سيقوم Spring Boot تلقائيًا بالعثور على جميع قوالب Thymeleaf في دليل الموارد / القوالب.
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 $ .
من أهم العناصر في layout.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: استبدال و th: إدراج معالجات. يشبه إلى حد بعيد
آخر اثنين من المعالجات الخمسة المقدمة في لهجة التخطيط ، والتخطيط: إدراج وتخطيط: استبدال . هم أكثر أو أقل تفعل الشيء نفسه. على عكس المعالجات السابقة التي ناقشناها ، لا يستخدم هذان الأسلوبان الهرمي ، ولكن النهج الشامل. هذه هي الخاصية المميزة لشكل الزعتر.
تظهر الصورة طريقة عرض الصفحة النهائية. يحتوي على رأس وتذييل ، على الرغم من أنه لم يتم ذكر أي منها في علامة index.html.