דף הבית מאמרים ג'ומלה! שימוש חכם ב-SUFFIX
שימוש חכם ב-SUFFIX
שישי, 14 ספטמבר 2007 17:57

נתאר מצב בו לאתר יש כמה מודולים, בכמה מיקומי תצוגה ואנו מעוניינים לתת עיצוב מיוחד לאחד המודולים, אך לא לשאר (לא משנה מיקומו).
בדיוק בשביל זה קיימת אופציית ה-Suffix, או בעברית - סופית (ההיפך מתחילית - Prefix).

לצורך הדוגמא, נניח כי אנו מעוניינים למרכז את הכותרת רק של מודול התפריט הראשי (mod_mainmenu).

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

  1. div.moduletable h3 {
  2. ...
  3. }
 
ופשוט נוסיף את המרכוז הרצוי:
  1. div.moduletable h3 {
  2. ...
  3. text-align: center;
  4. }
 
עד כאן הכל טוב ויפה, אך כאמור, רצינו למרכז את מודול התפריט הראשי ולא את כל כותרות המודולים באשר הם...

ג'ומלה מציעה פתרון פשוט בשם Module Suffix, אשר כשמו כן הוא ותפקידו להוסיף סופית כלשהי לתג העיצוב של המודול.
את הגדרת ה-Suffix, ניתן למצוא, כמו כל שאר ההגדרות, בהגדרות המודול עצמו (בצורה כזו, ניתן להגדיר Suffix ייחודי לכל מודול (או זהה אם נרצה בכך). Image יש לשים לב לעובדה כי עבור מודולים מסויימים (בדומה למודול התפריט) תיתכנה הגדרות Suffix נוספות, שתפקידם זהה, אך מטרתם שונה (כלומר אחראים על איזורי עיצוב אחרים מאשר רמת המודול עצמו).

אם נבחן את הקוד שנוצר בעת שימוש ב-Suffix, נראה כי ההבדל היחידי הוא ב-class של המודול.
במקור, מודול היה נראה כך:

  1. <div class="moduletable">
  2. <ul id="mainlevel">
  3. <a class="mainlevel" href="home/">דף הבית</a>
  4. </li>
  5. ...
  6. </ul>
  7. </div>
 
לאחר הוספת ה-Suffix, הוא יראה כך:
  1. <div class="moduletable_mainmenu">
  2. <ul id="mainlevel">
  3. <a class="mainlevel" href="home/">דף הבית</a>
  4. </li>
  5. ...
  6. </ul>
  7. </div>
נהוג להוסיף '_' (קו תחתון) לצורך הפרדה בין התג המקורי ל-Suffix החדש, אך אין זו חובה.

שיטה נאיבית זו, טובה אך לא מושלמת.
ה-class של המודול הנבחר השתנה (בעצם נתנו לו שם ייחודי חדש שלא היה קיים בתבנית העיצוב (ה-CSS) ולכן, המודול שלנו הפך להיות נטול עיצוב.
מכאן, יש בידינו שני פתרונות, כאשר אחד פשוט ודורש טיפה השקעה, והשני מתוחכם יותר, ומסתמך על תכונות CSS בלבד.

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

  1. div.moduletable, div.moduletable_mainmenu {
  2. ...
  3. }
  4.  
  5. div.moduletable_mainmenu h3{
  6. text-align: center;
  7. }
 
וכך, גם לכל שאר העיצובים הרלוונטיים מלבד אלו האחראים לאותו תג H3 (הכותרת) אותה אנו מעוניינים למרכז.

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

  1. <div class="moduletable mainmenu">
  2. <ul id="mainlevel">
  3. <a class="mainlevel" href="home/">דף הבית</a>
  4. </li>
  5. ...
  6. </ul>
  7. </div>
שימו לב לרווח המפריד בין שתי מחלקות העיצוב

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

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

הפתרון פחות אלגנטי משהיינו מצפים, אך עובד!
פשוט עטפו את הרווח וה-Suffix הרצוי במרחאות:

  1. " mainmenu"
יש לשים לב לעניין, בכל שמירה נוספת של הגדרות אותו מודול

עכשיו אנו יודעים איך לעבוד עם Suffix עבור מודולים, ונוכל ליישם את אותו הידע עבור עבודה עם Suffix במצבים אחרים במערכת.
אפילו למדנו קצת על תכונות מחלקות ה-CSS ואיך ניתן ליישם את הפתרון החכם הזה בג'ומלה.

עדכון אחרון ב-ראשון, 04 נובמבר 2007 12:51
 

חיפוש