התקנה והתאמה אישית של תמת Eleventy מקצה לקצה

התאמת ערכת העיצוב של Eleventy: היכן הבנייה נשברת

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

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

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

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

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

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

אפקט מדיד: בנייה, משקל עמודים, יציבות

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

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

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

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

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

אפשרויות התאמת ערכת העיצוב: ממוכנה ועד עצמאית

ב-Eleventy ערכת העיצוב היא לא מונוליט, אלא צירוף של layouts, includes, אוספים וכללי עיבוד נתונים. לכן הגישה נקבעת לפי דבר אחד: עד כמה מבנה התוכן תואם לזה הטיפוסי שהגדיר מחבר הערכת העיצוב.

הגבול עובר במספר סוגי העמודים ומקורות הנתונים: מקור אחד ו-3–5 סוגים נכנסים לערכת עיצוב מוכנה, עשרה סוגים, גריד משל עצמך וריבוי שפות דורשים ערכה עצמאית. ככל שהמעבר לאפשרות הבאה נעשה מאוחר יותר, כך הוא יקר יותר.

שלבי התאמת Eleventy: מבדיקה ראשונית ועד מסירה

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

1. בדיקת תבניות. מפרקים את עץ התבניות ואת הכפילויות בסימון, בודקים אילו אוספים נבנים מ-front matter ואילו ממקורות חיצוניים. התוצאה — מפת תבניות ורשימת מקומות שנשברים כשמוסיפים סוג עמוד חדש.

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

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

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

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

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

מה הלקוח מקבל לידיו: קבצים ותיעוד

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

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

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

מהשטח: העברת קטלוג לבנייה סטטית

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

מה היה לפני ההעברה

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

מה קרה אחרי

את הקטלוג העבירו לבנייה סטטית: תבניות, נתונים ומדיה יושבים במאגר, העמודים נוצרים מראש, ולשרת עולה סט קבצים מוכן. את הבנייה מוביל Eleventy, ולכן ריצה מלאה על 4,800 כרטיסים אורכת כשתי דקות, ועריכה של כרטיס אחד בונה מחדש רק את התלויות שלו. זמן התגובה של העמוד ירד משניות לעשרות מילישניות, והעלאת השינויים הצטמצמה מחצי שעה לשלוש דקות.

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

במה שונה התאמת ערכת העיצוב של Eleventy מפיתוח חדש?

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

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

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

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

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

ספקות טכניים נפוצים לפני תחילת העבודה

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

האם נוכל לערוך תוכן בלי מפתח?

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

מה לעשות עם קוד של אחרים בפרויקט?

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

איך מועברות ההרשאות?

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

מה עם עדכוני ערכת העיצוב?

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

נדבר על המשימה: מה לשלוח ואיך תתקדם העבודה

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

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

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

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