هيكل المشروع

مشروع أسترو الجديد الذي تم إنشاؤه من 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 هو المكان الذي يعيش فيه معظم رمز مصدر المشروع. هذا يتضمن:

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

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

`src/components`

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

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

`src/content`

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

`src/layouts`

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

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

`src/pages`

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

`src/styles`

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

`public/`

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

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

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

`package.json`

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

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

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

`astro.config.mjs`

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

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

`tsconfig.json`

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

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

ساهم

المجتمع