THE FLOOD

FLOOD collection page

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

#cp-why

למה מנגנון, אם הכל אפשר ידנית

כמו בחנות צעצועים גדולה: לקטגוריה "מסע בין כוכבים" היה למעצב זמן והוא הוסיף באנר, ו"ברבי" נשארה יבשה יותר. שתיהן מודולריות, ולשתיהן יש עדיין דף עם פירורי לחם, היררכיה, כותרת וכותרת משנה. הכל אפשר לבנות ביד, דף דף. המנגנון נותן אחידות: מחר משתנה העיצוב של תפריט הילדים, או של הראש, או של השאלות הנפוצות, וזה שינוי אחד בתבנית שכל הדפים מקבלים. ביד זה שינוי בכל דף בנפרד. ב-Webflow החצי הראשון הוא Collection Page; החצי השני, דף אחד ששונה, הוא תנאי והסתרה על כל אלמנט. כאן הוא שורה אחת.

#cp-layers

שלוש שכבות

שכבה	איפה	מה היא קובעת
הישות	שורה בקובץ נתונים (data/service-entities.ts, data/ai-areas-data.ts)	כותרת, מילה, פתיח, יתרונות, שאלות, תמונות. דף חדש = שורה חדשה, בכתובת שטוחה /services/<slug>
הקיטלוג	data/branches.ts	מי האבא ומי הילדים. מזה נבנים הפס, פירורי הלחם, האחים, "בתוך…" ו"יעניין אתכם גם". העברת דף בין קטגוריות = שורה אחת, והכתובת לא זזה
ה-override	app/services/[area]/overrides.tsx	רק לדף שצריך משהו משלו: בלוקים במקומות קבועים, וסקשנים שהוא מסתיר. בלי שורה, הדף הוא התבנית

#cp-lego

הלגו של התבנית

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

פס הענף: האבא ראשון (מודגש, עם אייקון: הדף הראשי של הענף, כמו Jerusalem בטריפאדווייזר), הדף המוצמד, הדפים. הדרך לכל השירותים היא פירורי הלחםדף שיש לו ענף
פירורי לחם (עם האחים בדרופדאון)תמיד
ראש: תגית, כותרת עם ה-badge, שורה, כפתור, תמונה22 אפשרויותתמיד. הבחירה בשורה: head
תת-ניווטתמיד, ונבנה מהסקשנים שבאמת בדף
נקודת slot: afterHead
"בתוך…": הדפים של הקטגוריהדף שיש לו ילדים · להסתרה: children
גישה: תמונה מעל (או כניסה בשיידר, image2Shader), ומתחת כותרת ושתי פסקאותיש intro · להסתרה: intro
נקודת slot: afterIntro
היתרונות שלנו: החפץ על פאנל, ומתחת שלושה יתרונות. אפשר שיינעלו והסקשן הבא יעלה מעליהם (gainsPush), רק אם הוא ברקע בצבע אחריש gains · להסתרה: gains
מה כולל: כרטיסים שכל אחד פותח פופאפ, תחת כותרת של הדףיש לדף שורה ב-data/entity-features.ts · להסתרה: features
נקודת slot: beforeWorks
הדמואיםתמיד · להסתרה: works
שאלות נפוצותיש faq · להסתרה: faq
יעניין אתכם גםתמיד · להסתרה: more
פס הפנייהתמיד

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

#cp-ladder

מתבנית ועד דף SINGLE

שלב	מתי	איך
תבנית	רוב הדפים	שורה בקובץ נתונים, והדף קם
אפשרות	צורה שחוזרת בכמה דפים	שדה בשורה, לכל היותר שתי אפשרויות ללבנה (הראש: head)
override	חלק שיש רק לדף אחד	בלוק באחת משלוש הנקודות, או הסתרת לבנה
דף SINGLE בתוך נתיב של קולקשן	כשהשוני כבר גדול מדי	קובץ משלו, ושורה עם external כדי שיישאר בעץ

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

#cp-routes

איך הדפים יושבים

כל דפי התבנית הם קובץ אחד, app/services/[area]/page.tsx. ה-[area] הוא מקום לשם הדף, אז הקובץ מגיש כל /services/<slug>: לוקח את השורה של הדף, את המקום שלו מהקיטלוג ואת ה-override שלו אם יש, ומרכיב. ב-build הוא מייצר מראש דף לכל שורה, חוץ משורות external.

דף SINGLE בתוך נתיב של קולקשן: תיקייה עם שם קבוע בתוך הנתיב של התבנית, למשל app/services/website-building/page.tsx, הדף של האבא "בניית אתרים" (עד 29.10 זה היה "אתרי AI", שעבר לתבנית). ב-Next.js שם קבוע גובר על המקום השמור, אז הכתובת שלו הולכת לקובץ שלו והתבנית לא נוגעת בה. שום דבר לא מוסתר: אלה שני קבצים. ב-Webflow, לעומת זאת, כל דף עובר דרך ה-Collection Page, ושם מסתירים את התוכן של התבנית כדי להראות אחר. הדף נשאר בעץ דרך שורה עם external: true, שלא מרנדרת כלום ורק אומרת לעץ את השם, הכתובת והאבא, כך שהפס, פירורי הלחם והכרטיסים מקשרים אליו. בתוכו הוא משתמש באותן לבנים כשהוא רוצה: הפס, פירורי הלחם, השאלות. ומקרה שלישי: דף על התבנית שיש לו תת-דפים משלו ("אתרי AI" והתגיות שלו, tags/[tag]) צריך תיקייה, ותיקייה בלי page.tsx מחזירה 404 במקום ליפול לתבנית. אז ב-page.tsx שלו יש שלוש שורות שמעבירות לתבנית את ה-slug, והשורה שלו מסומנת folder: true, כדי שהתבנית לא תייצר אותו פעמיים.

#cp-override

מה override יכול

מה	איך
בלוק משלו אחרי הראש	`afterHead: [{ id, label?, node }]`
בלוק משלו אחרי הפתיח	`afterIntro: […]`
בלוק משלו לפני הדמואים	`beforeWorks: […]`
לשונית לבלוק בתת-הניווט	`label על הבלוק. בלי label אין לשונית`
להסתיר סקשן של התבנית	`hide: ['works', 'faq', …] (children, intro, gains, works, faq, more)`

// app/services/[area]/overrides.tsx
export const OVERRIDES = {
  'web-design': {
    afterIntro:  [{ id: 'process',  label: 'תהליך',   node: designProcess }],
    beforeWorks: [{ id: 'features', label: 'מה כולל', node: designFeatures }],
  },
  'website-speed': {
    hide: ['works'],                                   // בלי דמואים בדף הזה
    afterHead: [{ id: 'demo', node: <SomeSlider /> }],  // סליידר שלא קשור לשום דבר
  },
};

הבלוק הוא כל דבר: סקשן, סליידר, אפקט GSAP. התבנית עוטפת אותו ב-id שלו (העוגן של הלשונית), אז לסקשן בתוכו אין id משלו. דף שיש לו ילדים בקיטלוג מקבל את הסקשן "בתוך…" לבד, בלי override.

המסגרת האדומה המקווקוות: תצוגת פיתוח, ?seo בכתובת מדליק אותה ו-?seo=0 מכבה. היא נשמרת לכל הטאב גם במעבר בין דפים, ומי שלא הדליק אותה לא רואה אותה. המסגרת מסמנת מה בדף מחוץ לתבנית: data-off-template בדף בנוי ביד, ו-data-uk-slot על בלוק של override. התג הירוק ליד הכותרת הוא נפח החיפוש של הדף (DevVolume) באותה תצוגה. ה-CSS ב-components/studio/DevVolume/dev-volume.css, וההדלקה ב-es-scripts/_init/uk_global_init.tsx.

#cp-live

דוגמאות חיות

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

#cp-arsenal

בארסנל

המנגנון עצמו, בלי מראה: components/uikit/UkCollectionPage. הטיפוסים (SlotBlock, PageOverride<Place, Section>), <UkSlot blocks /> שמציב את הבלוקים במקום, slotTabs() ללשוניות ו-shown() לסקשן מוסתר. כל תבנית מגדירה את המקומות והסקשנים שלה, ולכן אותו מנגנון מתאים גם לדמו: תחומי העיסוק של עורך דין, ומתחתם השאלות שאנשים מחפשים.