الوثائق/القائم على الملف

التخطيطات

يقوم التخطيط بتغليف كل صفحة أسفل الدليل الخاص بها. تداخل التخطيطات: يتم عرض الصفحة داخل تخطيط الدليل الخاص بها، والذي يتم عرضه داخل تخطيط الدليل الأصلي، حتى التخطيط الجذر.

توجد صفحة واحدة لكل نوع ملف تخطيط:

يستخدم المشروع عائلة واحدة. لا يمكن أن يعيش layout.nexy و layout.tsx في نفس المشروع: وضع الخادم يحتوي على .nexy تخطيطات ووضع العميل يحتوي على تخطيطات إطار عمل. انظر وضع الخادم ووضع العميل.

كيف يتولى المتصفح الوثيقة

في وضع العميل، يعرض Nexy التخطيط الجذري في Node، وبالتالي فإن الاستجابة الأولى تكون مستندًا كاملاً. ثم يتولى المتصفح الأمر بإحدى طريقتين:

Preact، Vue و Svelte لا يمكنهم ترطيب مستند كامل: Preact يقوم hydrate ببناء عنصر <html> ثاني، ويقوم مترجم Vue بإسقاط <script> من قالب عميل، ولا يمكن لـ Svelte إنشاء <html>، <head> أو <body> في المتصفح. فبالنسبة لهم <html>، <head> و <body> السمات هي التي أرسلها الخادم، ولا يتم بناء الجسم إلا بواسطة المتصفح. في الممارسة العملية:

• ضع العنوان والعلامات الوصفية والخطوط والبرنامج النصي للموضوع في تخطيط الجذر: يتم عرضها بواسطة الخادم وتظل كما هي.
• يتم تطبيق الارتباط على <html> أو <head> أو <body> (على سبيل المثال فئة تفاعلية) بواسطة الخادم ولكن لا يتم تحديثه في المتصفح. قم بتغييرها من برنامج نصي، كما يفعل البرنامج النصي للموضوع.
• يعرض المتصفح النص من البداية بدلاً من إعادة استخدام ترميز الخادم، بحيث يتم استبدال النص مرة واحدة، في نفس مهمة العرض الأول.

تخطيط الجذر

تخطيط الجذر هو src/routes/layout.<ext>. وهو منشأ بـ nx new وهو الموضع الوحيد الذي يكتب <!DOCTYPE html> و <html> و <head> و <body> (كل إطار و .nexy). الصفحات والتخطيطات المتداخلة لا تتكرر أبدًا.

dashboard/index يصبح root layout > dashboard layout > page.

مجموعات الطريق

يمكن أن يكون للدليل الموجود بين قوسين تخطيط خاص به دون تغيير عناوين URL:

المثابرة

في وضع العميل، يظل التخطيط مثبتًا أثناء تنقل المستخدم بين الصفحات التي تشاركه: يتم الاحتفاظ بـ DOM الخاص به وحالته وموضع التمرير. في وضع الخادم، كل تنقل هو مستند جديد.

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

• layout.nexy
• layout.tsx
• الميراث

انسخ الصفحة بصيغة Markdown حرِّر على GitHub