قم بتنفيذ نظام التوجيه للتطبيق الخاص بك بمساعدة هذا الدليل.
SvelteKit هو إطار عمل لبناء تطبيقات الويب من جميع الأحجام ، مع خبرة تطوير رائعة وتوجيه مرن يعتمد على الملفات. يجمع إطار العمل بين تحسين محركات البحث (SEO) للتطبيقات أحادية الصفحة ومزايا التحسين التدريجي مع التنقل السريع للتطبيقات المقدمة من جانب الخادم. إحدى الميزات الهامة لـ SvelteKit هي نظام التوجيه الخاص به.
فهم توجيه SvelteKit
SvelteKit هو إطار عمل مبني على قمة Svelte. في SvelteKit ، يتبع التوجيه نظامًا قائمًا على الملفات. هذا يعني أن بنية دليل صفحاتك تحدد مسارات تطبيقك.
لفهم نظام التوجيه SvelteKit بشكل أفضل ، أولاً ، قم بإنشاء مشروع SvelteKit. للقيام بذلك ، قم بتشغيل الكود التالي في جهازك الطرفي:
npm create svelte@latest my-app
بعد تشغيل كتلة التعليمات البرمجية أعلاه ، سوف تجيب على سلسلة من المطالبات لتهيئة التطبيق الخاص بك.
بعد ذلك ، قم بتثبيت التبعيات اللازمة لمشروعك. لفعل هذا قرص مضغوط في مشروعك وقم بتشغيل:
npm install
افتح المشروع على خادم التطوير عن طريق تشغيل الأمر التالي في جهازك الطرفي:
npm run dev
الآن ، سيتم إعداد مشروعك وتشغيله
http://localhost: 5173/. عندما تفتح التطبيق على خادم التطوير الخاص بك ، سيكون لديك واجهة مشابهة للصورة أدناه.مسار جذر المشروع ‘/’ يتوافق مع ملف اسمه + page.svelte. يمكنك العثور على ملف + page.svelte ملف يتبع مسار الملف ؛ src / المسارات في مشروعك.
لإنشاء مسارات مختلفة في SvelteKit ، يمكنك إنشاء مجلدات في ملف src / المسارات الدليل. سيتوافق كل مجلد مع مسار مختلف. توليد أ + page.svelte ملف في كل مجلد لتحديد محتوى هذا المسار.
<main>
<h2> This is the about page h2>
main>
سيعيش الرمز أعلاه داخل + صفحة ملف. ستقوم بإنشاء ملف svelte داخل ملف عن مجلد في src / المسارات الدليل. سيحتوي هذا الملف على محتوى المسار. لعرض المسار في متصفح الويب الخاص بك ، انتقل إلى http://localhost: 5173 / حوالي.
يتم التنقل إلى ملف /about سيعرض المسار هذه الواجهة على شاشتك:
فهم الطرق المتداخلة
تعد المسارات المتداخلة طريقة لهيكلة نظام التوجيه في تطبيق ويب. في بنية المسار المتداخلة ، يتم وضع المسارات ضمن مسارات أخرى ، مما يؤدي إلى إنشاء علاقة هرمية بينها. يمكنك إنشاء مسارات متداخلة في SvelteKit عن طريق وضع المجلدات بامتداد + page.svelte ملف داخل مجلدات مسار أخرى أسفل ملف src / المسارات الدليل.
على سبيل المثال:
في هذا المثال ، تقوم بتداخل بريد الطريق داخل مدونة طريق. عش بريد الطريق داخل مدونة الطريق ، قم بإنشاء ملف بريد المجلد و + page.svelte ملف داخل ملف مدونة مجلد الطريق.
للوصول إلى مسار المدونة في التطبيق الخاص بك ، افتح متصفح الويب وانتقل إلى http://localhost: 5173 / بلوق.
سيكون طريق البريد متاحًا في http://localhost: 5173 / بلوق / وظيفة.
تخطيطات ومسارات الخطأ
يعرّف SvelteKit ملف تخطيط التطبيق بطريقة مشابهة لـ Next.js. كلا الإطارين يستخدمان تَخطِيط مكون لتحديد هيكل التطبيق.
يستخدم SvelteKit ملف + layout.svelte لتحديد تخطيط لمجموعة من الصفحات. يمكنك إنشاء ملف + layout.svelte ملف في src / المسارات دليل لتحديد تخطيط لجميع الصفحات في التطبيق الخاص بك أو في دليل فرعي لتحديد تخطيط لمجموعة معينة من الصفحات.
فيما يلي مثال على كيفية تحديد مسار تخطيط للتطبيق بأكمله:
يوفر المثال أعلاه مسار تخطيط. يحتوي الملف على ملف h1 العنصر الذي يعرض النص "هذا تطبيق SvelteKit." ويتضمن أيضًا ملف فتحة عنصر. ال فتحة العنصر هو عنصر خاص يحدد الموقع حيث سيعرض التطبيق محتوى مساراتك داخل التخطيط. يعمل بنفس طريقة عمل مكونات Vue.
في هذه الحالة ، سيعرض تطبيقك محتويات مساراتك أسفل ملف h1 عنصر.
لتعريف صفحة خطأ ، قم بإنشاء ملف باسم + خطأ في ال src / المسارات الدليل. سيتم عرض هذه الصفحة عند حدوث خطأ أثناء العرض.
على سبيل المثال:
عندما تواجه خطأً ، مثل الانتقال إلى مسار غير موجود ، سيعود تطبيقك إلى هذا الخطأ خطأ بدلا من ذلك.
على سبيل المثال:
الطريق http://localhost: 5173 / انطلق غير موجود ، لذلك يعرض التطبيق الملف خطأ بدلا من ذلك.
التنقل بين الصفحات
يعد العثور على أفضل طريقة للتنقل بين المسارات التي تنشئها أمرًا بالغ الأهمية للحصول على تجربة جيدة. تقليديًا ، يستخدم التوجيه المستند إلى الملفات في معظم التقنيات روابط للتنقل بين الصفحات المختلفة. للتنقل بين الصفحات في SvelteKit ، يمكنك استخدام علامة ربط HTML بسيطة.
على سبيل المثال ، يمكنك كتابة هذا الرمز في أي مسار تريده ، ولكن يجب عليك كتابته بصيغة تَخطِيط الطريق فوق فتحة بطاقة شعار:
<ul>
<li>
<ahref="/">Homea>
li>
<li>
<ahref="/about">Abouta>
li>
<li>
<ahref="/blog">Bloga>
li>
<li>
<ahref="/blog/post">Posta>
li>
ul>
سيؤدي النقر فوق أي علامة ربط إلى توجيهك إلى المسار المقابل.
التوجيه الديناميكي في SvelteKit
يسمح لك التوجيه الديناميكي بإنشاء مسارات ينشئها التطبيق بشكل تدريجي بناءً على البيانات أو المعلمات. يمكّنك من إنشاء تطبيقات ويب مرنة وديناميكية تتعامل مع طرق مختلفة وتعرض المحتوى وفقًا لبيانات أو معلمات محددة.
لإنشاء مسار ديناميكي في SvelteKit ، قم بإنشاء مجلد باسم [سبيكة] ثم أ + page.svelte ملف في المجلد لتحديد محتوى المسار. لاحظ أنه يمكنك تسمية المجلد بأي شيء تريده ولكن تأكد دائمًا من لف الاسم بين قوسين [].
فيما يلي مثال على مسار ديناميكي:
للوصول إلى هذا المسار في متصفح الويب الخاص بك ، انتقل إلى هذا الارتباط http://localhost: 5173 / [سبيكة]، أين [سبيكة] يمكن أن يكون أي اسم مسار فريد غير محدد تختاره.
يمكنك الوصول إلى ملفات [سبيكة] المعلمة باستخدام $ page.params معلومات من التطبيق / المتاجر.
على سبيل المثال:
<scriptlang='ts'>
import { page } from '$app/stores'const params = $page.params;
script>
<main>
<h1>This is the {params.slug} pageh1>
main>
هنا ، تقوم بتعيين ملف $ page.params يعترض على بارام متغير وجعل بارام البيانات في التطبيق الخاص بك.
يسترد التطبيق ملف بارام البيانات من الارتباط الخاص بك. على سبيل المثال ، إذا انتقلت إلى http://localhost: 5173 / حريق، سيكون المحتوى المعروض على التطبيق "هذه هي صفحة النار".
أنت الآن تعرف أساسيات التوجيه في SvelteKit
يعد التوجيه في SvelteKit ميزة قوية تتيح لك هيكلة تطبيقك بطريقة منطقية. سيمكنك فهم كيفية استخدام هذه الميزة من إنشاء تطبيقات ويب أكثر كفاءة وسهولة في الاستخدام. سواء كنت تنشئ مشروعًا شخصيًا صغيرًا أو تطبيقًا واسع النطاق ، فإن نظام التوجيه الخاص بـ SvelteKit يحتوي على الأدوات التي تحتاجها للنجاح.
