קוד מקור, נתוני דמה וקבצים שנוצרים

חוזי ה־JSON הם רק חלק מפרויקט עצמאי. הקבצים האלה מאפשרים להריץ אותו מקומית ומחברים בין התוכן לדף.

קבצים שאתם כותבים

קובץ או תיקייה	מה שייך לכאן	כלל עריכה
src/components/HomePage.astro	מבנה דף הבית והעיצוב שלו	הציגו תוכן ונתונים שהוגדרו; טקסט לעריכת בעל האתר שייך לשדות.
נתיבי הכותרות מתוך shoplifter.json	ניווט וכותרת תחתונה משותפים	השתמשו באותו חוזה מאפיינים של דף הבית.
src/leads.ts ורכיבי הטפסים הרשומים	הגדרות טפסי פניות והממשק שלהן	ראו טפסי פניות; זה אינו עורך התוכן של בעל האתר.
assets/	תמונות ארוזות שהוגדרו, איורים דקורטיביים וגופנים	הגדירו קישורי תמונה ב־assets.json ופעלו לפי מדיניות התמונות.
package.json	סקריפטים, גרסת Node ותלויות זמן ריצה ארוזות	שמרו על מבנה החבילה שנוצר לפרויקט העצמאי.
package-lock.json	גרסאות התלויות המדויקות	שמרו במאגר; עדכנו ארכיוני זמן ריצה דרך סנכרון תלויות.
astro.config.mjs	אינטגרציית ה־SDK המנוהלת	שמרו על ההגדרה הנתמכת שנוצרה; נתיבים ומתאמים שרירותיים אינם נתמכים.
vendor/	ארכיוני SDK וחוזה בגרסאות קבועות	אלו תוצרי תלות, לא קוד מקור לתיקון ידני.

fixtures.json: תוכן מקומי, לא תוכן חי

הפקודה shoplifter fixtures generate יוצרת מהחוזים תוכן מקומי, רשומות נכסים, דוגמאות תוכן ומזהה שפה. המפתחות הראשיים הם content, ‏assets, ‏languageCode ו־editorial. למשל, שנו את content.hero.title לבדיקת כותרת ארוכה, או החליפו את languageCode בין en ל־he כדי לבדוק שפה וכיוון טקסט.

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

src/generated/: קוראים את הטיפוסים, עורכים את המקור

הפקודה shoplifter types יוצרת:

• content.d.ts: מבנה השדות מתוך definition.json.
• project.d.ts: תוצאות בעלות שם מתוך data.json וטיפוס Props משולב.

אל תערכו ידנית את ההצהרות האלה: תהליך היצירה הבא יחליף אותן. שנו את ההגדרה או את בקשת הנתונים, הריצו types ועדכנו את קוד הרכיב בהתאם.

---
import type { Props } from '../generated/project';
const { content, data } = Astro.props as Props;
---
<h1>{content.hero.title}</h1>
{content.showServices && (
  <ul>
    {(content.services ?? []).map(service => <li>{service.title}</li>)}
  </ul>
)}
<ul>
  {data.recentArticles.map(article => <li>{article.title}</li>)}
</ul>

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

פלט בנייה

התיקיות dist/ ו־.astro/ הן תוצרים שנוצרו. בדקו את dist/ לבחינת הפלט, אך תקנו את המקור במקום לערוך HTML שנבנה. השתמשו ב־shoplifter files לבדיקת קובצי ההעלאה בפועל, במקום להעלות כל קובץ מקומי.