בניית עורך עם קבוצות ומקטעים

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

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

1. החליטו מה בעל האתר צריך לערוך

התחילו מתוכנית תוכן קטנה:

משימת בעל האתר	שדה התוכן	מיקום בעורך
שינוי הכותרת הראשית, ההקדמה והתמונה	קבוצת hero	Home page ← Opening section
הצגה או הסתרה של אזור השירותים ועריכת הכרטיסים	showServices ורשימת services	Home page ← What we offer
שינוי שם העסק או מספר הטלפון	קבוצת business	Shared content ← Business details

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

2. הגדירו את הערכים לפני סידור המסך

הוסיפו את השדה הבא ל־definition.json.fields וכתבו עבורו ערכי ברירת מחדל תואמים. זהו חלק מההגדרה המלאה, ולא קובץ עצמאי:

Field inside definition.json

{
  "id": "hero",
  "label": "Opening section",
  "type": "group",
  "required": true,
  "fields": [
    {
      "id": "title",
      "label": "Main headline",
      "type": "text",
      "required": true,
      "maxLength": 120
    },
    {
      "id": "summary",
      "label": "Short introduction",
      "type": "text",
      "maxLength": 600
    },
    {
      "id": "image",
      "label": "Cover image",
      "type": "asset"
    }
  ]
}

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

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

3. הציבו את השדה במקטע בעל שם

צרו את editor.json:

First editor section

{
  "contractVersion": 1,
  "groups": [
    {
      "id": "homepage",
      "label": "Home page",
      "sections": [
        {
          "id": "opening",
          "label": "Opening section",
          "fields": [
            "hero"
          ]
        }
      ]
    }
  ]
}

ההגדרה יוצרת ניווט תחת Home page, ובו מקטע Opening section עם שדות הפתיחה המקוננים. בעל האתר רואה את תוויות ההגדרה: Main headline, ‏Short introduction ו־Cover image. החליפו את תוויות הדוגמה לעברית אם זו שפת המשתמשים שלכם.

הכותרת הקצרה מוצגת בשורת קלט אחת. ההקדמה מוצגת באזור טקסט משום שה־maxLength שלה גדול מ־350. לתמונה מוצג בוחר נכסים. הסכמה בוחרת את הפקדים; המקטע רק מסדר אותם.

4. הוסיפו את שאר המסך

השתמשו בדוגמה המלאה של editor.json להוספת What we offer ו־Shared content. הניווט והתוכן שלה הם:

Home page
  Opening section
    hero → Main headline, Short introduction, Cover image
  What we offer
    showServices → Show services
    services → repeatable service cards
Shared content
  Business details
    business → Business name, Phone number

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

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

5. הפכו כרטיסים חוזרים לקלים לזיהוי

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

6. בדקו את חוויית בעל האתר

1. הריצו shoplifter types, ‏shoplifter validate, בנייה ואימות פלט.
2. בדקו נתוני דמה מקומיים כדי לראות כיצד ערכי התוכן משפיעים על הדף הציבורי.
3. העלו והכינו מועמד מורשה לבדיקה כדי לבחון את עורך לוח הבקרה האמיתי. הפקודה npm run dev מציגה את האתר, ולא את מסך העריכה בלוח הבקרה.
4. עברו על כל משימה: מציאת המקטע, עריכת ערך, הוספת שירות ושינוי סדרו, בחירת תמונה ובדיקת הודעות על שדות חובה.
5. בדקו בלי לשנות את האתר החי, לפי תהליך התצוגה המקדימה.

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

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