streamalism.org

1. הקדמה

Thymeleaf הוא מנוע תבנית Java לעיבוד וליצירת HTML, XML, JavaScript, CSS וטקסט רגיל. לקבלת מבוא ל- Thymeleaf ו- Spring, עיין במכתב זה.

במחקר זה נתמקד בתבניות - דבר שהאתרים המורכבים ביותר צריכים לעשות כך או אחרת. במילים פשוטות, הדפים צריכים לשתף רכיבי עמודים נפוצים כמו הכותרת העליונה, הכותרת התחתונה, התפריט ואולי הרבה יותר.

Thymeleaf מתייחס לניבים מותאמים אישית - ניתן לבנות פריסות באמצעות מערכת פריסה סטנדרטית של Thymeleaf או ה דיאלקט פריסה - המשתמש בדפוס הקישוט לעבודה עם קובצי הפריסה.

במאמר זה נדון בכמה תכונות של ניב פריסת Thymeleaf - שאפשר למצוא כאן. ליתר דיוק, נדון בתכונות שלו כמו יצירת פריסות, כותרות מותאמות אישית או מיזוג של אלמנטים ראשיים.

2. תלות Maven

ראשית, בואו נראה את התצורה הנדרשת לצורך שילוב Thymeleaf עם Spring. ה קפיץ עליון ספרייה נדרשת בתלות שלנו:

 org.thymeleaf thymeleaf 3.0.11. RELEASE org.thymeleaf thymeleaf-spring5 3.0.11. RELEASE 

שים לב שעבור פרויקט אביב 4, קפיץ עליון 4 יש להשתמש בספריה במקום 5. אביב קפיץ. הגרסה האחרונה של התלות עשויה להימצא כאן.

אנו זקוקים גם לתלות בדיאלקט פריסות מותאם אישית:

 nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 2.4.1 

ניתן למצוא את הגרסה האחרונה במאגר המרכזי של Maven.

3. תצורת שיח פריסת Thymeleaf

בחלק זה נדון כיצד להגדיר את תצורת Thymeleaf לשימוש דיאלקט פריסה. אם ברצונך לקחת צעד אחורה ולראות כיצד להגדיר את Thymeleaf 3.0 בפרויקט יישום האינטרנט שלך, אנא עיין במדריך זה.

לאחר שנוסיף תלות של Maven כחלק מפרויקט, נצטרך להוסיף את ה- דיאלקט פריסה למנוע התבניות הקיים של Thymeleaf. אנו יכולים לעשות זאת בתצורת Java:

מנוע SpringTemplateEngine = SpringTemplateEngine חדש (); engine.addDialect (LayoutDialect חדש ());

או באמצעות תצורת קובץ XML:

בעת קישוט החלקים בתבניות התוכן והפריסה, התנהגות ברירת המחדל היא למקם את כל רכיבי התוכן אחרי פריסת התווי.

לפעמים אנו זקוקים למיזוג חכם יותר של אלמנטים, המאפשר לקבץ אלמנטים דומים יחדיו (סקריפטים של js יחד, גליונות סגנון יחד וכו ').

כדי להשיג זאת, עלינו להוסיף אסטרטגיית מיון לתצורה שלנו - במקרה שלנו זו תהיה אסטרטגיית הקיבוץ:

engine.addDialect (LayoutDialect חדש (GroupingStrategy חדש ()));

או ב- XML:

אסטרטגיית ברירת המחדל היא לצרף אלמנטים. עם האמור לעיל, יהיה לנו הכל מסודר ומקובץ.

אם אף אחת מהאסטרטגיות לא מתאימה לצרכים שלנו, נוכל ליישם את שלנו SortingStrategy ולהעביר אותו לניב כמו לעיל.

4. מאפייני מעבדי מרחב שמות ותכונות

לאחר שהוגדרנו נוכל להתחיל להשתמש מַעֲרָך מרחב שמות וחמישה מעבדי מאפיינים חדשים: לְקַשֵׁט, דפוס כותרת, לְהַכנִיס, החלף, ו רסיס.

על מנת ליצור את תבנית הפריסה בה אנו רוצים להשתמש עבור קבצי ה- HTML שלנו, יצרנו את הקובץ הבא בשם template.html:

  ... 

כפי שאנו רואים, שינינו את מרחב השמות מהתקן xmlns: th = ”// www.thymeleaf.org” ל xmlns: layout = ”// www.ultraq.net.nz/thymeleaf/layout”.

כעת אנו יכולים להתחיל לעבוד עם מעבדי תכונות בקבצי ה- HTML שלנו.

4.1. פריסה: שבר

על מנת ליצור קטעים מותאמים אישית בפריסה שלנו או תבניות לשימוש חוזר שניתן להחליף בקטעים עם אותו שם, אנו משתמשים רסיס תכונה בתוך שלנו template.html גוּף:

תוכן העמוד שלך מופיע כאן
כותרת התחתונה המותאמת אישית שלי
כותרת התחתונה המותאמת אישית שלך כאן

שימו לב שיש שני חלקים שיוחלפו ב- HTML המותאם אישית שלנו - תוכן וכותרת תחתונה.

חשוב גם לכתוב את ה- HTML המוגדר כברירת מחדל שישמש אותו אם אחד מהשברים לא יימצא.

4.2. פריסה: לקשט

השלב הבא שעלינו לבצע הוא ליצור קובץ HTML, שיעוטר על ידי הפריסה שלנו:

   דוגמה לדיאלקט פריסה 
זהו תוכן מותאם אישית שתוכל לספק
זהו תוכן תחתון שתוכל לשנות

כפי שמוצג בשורה השלישית, אנו משתמשים פריסה: לקשט וציין את מקור הקישוט. כל השברים מקובץ הפריסה התואמים לשברים בקובץ תוכן יוחלפו ביישום המותאם אישית שלו.

4.3. פריסה: דפוס כותרת

בהתחשב בכך שה ניב פריסה עוקף אוטומטית את כותרת הפריסה לזו שנמצאת בתבנית התוכן, ייתכן שתשמור על חלקים מהכותרת שנמצאו בפריסה.

לדוגמא, אנו יכולים ליצור פירורי לחם או לשמור את שם האתר בכותרת העמוד. ה פריסה: דפוס כותרת מעבד מגיע עם עזרה במקרה כזה. כל מה שאתה צריך לציין בקובץ הפריסה שלך הוא:

באלדונג

כך שהתוצאה הסופית עבור הפריסה וקובץ התוכן שהוצגה בפסקה הקודמת תיראה כך:

Baeldung - דוגמה לדיאלקט פריסה

4.4. פריסה: הכנס / פריסה: החלף

המעבד הראשון, פריסה: הכנס, דומה למקור של תימליף ה: הכנס, אך מאפשר להעביר את כל שברי ה- HTML לתבנית שהוכנסה. זה מאוד שימושי אם יש לך קצת HTML שתרצה לעשות בו שימוש חוזר, אך תוכנו מורכב מכדי לקבוע או לבנות בעזרת משתני הקשר בלבד.

השני, פריסה: החלף, דומה לזה הראשון, אך עם ההתנהגות של ה: החלף, אשר למעשה יחליף את תג המארח בקוד של השבר המוגדר.

5. מסקנה

במאמר זה תיארנו כמה דרכים ליישום פריסות ב- Thymeleaf.

שים לב שהדוגמאות משתמשות בגרסת 3.0 של Thymeleaf; אם ברצונך ללמוד כיצד להעביר את הפרויקט שלך, עקוב אחר הליך זה.

ניתן למצוא את היישום המלא של מדריך זה בפרויקט GitHub.

איך לבדוק? ההצעה שלנו היא לשחק קודם עם דפדפן, ואז לבדוק גם את מבחני ה- JUnit הקיימים.

זכור, אתה יכול לבנות פריסות באמצעות האמור לעיל דיאלקט פריסה או שאתה יכול ליצור פתרון משלך בקלות. אני מקווה שמאמר זה נותן לך עוד כמה תובנות בנושא ותמצא את הגישה המועדפת עליך בהתאם לצרכים שלך.