ssi

מאמר 13: השימוש במשתני XSSI / אמילי הובסון

13.1 הקדמה

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

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

13.2 כיצד זה פועל?

כדי להקים את התוספת הוירטואלית, אני חייבת להתייחס למידע שאני רוצה לקחת מקובץ אחר. בקובץ ה- HTML לעמוד השער של Dream Jobs (אשר אכנה אותו index.html), אני שמה קריאה לקובץ מקטעי טקסט שם מצוי מידע טקסטואלי זה.
קריאות כאלה למקטעים נמצאות בתוך תגי הערה (<- - - - !>) וקבצי המקטע מסתיימים ב- htmlf. .

חשוב לציין שקובץ מקטע הוא בסה"כ קובץ HTML ללא תגי <html > או <body>.
כדי לקרוא למידע teasers.htmlf אל תוך index.html, הייתי חייבת לרשום את הקוד הבא בחלקו העליון של העמוד:
<--"include virtual="teasers.htmlf #--!>

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

<!--#set var="job1top" value='Reaching out to the easy chair' --> 
<!--#set var="job1link" value='Marketing Manager' --> 
<!--#set var="job1at" value='at NetChannel' -->

ועכשיו רציתי לחזור על משתנה מתוך teasers.htmlf בקובץ Index.html.
לשם כך, השתמשתי בקוד <- - "echo var="jobling - - !> .פקודת ה- echo "מדפיסה" את המשתנה הכלול אל תוך עמוד האינטרנט שלך - אם המשתנה חסר ערך הוא יופיע כ - (none). כשצופים בעמוד באינטרנט, אי אפשר להבחין כי לא שמתי את הטקסט בתוך קובץ ה- Index.htm. נחמד, הה?

הבעיה היחידה בשיטה זו היא שהיו לי חצים, אשר רציתי שגם הם יהיו לינקים. לכל אחד מששת העיצובים הצבעוניים היו אלמנטים עיצובים בצבעים שונים (במקרה שלנו - חצים). לא רציתי שהעוגנים מתוך קובץ teasers.htmlf ייכנסו אל תוך Index.html וייסגרו אחרי החץ, כי רציתי לשמור את כל המידע העיקרי (core) בקובץ teasers.htmlf שלי.
מה עשיתי? השתמשתי במשתנים כדי לשנות את צבעי החצים.
כאן נכנס החלק המגניב של XSSI.

אני רציתי שיהיה לי קובץ index.html יחיד עבור עמוד השער של Dream Jobs, ורציתי שאוכל לשנות את צבע העמוד לפי רצוני. כדי לעשות זאת, אצטרך לקבוע משתנה (color$) אשר ישפיע על ערכי כל הבנים. בעמוד index.html, אציג רשימה של הערכים לכל ששת העיצובים, ועל פי קסמי ה- XSSI, הצבע שציינתי יופיע בעמוד האינטרנט שלך.
כך זה נראה:

<!--#set var="color" value="white" --> 
<!--#if expr="$color = /white/" --> 
<!--#set var="body" value="<BODY bgcolor=#000000 alink=#000000
     link=#FFFFFF vlink=#333333>" --> 
<!--#set var="lt" value="#CCCCCC" -->
<!--#set var="medlt" value="#999999" --> 
<!--#set var="med" value="#999999" -->
<!--#set var="dark" value="#000000" -->
<!--#endif -->

המשתנה color משפיע הן על הערכים ל- index.html והן על קובץ ה- teasers.htmlf , לו אני קוראת .
בכל מקום שמופיע color$, הוא מוחלף ע"י "white". כיון שקבענו שהיום מתחשק לנו עיצוב בשחור לבן, רציתי לקבוע משתנה זה ללבן. אולי מחר ארצה סגול - למשל כך:

<!--#if expr="$color = /purple/" -->
<!--#set var="body" value="<BODY bgcolor=#330033 
   link=#FFCC00 vlink=#FF6600 alink=#330033 text=#000000>" -->
<!--#set var="lt" value="#FFCC00" -->
<!--#set var="medlt" value="#9900CC" --> 
<!--#set var="med" value="#990066" -->
<!--#set var="dark" value="#330033" -->
<!--#endif -->

את ערכי הבנים שאני קובעת, כמו : <--"set var="lt" value="#CCCCCC #--!>, אני מייצרת כך שאוכל לשנות את צבעי תאי הטבלה לפי רצוני.
בקובץ index.html, אכתוב קריאה לצבע התא בתג <TD> כך:

<td align=left valign=top colspan="1" bgcolor=<!--#echo var="lt" -->>.

ואז, כל תא בטבלה עם צבע רקע - יקבל ערך בהיר, בינוני או כהה בתוך כל עיצובי הצבעים.

הדבר האחרון שעשיתי היה להגדיר את העיצובים באמצעות המידע שקיבלתי מהמעצב. עכשיו, כל שבוע, הדבר היחידי שעלי לעשות הוא לקבוע באיזו צבע עיצוב להשתמש, להכניס אותו בתוך הערך <--"set var="color" value="white #--!> ולשנות את כותרות הטקסט בקובץ teasers.htmlf.
נחמד, לא?