هيكل المشروع

مشروع أسترو الجديد الذي تم إنشاؤه من CLI create astro يتضمن بالفعل بعض الملفات والمجلدات. و أخرى، سوف تقوم بإنشاءها بنفسك وتضيف إلى بنية ملفات أسترو الحالية.

إليك كيفية تنظيم مشروع أسترو ، وبعض الملفات التي ستجدها في مشروعك الجديد.

المجلدات والملفات

يستفيد أسترو من تصميم مجلد من أجل مشروعك.يجب أن يتضمن كل جذر مشروع أسترو المجلدات والملفات التالية:

• */src - رمز مصدر المشروع الخاص بك (المكونات والصفحات والأنماط ، إلخ)
• */public - ما ليس بكود ، أصولك الجاهزة (الخطوط ، الرموز ، إلخ)
• package.json - بيان المشروع.
• astro.config.mjs - ملف تكوين أسترو. (مُستَحسَن)
• tsconfig.json - ملف تكوين TypeScript. (مُستَحسَن)

مثال شجرة المشروع

قد يبدو دليل مشروع أسترو الشائع هكذا:

• Directorypublic/

  • robots.txt
  • favicon.svg
  • social-image.png
• Directorysrc/

  • Directorycomponents/

    • Header.astro
    • Button.jsx
  • Directorylayouts/

    • PostLayout.astro
  • Directorypages/

    • Directoryposts/

      • post1.md
      • post2.md
      • post3.md
    • index.astro
  • Directorystyles/

    • global.css
• astro.config.mjs
• package.json
• tsconfig.json

/src

المجلد src هو المكان الذي يعيش فيه معظم رمز مصدر المشروع. هذا يتضمن:

• الصفحات
• تخطيطات
• مكونات أسترو
• مكونات إطار واجهة المستخدم (React, etc.) (EN)
• أنماط (CSS, Sass) (EN)
• Markdown (EN)

يقوم أسترو بمعالجة و تحسين ، وحزم ملفات /src لإنشاء موقع الويب النهائي الذي يتم شحنه إلى المتصفح. على عكس المجلد الثابت public/ ، تم تصميم ملفات src/ الخاصة بك والتعامل معها من قبل أسترو.

لا يتم إرسال بعض الملفات (مثل مكونات أسترو) إلى المتصفح كما هو مكتوب ولكن يتم تقديمها بدلاً من ذلك إلى HTML ثابت. يتم إرسال الملفات الأخرى (مثل CSS) إلى المتصفح ولكن قد يتم تحسينها أو تجميعها مع ملفات CSS الأخرى للأداء.

نصيحة

بينما يصف هذا الدليل بعض الاتفاقيات الشائعة المستخدمة في مجتمع أسترو ، فإن المجلدات التي تحتفظ بها أسترو هي src/pages/ و src/content/. أنت حر في إعادة تسمية أي مجلدات أخرى وإعادة تنظيمها بطريقة تناسبك بشكل أفضل.

src/components

العناصر هي وحدات كود قابلة لإعادة الاستخدام في صفحات HTML الخاصة بك. يمكن أن تكون هذه مكونات أسترو ، أو مكونات إطار واجهة المستخدم (EN) مثل React أو VUE. من الشائع تجميع وتنظيم جميع مكونات المشروع معًا في هذا المجلد.

هذه اتفاقية شائعة في مشاريع أسترو ، لكنها غير مطلوبة. لا تتردد في تنظيم مكوناتك كما تريد!

src/content

المجلد src/content/ محجوز لتخزين مجموعات المحتوى (EN) وملف تكوين مجموعات اختياري. لا يُسمح بالملفات الأخرى داخل هذا المجلد.

src/layouts

التخطيطات هي مكونات أسترو التي تحدد بنية واجهة المستخدم التي تشاركها صفحة واحدة أو صفحات.

تماما مثل src/components, هذا المجلد هو اتفاقية شائعة ولكنها غير مطلوبة.

src/pages

الصفحات هي نوع خاص من المكونات المستخدمة لإنشاء صفحات جديدة على موقعك. يمكن أن تكون الصفحة مكونًا لأسترو ، أو ملف Markdown الذي يمثل بعض صفحة المحتوى لموقعك.

تنبيه

src/pages هو مجلد فرعي مطلوب في مشروع أسترو الخاص بك. بدون ذلك ، لن يحتوي موقعك على صفحات أو طرق!

src/styles

إنها اتفاقية شائعة لتخزين ملفات CSS أو SASS في مجلد src/styles ، لكن هذا غير مطلوب. طالما أن الأنماط تعيش في مكان ما في المجلد /src ويتم استيرادها بشكل صحيح ، فإن أسترو سوف يتعامل معها ويحسنها.

public/

المجلد public/ مخصص للملفات والأصول في مشروعك والتي لا تحتاج إلى معالجتها أثناء عملية بناء أسترو. سيتم نسخ الملفات الموجودة في هذا المجلد في مجلد Build دون مساس ، ثم سيتم بناء موقعك.

هذا السلوك يجعل public/ مثالي للأصول الشائعة مثل الصور والخطوط ، أو الملفات الخاصة مثل robots.txt و manifest.webmanifest.

يمكنك وضع CSS و جافاسكريبت في دليل /public الخاص بك ، ولكن كن على علم بأن هذه الملفات لن يتم تجميعها أو تحسينها في البناء النهائي.

نصيحة

كقاعدة عامة ، يجب أن تعيش أي CSS أو جافاسكريبت التي تكتبها بنفسك في مجلد /src .

package.json

هذا ملف يستخدمه مديري حزم جافاسكريبت لإدارة تبعياتك. كما أنه يحدد البرامج النصية التي يتم استخدامها بشكل شائع لتشغيل أسترو (على سبيل المثال: npm start ، npm run build).

هناك نوعان من التبعيات يمكنك تحديدها في package.json: dependencies و devdependencies. في معظم الحالات ، تعمل هذه كما هي: يحتاج أسترو إلى جميع التبعيات في وقت الإنشاء ، وسيقوم مدير الحزمة بتثبيت كليهما. نوصي بوضع جميع تبعياتك في “التبعيات” للبدء ، واستخدام فقط “DevDependencies” إذا وجدت حاجة محددة للقيام بذلك.

للمساعدة في إنشاء ملف package.json الجديد لمشروعك ، تحقق من تعليمات الإعداد اليدوي (EN).

astro.config.mjs

يتم إنشاء هذا الملف في كل قالب بداية ويتضمن خيارات التكوين لمشروع أسترو الخاص بك. هنا يمكنك تحديد التكامل لاستخدام الخيارات ، وخيارات الخادم ، والمزيد.

راجع تكوين دليل أسترو (EN) للحصول على تفاصيل حول تكوينات الإعداد.

tsconfig.json

يتم إنشاء هذا الملف في كل قالب بداية ويتضمن خيارات تكوين TypeScript لمشروع أسترو الخاص بك. بعض الميزات (مثل استيرادات حزمة npm) ليست مدعومة بالكامل في المحرر بدون ملف tsconfig.json.

راجع دليل TypeScript (EN) للحصول على تفاصيل حول تكوينات الإعداد.