0Pricing
Sveltejs Academy · درس

ملفات التخطيط: +layout.svelte

شارك التنقل وواجهة الغلاف بين صفحات متعددة باستخدام مكوّنات التخطيط

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

التخطيطات تغلف الصفحات

يغلّف ملف +layout.svelte جميع الصفحات الموجودة في المجلد نفسه ومجلداته الفرعية.

التخطيط الجذري

يغلّف src/routes/+layout.svelte كل صفحة في التطبيق. وهو مكان شائع لشريط التنقل وهيكل التطبيق.

<!-- +layout.svelte -->
<nav>...</nav>
<main>
  <slot />
</main>

الفتحة

تُحقن الصفحة الحالية في الموضع الذي يظهر فيه <slot />.

التخطيطات المتداخلة

أضف +layout.svelte في أي مجلد فرعي لإنشاء تخطيطات خاصة بقسم معين.

src/routes/admin/+layout.svelte  // wraps all /admin/* pages

وراثة التخطيط

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

تحميل بيانات التخطيط

اربط التخطيط بـ +layout.js لتحميل البيانات التي يحتاج إليها.

واجهة المستخدم الشرطية

يمكن للتخطيطات قراءة $page لتعديل الواجهة بناءً على عنوان URL الحالي.

إعادة ضبط التخطيط

استخدم الصيغة +page@ للخروج من تخطيط معين في صفحة محددة.

مجموعات التخطيطات

استخدم مجلدات مثل (marketing) للتخطيطات التي لا تضيف مقاطع إلى عنوان URL.

صفحات الأخطاء

ضع +error.svelte في أي مجلد تخطيط لالتقاط الأخطاء الخاصة بذلك القسم.

إعادة استخدام التخطيطات

تسهّل التخطيطات إنشاء واجهة مستخدم متسقة، من دون الحاجة إلى تمرير الخصائص عبر عدة مكونات.

تحقق سريع

أين تُصيَّر الصفحة داخل التخطيط؟

مراجعة

تغلف التخطيطات الصفحات باستخدام +layout.svelte و<slot />. وتتداخل وفق عمق المجلدات.

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

هل درس «ملفات التخطيط: +layout.svelte» مجاني؟

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

ماذا ستتعلم في «ملفات التخطيط: +layout.svelte»؟

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

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

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

كم من الوقت يستغرق درس «ملفات التخطيط: +layout.svelte»؟

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

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

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

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

  1. التوجيه القائم على الملفات باستخدام +page.svelte
  2. معلمات المسارات الديناميكية: [id]
  3. المعلمات الاختيارية ومعلمات Rest
  4. ملفات التخطيط: +layout.svelte
← العودة إلى Sveltejs Academy