بنية script وtemplate وstyle
تعرّف على البنية المؤلفة من ثلاثة أجزاء لملف مكوّن Svelte
بنية script وtemplate وstyle درس مجاني في Sveltejs Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Sveltejs Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
الأقسام الثلاثة
يحتوي ملف مكوّن Svelte على ثلاث كتل اختيارية في المستوى الأعلى: <script> والبنية و<style>.
كتلة script
تحتوي كتلة script على منطق المكوّن المكتوب بلغة JavaScript أو TypeScript العادية.
<script>
let name = "Ada";
</script>البنية
كل ما يقع خارج علامتي script وstyle هو بنية المكوّن. وهي HTML محسّنة بصياغة قوالب Svelte.
<h1>Hello {name}!</h1>كتلة style
تكون الأنماط مقيّدة بنطاق هذا المكوّن وحده. وتحتفظ المكوّنات الأخرى بمظهرها الخاص.
<style>
h1 { color: rebeccapurple; }
</style>مكوّن كامل
اجمع الأقسام الثلاثة كلها في ملف .svelte واحد.
<script>
let name = "Ada";
</script>
<h1>Hello {name}!</h1>
<style>
h1 { color: rebeccapurple; }
</style>ترتيب الأقسام المتعارف عليه
يضع العُرف script أولًا، ثم البنية، ثم style أخيرًا. ولا يفرض Svelte هذا الترتيب.
صيغة TypeScript
أضف lang="ts" إلى وسم script لاستخدام TypeScript بداخله.
<script lang="ts">
let name: string = "Ada";
</script>سياق script الخاص بالوحدة
استخدم <script context="module"> للشيفرة التي تُشغَّل مرة واحدة لكل وحدة، وليس لكل مثيل.
<script context="module">
export const VERSION = "1.0";
</script>عدم تكرار الكتل
يمكنك استخدام كتلة script واحدة للمثيل وكتلة script واحدة للوحدة كحد أقصى في كل ملف.
وسم style اختياري
إذا لم يكن لمكوّنك أي أنماط، فاحذف كتلة style بالكامل.
وسم script اختياري
يمكن لمكوّنات البنية الثابتة تخطي كتلة script أيضًا. ويُعد ملف .svelte الذي يحتوي على بنية فقط صالحًا.
تحقّق سريع
أين تضع CSS ذات النطاق المحدد؟
خلاصة
يتكوّن ملف Svelte من ثلاث كتل كحد أقصى: script للمنطق، والبنية، وstyle لـ CSS ذات النطاق المحدد.
الأسئلة الشائعة
هل درس «بنية script وtemplate وstyle» مجاني؟
نعم — نص درس «بنية script وtemplate وstyle» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Sveltejs Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Sveltejs Academy 4 دروس في المجموع.
ماذا ستتعلم في «بنية script وtemplate وstyle»؟
تعرّف على البنية المؤلفة من ثلاثة أجزاء لملف مكوّن Svelte تتمرن على Sveltejs Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Sveltejs Academy؟
لا تُشترط خبرة سابقة. Sveltejs Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.
كم من الوقت يستغرق درس «بنية script وtemplate وstyle»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Sveltejs Academy هذا؟
نعم. كل درس في Sveltejs Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- بنية script وtemplate وstyle
- المتغيرات التفاعلية باستخدام let
- الاستيفاء: {expression}
- القيم المحسوبة: تصريحات $ التفاعلية