Sveltejs Academy · درس

بنية المشروع: src وroutes وstatic

استكشف تخطيط الأدلة في مشروع SvelteKit والغرض من كل مجلد

الدرس 3 من 413 خطوة

بنية المشروع: src وroutes وstatic درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 3 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

المجلدات الأساسية

يحتوي مشروع SvelteKit على هذه المجلدات الأساسية: src/ وstatic/، بالإضافة إلى ملفات الإعداد في المجلد الجذر.

مجلد src

يحتوي src/ على كل شيفرة تطبيقك: المسارات والمكوّنات وشيفرة المكتبة ونقطة دخول التطبيق.

مجلد src/routes

يتوافق كل مجلد فرعي في src/routes مع عنوان URL. ويحدد ملف باسم +page.svelte في أحد المجلدات ما يُعرض في ذلك المسار.

مثال على المسارات

يُعرض المسار src/routes/about/+page.svelte على العنوان /about في المتصفح.

src/routes/
  +page.svelte         -> /
  about/+page.svelte   -> /about
  blog/[slug]/+page.svelte -> /blog/:slug

مجلد src/lib

يُستخدم src/lib للوحدات والمكوّنات المشتركة. استوردها باستخدام الاسم المستعار $lib.

import Button from "$lib/Button.svelte";

مجلد static

تُقدَّم الملفات الموجودة في static/ كما هي في جذر عنوان URL. استخدمه للملف favicon.png وrobots.txt وأصول أخرى غير معالجة.

ملفات الإعداد

يحتوي المجلد الجذر على svelte.config.js وvite.config.js وpackage.json، واختياريًا tsconfig.json.

svelte.config.js

يحدد المعالجات المسبقة والمحوّل وخيارات مستوى Kit. ويحدد المحوّل كيفية بناء تطبيقك للنشر.

import adapter from "@sveltejs/adapter-auto";
export default { kit: { adapter: adapter() } };

vite.config.js

يضبط Vite، وهو أداة التجميع الأساسية. أضف الإضافات والأسماء المستعارة وقواعد وكيل الخادم وخيارات البناء هنا.

ملف app.html

يُعد src/app.html هيكل HTML الذي يغلّف كل صفحة. وتُملأ العناصر النائبة مثل %sveltekit.head% في وقت البناء.

ملف الخطافات

يتيح لك src/hooks.server.js اعتراض الطلبات على الخادم. سنتناول الخطافات في دورة لاحقة.

تحقّق سريع

أين يوجد ملف مسار صفحة SvelteKit؟

أجب عليها في الدرس التفاعلي

خلاصة

أصبحت تعرف الآن بنية المشروع: يضم src الشيفرة، وتضم routes الصفحات، وتضم lib الشيفرة المشتركة، ويضم static الأصول الخام.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «بنية المشروع: src وroutes وstatic» مجاني؟

نعم — نص درس «بنية المشروع: src وroutes وstatic» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.

ماذا ستتعلم في «بنية المشروع: src وroutes وstatic»؟

استكشف تخطيط الأدلة في مشروع SvelteKit والغرض من كل مجلد تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟

لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 3 من أصل 4.

كم من الوقت يستغرق درس «بنية المشروع: src وroutes وstatic»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟

نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Sveltejs Academy