अवयव
Astro अवयव किसी भी Astro परियोजना के बुनियादी निर्माण खंड हैं। वे केवल HTML टेम्प्लेटिंग अवयव हैं जिनमें कोई क्लाइंट-साइड रनटाइम नहीं है। आप Astro अवयव को उसके फ़ाइल एक्सटेंशन .astro
द्वारा देख सकते हैं।
Astro अवयव अत्यंत लचीले हैं। अक्सर, Astro अवयव में पेज पर कुछ पुन: प्रयोज्य UI शामिल होगा, जैसे हेडर या प्रोफाइल कार्ड। अन्य समय में, Astro अवयव में HTML का एक छोटा सा स्निपेट हो सकता है, जैसे सामान्य <meta>
टैग का संग्रह जो SEO के साथ काम करना आसान बनाता है। Astro अवयवों में संपूर्ण पेज लेआउट भी शामिल हो सकता है।
Astro अवयवों के बारे में जानने वाली सबसे महत्वपूर्ण बात यह है कि वे ग्राहक पर प्रस्तुत नहीं होते हैं। वे सर्वर-साइड रेंडरिंग (SSR) का उपयोग करके बिल्ड-समय या ऑन-डिमांड पर HTML को प्रस्तुत करते हैं। आप अपने अवयव फ्रंटमैटर के अंदर JavaScript कोड शामिल कर सकते हैं, और यह सब आपके उपयोगकर्ताओं के ब्राउज़र पर भेजे गए अंतिम पेज से हटा दिया जाएगा। परिणाम एक तेज़ साइट है, जिसमें डिफ़ॉल्ट रूप से शून्य JavaScript पदचिह्न जोड़ा गया है।
जब आपके Astro अवयव को क्लाइंट-साइड अन्तरक्रियाशीलता की आवश्यकता होती है, तो आप मानक HTML <script>
टैग या UI फ्रेमवर्क अवयव जोड़ सकते हैं।
अवयव संरचना
शीर्षक अवयव संरचनाAstro अवयव दो मुख्य भागों से बने है: अवयव स्क्रिप्ट और अवयव टेम्पलेट। प्रत्येक भाग एक अलग कार्य करता है, लेकिन साथ में वे एक ऐसा फ्रेमवर्क प्रदान करते हैं जो उपयोग में आसान और इतना अभिव्यंजक है कि आप जो कुछ भी बनाना चाहते हैं उसे संभाल सके।
अवयव स्क्रिप्ट
शीर्षक अवयव स्क्रिप्टAstro आपके Astro अवयव में अवयव स्क्रिप्ट की पहचान करने के लिए एक कोड बाड़ (---) का उपयोग करता है। यदि आपने पहले कभी Markdown लिखा है, तो आप पहले से ही frontmatter नामक एक समान अवधारणा से परिचित हो सकते हैं। Astro का एक अवयव स्क्रिप्ट का विचार सीधे इस अवधारणा से प्रेरित था।
आप अपने टेम्पलेट को प्रस्तुत करने के लिए आवश्यक किसी भी JavaScript कोड को लिखने के लिए अवयव स्क्रिप्ट का उपयोग कर सकते हैं। इसमें शामिल हो सकते हैं:
- अन्य Astro अवयवों का आयात करना
- React जैसे अन्य फ्रेमवर्क अवयवों को आयात करना
- डेटा आयात करना जैसे जैसे की एक JSON फ़ाइल
- API या डेटाबेस से कंटेंट लाना
- वेरिएबल बनाना जिन्हें आप अपने टेम्पलेट में संदर्भित करेंगे
कोड बाड़ को यह गारंटी देने के लिए डिज़ाइन किया गया है कि आप इसमें जो JavaScript लिखते हैं वह “फेंस इन” है। यह आपके फ्रंटएंड एप्लिकेशन में नहीं बचेगा, या आपके उपयोगकर्ता के हाथों में नहीं आएगा। आप यहां सुरक्षित रूप से वह कोड लिख सकते हैं जो महंगा या संवेदनशील है (जैसे आपके निजी डेटाबेस पर कॉल) बिना इसके आपके उपयोगकर्ता के ब्राउज़र में समाप्त होने की चिंता किए।
आप अपनी अवयव स्क्रिप्ट में TypeScript भी लिख सकते हैं!
अवयव टेम्पलेट
शीर्षक अवयव टेम्पलेटअवयव टेम्पलेट कोड बाड़ के नीचे होता है और आपके अवयव का HTML परिणाम निर्धारित करता है।
यदि आप यहां सादा HTML लिखते हैं, तो आपका अवयव उस HTML को किसी भी Astro पेज में प्रस्तुत करेगा जिसे आयात और उपयोग किया जाता है।
हालाँकि, Astro का अवयव टेम्पलेट सिंटैक्स JavaScript अभिव्यक्तियों, Astro <style>
और <script>
टैग, आयातित अवयवों और विशेष Astro निर्देशों का भी समर्थन करता है। अवयव स्क्रिप्ट में परिभाषित डेटा और मानों का उपयोग गतिशील रूप से निर्मित HTML का उत्पादन करने के लिए अवयव टेम्पलेट में किया जा सकता है।
अवयव-आधारित डिज़ाइन
शीर्षक अवयव-आधारित डिज़ाइनअवयवो को पुन: प्रयोज्य और संयोजन योग्य बनाने के लिए डिज़ाइन किया गया है। आप अधिक से अधिक उन्नत UI बनाने के लिए अन्य अवयवो के अंदर अवयवो का उपयोग कर सकते हैं। उदाहरण के लिए, एक Button
अवयव का उपयोग ButtonGroup
अवयव बनाने के लिए किया जा सकता है:
अवयव प्रॉप्स
शीर्षक अवयव प्रॉप्सएक Astro अवयव प्रॉप्स को परिभाषित और स्वीकार कर सकता है। ये प्रॉप्स HTML रेंडर करने के लिए अवयव टेम्पलेट के लिए उपलब्ध हो जाते हैं। प्रॉप्स आपके फ्रंटमैटर स्क्रिप्ट में Astro.props
ग्लोबल पर उपलब्ध हैं।
यहां एक अवयव का उदाहरण दिया गया है जो greeting
प्रोप और name
प्रोप प्राप्त करता है। ध्यान दें कि प्राप्त होने वाले प्रॉप्स वैश्विक Astro.props
ऑब्जेक्ट से संरचित हैं।
यह अवयव, जब अन्य Astro अवयवों, लेआउट या पेजों में आयात और प्रस्तुत किया जाता है, तो इन प्रॉप्स को विशेषताओं के रूप में पारित कर सकता है:
आप अपने प्रॉप्स को Props
टाइप के इंटरफ़ेस के साथ TypeScript के साथ भी परिभाषित कर सकते हैं। Astro स्वचालित रूप से आपके फ्रंटमैटर में Props
इंटरफ़ेस उठाएगा और टाइप चेतावनियां/त्रुटियां देगा। Astro.props
से डिस्ट्रक्चर होने पर इन प्रॉप्स को डिफ़ॉल्ट मान भी दिया जा सकता है।
अवयव प्रॉप्स को डिफ़ॉल्ट मान दिए जा सकते हैं, जिनका उपयोग तब किया जा सकता है जब कोई भी प्रदान नहीं किया गया हो।
स्लॉट्स
शीर्षक स्लॉट्स<slot />
तत्व बाहरी HTML सामग्री के लिए एक प्लेसहोल्डर है, जो आपको अन्य फ़ाइलों से बाल तत्वों को अपने अवयव टेम्पलेट में घुसाने (या “स्लॉट”) करने की अनुमति देता है।
डिफ़ॉल्ट रूप से, किसी अवयव को दिए गए सभी बाल तत्व उसके <slot />
में प्रस्तुत किए जाएंगे।
props के विपरीत, जो Astro.props
के साथ आपके पूरे अवयव में उपयोग के लिए उपलब्ध Astro अवयव को दी गई विशेषताएँ हैं, slots बाल HTML तत्वों को प्रस्तुत करते हैं जहां वे लिखे गए हैं।
यह पैटर्न एक Astro लेआउट अवयव का आधार है: HTML सामग्री का एक पूरा पेज <SomeLayoutComponent></SomeLayoutComponent>
टैग के साथ “लिपटा” जा सकता है और अवयव को भेजा जा सकता है वहां परिभाषित सामान्य पेज तत्वों के अंदर प्रस्तुत करें।
नामांकित स्लॉट
शीर्षक नामांकित स्लॉटAstro अवयव में नामित स्लॉट भी हो सकते हैं। यह आपको स्लॉट के स्थान में संबंधित स्लॉट नाम के साथ केवल HTML तत्वों को भेजने की अनुमति देता है।
स्लॉट्स का नाम name
विशेषता का उपयोग करके रखा गया है:
HTML सामग्री को किसी विशेष स्लॉट में इंजेक्ट करने के लिए, स्लॉट का नाम निर्दिष्ट करने के लिए किसी भी चाइल्ड तत्व पर slot
विशेषता का उपयोग करें। अवयव के अन्य सभी चाइल्ड तत्वों को डिफ़ॉल्ट (अनाम) <slot />
में इंजेक्ट किया जाएगा।
Use a slot="my-slot"
attribute on the child element that you want to pass through to a matching <slot name="my-slot" />
placeholder in your component.
उस चाइल्ड तत्व पर slot="my-slot"
विशेषता का उपयोग करें जिसे आप अपने अवयव में मिलान वाले <slot name="my-slot" />
प्लेसहोल्डर तक पहुंचाना चाहते हैं।
एक अवयव के <slot/>
प्लेसहोल्डर में <div>
लपेटे बगैर एकाधिक HTML तत्वों को पास करने के लिए, Astro के <Fragment/>
अवयव पर slot=""
विशेषता का उपयोग करें:
"header"
और "body"
सामग्री को निर्दिष्ट करने के लिए slot=""
विशेषता का उपयोग करके HTML सामग्री की कई पंक्तियों और स्तंभों को इंजेक्ट करें। व्यक्तिगत HTML तत्वों को भी स्टाइल किया जा सकता है:
ध्यान दें कि नामित स्लॉट अवयव का तत्काल बच्चा होना चाहिए। आप नेस्टेड तत्वों के माध्यम से नामित स्लॉट भेज नहीं सकते।
नामित स्लॉट्स को UI फ्रेमवर्क अवयवों में भी पारित किया जा सकता है!
Astro स्लॉट नाम को गतिशील रूप से उत्पन्न करना संभव नहीं है, जैसे कि मानचित्र फ़ंक्शन के भीतर। यदि UI फ्रेमवर्क अवयवों के भीतर इस सुविधा की आवश्यकता है, तो फ्रेमवर्क के भीतर ही इन गतिशील स्लॉट्स को उत्पन्न करना सबसे अच्छा हो सकता है।
स्लॉट्स के लिए फ़ॉलबैक कंटेंट
शीर्षक स्लॉट्स के लिए फ़ॉलबैक कंटेंटस्लॉट फ़ॉलबैक सामग्री भी प्रस्तुत कर सकते हैं। जब किसी स्लॉट में कोई मेल खाने वाले बच्चे नहीं भेजे जाते हैं, तो एक <स्लॉट />
तत्व अपने स्वयं के प्लेसहोल्डर बच्चों को प्रस्तुत करेगा।
स्लॉट स्थानांतरित करना
शीर्षक स्लॉट स्थानांतरित करनास्लॉट्स को अन्य अवयवों में स्थानांतरित किया जा सकता है। उदाहरण के लिए, नेस्टेड लेआउट बनाते समय:
नामित स्लॉट को <slot />
टैग पर name
और slot
दोनों विशेषताओं का उपयोग करके किसी अन्य अवयव में स्थानांतरित किया जा सकता है
अब, HomeLayout
को दिए गए डिफ़ॉल्ट और head
स्लॉट को BaseLayout
जनक में स्थानांतरित कर दिया जाएगा
HTML अवयव
शीर्षक HTML अवयवAstro .html
फ़ाइलों को अवयवों के रूप में आयात करने और उपयोग करने या इन फ़ाइलों को src/pages/
उपनिर्देशिका में पेजों के रूप में रखने का समर्थन करता है। यदि आप किसी फ्रेमवर्क के बिना निर्मित मौजूदा साइट से कोड का पुन: उपयोग कर रहे हैं, या यदि आप यह सुनिश्चित करना चाहते हैं कि आपके अवयव में कोई गतिशील विशेषताएं नहीं हैं, तो आप HTML अवयवों का उपयोग करना चाह सकते हैं।
HTML अवयवों में केवल वैध HTML होना चाहिए, और इसलिए प्रमुख Astro अवयव सुविधाओं का अभाव है:
- वे फ्रंटमैटर, सर्वर-साइड आयात या गतिशील एक्सप्रेशन का समर्थन नहीं करते हैं।
- किसी भी
<script>
टैग को बिना बंडल किए छोड़ दिया जाता है, ऐसा माना जाता है मानो उनमेंis:inline
हो। - वे केवल उन परिसंपत्तियों का संदर्भ दे सकते हैं जो
public/
फ़ोल्डर में हैं
HTML अवयव के अंदर एक <slot />
तत्व उसी तरह काम करेगा जैसे वह एस्ट्रो अवयव में काम करेगा। इसके बजाय HTML वेब अवयव स्लॉट तत्व का उपयोग करने के लिए, अपने <slot>
तत्व में is:inline
जोड़ें।