Sveltejs Academy · पाठ

लेआउट फाइलें: +layout.svelte

लेआउट कंपोनेंट से कई पेजों में नेविगेशन और बाहरी UI साझा करें।

पाठ 4, कुल 4 में से13 चरण

लेआउट फाइलें: +layout.svelte, CoddyKit पर Sveltejs Academy का एक निःशुल्क पाठ है। यह 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

लेआउट विरासत

पृष्ठ मूल फ़ोल्डर से नीचे तक सभी अभिभावक लेआउट विरासत में लेते हैं। साझा UI के लिए उन्हें एक के ऊपर एक रखें।

लेआउट में डेटा लोड करना

लेआउट के लिए आवश्यक डेटा लोड करने हेतु इसे +layout.js के साथ जोड़ें।

सशर्त UI

वर्तमान URL के आधार पर बदलाव करने के लिए लेआउट $page पढ़ सकते हैं।

लेआउट रीसेट करना

किसी विशिष्ट पृष्ठ के लिए लेआउट से बाहर निकलने हेतु +page@ संकेत-लेखन का उपयोग करें।

लेआउट समूह

ऐसे लेआउट के लिए (marketing) जैसे फ़ोल्डर का उपयोग करें, जो URL में खंड नहीं जोड़ते।

त्रुटि पृष्ठ

किसी अनुभाग की त्रुटियाँ पकड़ने के लिए उसके लेआउट फ़ोल्डर में +error.svelte रखें।

लेआउट का पुनः उपयोग

लेआउट से एकसमान UI बनाना आसान हो जाता है। प्रॉप ड्रिलिंग की आवश्यकता नहीं होती।

त्वरित जाँच

लेआउट के अंदर पृष्ठ कहाँ रेंडर होता है?

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

लेआउट, <slot /> वाले +layout.svelte के ज़रिए पृष्ठों को समेटते हैं। वे फ़ोल्डर की गहराई के अनुसार नेस्ट होते हैं।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 41
पाठ: 163

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “लेआउट फाइलें: +layout.svelte” पाठ निःशुल्क है?

हाँ—“लेआउट फाइलें: +layout.svelte” का पूरा पाठ यहाँ वेब पर निःशुल्क पढ़ा जा सकता है। इंटरैक्टिव अभ्यास (अंतर्निहित कोड संपादक और 24/7 एआई ट्यूटर) करने और Sveltejs Academy पाठ्यक्रम का बाकी हिस्सा अनलॉक करने के लिए CoddyKit PRO लें। Sveltejs Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“लेआउट फाइलें: +layout.svelte” में मैं क्या सीखूँगा?

लेआउट कंपोनेंट से कई पेजों में नेविगेशन और बाहरी UI साझा करें। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Sveltejs Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Sveltejs Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Sveltejs Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 4वाँ पाठ है।

“लेआउट फाइलें: +layout.svelte” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Sveltejs Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Sveltejs Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Sveltejs Academy पर वापस जाएँ