इसे छोड़कर कंटेंट पर जाएं

अवयव

Astro अवयव किसी भी Astro परियोजना के बुनियादी निर्माण खंड हैं। वे केवल HTML टेम्प्लेटिंग अवयव हैं जिनमें कोई क्लाइंट-साइड रनटाइम नहीं है। आप Astro अवयव को उसके फ़ाइल एक्सटेंशन .astro द्वारा देख सकते हैं।

Astro अवयव अत्यंत लचीले हैं। अक्सर, Astro अवयव में पेज पर कुछ पुन: प्रयोज्य UI शामिल होगा, जैसे हेडर या प्रोफाइल कार्ड। अन्य समय में, Astro अवयव में HTML का एक छोटा सा स्निपेट हो सकता है, जैसे सामान्य <meta> टैग का संग्रह जो SEO के साथ काम करना आसान बनाता है। Astro अवयवों में संपूर्ण पेज लेआउट भी शामिल हो सकता है।

Astro अवयवों के बारे में जानने वाली सबसे महत्वपूर्ण बात यह है कि वे ग्राहक पर प्रस्तुत नहीं होते हैं। वे सर्वर-साइड रेंडरिंग (SSR) का उपयोग करके बिल्ड-समय या ऑन-डिमांड पर HTML को प्रस्तुत करते हैं। आप अपने अवयव फ्रंटमैटर के अंदर JavaScript कोड शामिल कर सकते हैं, और यह सब आपके उपयोगकर्ताओं के ब्राउज़र पर भेजे गए अंतिम पेज से हटा दिया जाएगा। परिणाम एक तेज़ साइट है, जिसमें डिफ़ॉल्ट रूप से शून्य JavaScript पदचिह्न जोड़ा गया है।

जब आपके Astro अवयव को क्लाइंट-साइड अन्तरक्रियाशीलता की आवश्यकता होती है, तो आप मानक HTML <script> टैग या UI फ्रेमवर्क अवयव जोड़ सकते हैं।

अवयव संरचना

शीर्षक अवयव संरचना

Astro अवयव दो मुख्य भागों से बने है: अवयव स्क्रिप्ट और अवयव टेम्पलेट। प्रत्येक भाग एक अलग कार्य करता है, लेकिन साथ में वे एक ऐसा फ्रेमवर्क प्रदान करते हैं जो उपयोग में आसान और इतना अभिव्यंजक है कि आप जो कुछ भी बनाना चाहते हैं उसे संभाल सके।

src/components/EmptyComponent.astro
---
// अवयव स्क्रिप्ट (JavaScript)
---
<!-- अवयव टेम्पलेट (HTML + JS एक्सप्रेशन) -->

अवयव स्क्रिप्ट

शीर्षक अवयव स्क्रिप्ट

Astro आपके Astro अवयव में अवयव स्क्रिप्ट की पहचान करने के लिए एक कोड बाड़ (---) का उपयोग करता है। यदि आपने पहले कभी Markdown लिखा है, तो आप पहले से ही frontmatter नामक एक समान अवधारणा से परिचित हो सकते हैं। Astro का एक अवयव स्क्रिप्ट का विचार सीधे इस अवधारणा से प्रेरित था।

आप अपने टेम्पलेट को प्रस्तुत करने के लिए आवश्यक किसी भी JavaScript कोड को लिखने के लिए अवयव स्क्रिप्ट का उपयोग कर सकते हैं। इसमें शामिल हो सकते हैं:

  • अन्य Astro अवयवों का आयात करना
  • React जैसे अन्य फ्रेमवर्क अवयवों को आयात करना
  • डेटा आयात करना जैसे जैसे की एक JSON फ़ाइल
  • API या डेटाबेस से कंटेंट लाना
  • वेरिएबल बनाना जिन्हें आप अपने टेम्पलेट में संदर्भित करेंगे
src/components/MyComponent.astro
---
import SomeAstroComponent from '../components/SomeAstroComponent.astro';
import SomeReactComponent from '../components/SomeReactComponent.jsx';
import someData from '../data/pokemon.json';


// पास किए गए अवयव प्रॉप्स तक पहुंचें, जैसे `<X title='नमस्ते, दुनिया' />`
const { title } = Astro.props;
// निजी API या डेटाबेस से भी बाहरी डेटा प्राप्त करें
const data = await fetch('SOME_SECRET_API_URL/users').then(r => r.json());
---
<!-- आपका टेम्पलेट यहाँ! -->

कोड बाड़ को यह गारंटी देने के लिए डिज़ाइन किया गया है कि आप इसमें जो JavaScript लिखते हैं वह “फेंस इन” है। यह आपके फ्रंटएंड एप्लिकेशन में नहीं बचेगा, या आपके उपयोगकर्ता के हाथों में नहीं आएगा। आप यहां सुरक्षित रूप से वह कोड लिख सकते हैं जो महंगा या संवेदनशील है (जैसे आपके निजी डेटाबेस पर कॉल) बिना इसके आपके उपयोगकर्ता के ब्राउज़र में समाप्त होने की चिंता किए।

अवयव टेम्पलेट

शीर्षक अवयव टेम्पलेट

अवयव टेम्पलेट कोड बाड़ के नीचे होता है और आपके अवयव का HTML परिणाम निर्धारित करता है।

यदि आप यहां सादा HTML लिखते हैं, तो आपका अवयव उस HTML को किसी भी Astro पेज में प्रस्तुत करेगा जिसे आयात और उपयोग किया जाता है।

हालाँकि, Astro का अवयव टेम्पलेट सिंटैक्स JavaScript अभिव्यक्तियों, Astro <style> और <script> टैग, आयातित अवयवों और विशेष Astro निर्देशों का भी समर्थन करता है। अवयव स्क्रिप्ट में परिभाषित डेटा और मानों का उपयोग गतिशील रूप से निर्मित HTML का उत्पादन करने के लिए अवयव टेम्पलेट में किया जा सकता है।

src/components/MyFavoritePokemon.astro
---
// आपकी अवयव स्क्रिप्ट यहाँ!
import Banner from '../components/Banner.astro';
import ReactPokemonComponent from '../components/ReactPokemonComponent.jsx';
const myFavoritePokemon = [/* ... */];
const { title } = Astro.props;
---
<!-- HTML टिप्पणियाँ समर्थित! -->
{/* JS टिप्पणी सिंटैक्स भी मान्य है! */}


<Banner />
<h1>नमस्ते, दुनिया!</h1>


<!-- अवयव स्क्रिप्ट से प्रॉप्स और अन्य चर का उपयोग करें: -->
<p>{title}</p>


<!-- हाइड्रेट करने के लिए `client:` निर्देश के साथ अन्य UI फ्रेमवर्क अवयवों को शामिल करें: -->
<ReactPokemonComponent client:visible />


<!-- JSX के समान HTML को JavaScript एक्सप्रेशन के साथ मिलाएं: -->
<ul>
  {myFavoritePokemon.map((data) => <li>{data.name}</li>)}
</ul>


<!-- एकाधिक स्ट्रिंग्स या यहां तक कि ऑब्जेक्ट्स से क्लास नाम बनाने के लिए टेम्पलेट निर्देश का उपयोग करें! -->
<p class:list={["add", "dynamic", {classNames: true}]} />

अवयव-आधारित डिज़ाइन

शीर्षक अवयव-आधारित डिज़ाइन

अवयवो को पुन: प्रयोज्य और संयोजन योग्य बनाने के लिए डिज़ाइन किया गया है। आप अधिक से अधिक उन्नत UI बनाने के लिए अन्य अवयवो के अंदर अवयवो का उपयोग कर सकते हैं। उदाहरण के लिए, एक Button अवयव का उपयोग ButtonGroup अवयव बनाने के लिए किया जा सकता है:

src/components/ButtonGroup.astro
---
import Button from './Button.astro';
---
<div>
  <Button title="Button 1" />
  <Button title="Button 2" />
  <Button title="Button 3" />
</div>

अवयव प्रॉप्स

शीर्षक अवयव प्रॉप्स

एक Astro अवयव प्रॉप्स को परिभाषित और स्वीकार कर सकता है। ये प्रॉप्स HTML रेंडर करने के लिए अवयव टेम्पलेट के लिए उपलब्ध हो जाते हैं। प्रॉप्स आपके फ्रंटमैटर स्क्रिप्ट में Astro.props ग्लोबल पर उपलब्ध हैं।

यहां एक अवयव का उदाहरण दिया गया है जो greeting प्रोप और name प्रोप प्राप्त करता है। ध्यान दें कि प्राप्त होने वाले प्रॉप्स वैश्विक Astro.props ऑब्जेक्ट से संरचित हैं।

src/components/GreetingHeadline.astro
---
// Usage: <GreetingHeadline greeting="Howdy" name="Partner" />
const { greeting, name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

यह अवयव, जब अन्य Astro अवयवों, लेआउट या पेजों में आयात और प्रस्तुत किया जाता है, तो इन प्रॉप्स को विशेषताओं के रूप में पारित कर सकता है:

src/components/GreetingCard.astro
---
import GreetingHeadline from './GreetingHeadline.astro';
const name = 'Astro';
---
<h1>Greeting Card</h1>
<GreetingHeadline greeting="Hi" name={name} />
<p>मुझे आशा है आपका दिन बहुत बढ़िया रहे!</p>

आप अपने प्रॉप्स को Props टाइप के इंटरफ़ेस के साथ TypeScript के साथ भी परिभाषित कर सकते हैं। Astro स्वचालित रूप से आपके फ्रंटमैटर में Props इंटरफ़ेस उठाएगा और टाइप चेतावनियां/त्रुटियां देगा। Astro.props से डिस्ट्रक्चर होने पर इन प्रॉप्स को डिफ़ॉल्ट मान भी दिया जा सकता है।

src/components/GreetingHeadline.astro
---
interface Props {
  name: string;
  greeting?: string;
}


const { greeting = "नमस्ते", name } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

अवयव प्रॉप्स को डिफ़ॉल्ट मान दिए जा सकते हैं, जिनका उपयोग तब किया जा सकता है जब कोई भी प्रदान नहीं किया गया हो।

src/components/GreetingHeadline.astro
---
const { greeting = "नमस्ते ", name = "अंतरिक्ष यात्री" } = Astro.props;
---
<h2>{greeting}, {name}!</h2>

स्लॉट्स

शीर्षक स्लॉट्स

<slot /> तत्व बाहरी HTML सामग्री के लिए एक प्लेसहोल्डर है, जो आपको अन्य फ़ाइलों से बाल तत्वों को अपने अवयव टेम्पलेट में घुसाने (या “स्लॉट”) करने की अनुमति देता है।

डिफ़ॉल्ट रूप से, किसी अवयव को दिए गए सभी बाल तत्व उसके <slot /> में प्रस्तुत किए जाएंगे।

src/components/Wrapper.astro
---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';


const { title } = Astro.props;
---
<div id="content-wrapper">
  <Header />
  <Logo />
  <h1>{title}</h1>
  <slot />  <!-- बच्चे यहाँ जायेंगे -->
  <Footer />
</div>
src/pages/fred.astro
---
import Wrapper from '../components/Wrapper.astro';
---
<Wrapper title="Fred का पेज">
  <h2>Fred के बारे में सब कुछ</h2>
  <p>यहां Fred के बारे में कुछ बातें दी गई हैं।</p>
</Wrapper>

यह पैटर्न एक Astro लेआउट अवयव का आधार है: HTML सामग्री का एक पूरा पेज <SomeLayoutComponent></SomeLayoutComponent> टैग के साथ “लिपटा” जा सकता है और अवयव को भेजा जा सकता है वहां परिभाषित सामान्य पेज तत्वों के अंदर प्रस्तुत करें।

नामांकित स्लॉट

शीर्षक नामांकित स्लॉट

Astro अवयव में नामित स्लॉट भी हो सकते हैं। यह आपको स्लॉट के स्थान में संबंधित स्लॉट नाम के साथ केवल HTML तत्वों को भेजने की अनुमति देता है।

स्लॉट्स का नाम name विशेषता का उपयोग करके रखा गया है:

src/components/Wrapper.astro
---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';


const { title } = Astro.props;
---
<div id="content-wrapper">
  <Header />
  <slot name="after-header" />  <!--  `slot="after-header"` विशेषता वाले बच्चे यहां जाएंगे -->
  <Logo />
  <h1>{title}</h1>
  <slot />  <!--  बिना `slot` वाले या `slot="default"` विशेषता वाले बच्चे यहां जाएंगे-->
  <Footer />
  <slot name="after-footer" />  <!--  `slot="after-footer"` विशेषता वाले बच्चे यहां जाएंगे -->
</div>

HTML सामग्री को किसी विशेष स्लॉट में इंजेक्ट करने के लिए, स्लॉट का नाम निर्दिष्ट करने के लिए किसी भी चाइल्ड तत्व पर slot विशेषता का उपयोग करें। अवयव के अन्य सभी चाइल्ड तत्वों को डिफ़ॉल्ट (अनाम) <slot /> में इंजेक्ट किया जाएगा।

src/pages/fred.astro
---
import Wrapper from '../components/Wrapper.astro';
---
<Wrapper title="Fred's Page">
  <img src="https://my.photo/fred.jpg" slot="after-header" />
  <h2>Fred के बारे में सब कुछ</h2>
  <p>यहां Fred के बारे में कुछ बातें दी गई हैं।</p>
  <p slot="after-footer">Copyright 2022</p>
</Wrapper>

एक अवयव के <slot/> प्लेसहोल्डर में <div> लपेटे बगैर एकाधिक HTML तत्वों को पास करने के लिए, Astro के <Fragment/> अवयव पर slot="" विशेषता का उपयोग करें:

src/components/CustomTable.astro
---
// सिर और शरीर की सामग्री के लिए नामित स्लॉट प्लेसहोल्डर के साथ एक कस्टम तालिका बनाएं
---
<table class="bg-white">
  <thead class="sticky top-0 bg-white"><slot name="header" /></thead>
  <tbody class="[&_tr:nth-child(odd)]:bg-gray-100"><slot name="body" /></tbody>
</table>

"header" और "body" सामग्री को निर्दिष्ट करने के लिए slot="" विशेषता का उपयोग करके HTML सामग्री की कई पंक्तियों और स्तंभों को इंजेक्ट करें। व्यक्तिगत HTML तत्वों को भी स्टाइल किया जा सकता है:

src/components/StockTable.astro
---
import CustomTable from './CustomTable.astro';
---
<CustomTable>
  <Fragment slot="header"> <!-- तालिका का हैडर भेजें  -->
    <tr><th>Product name</th><th>Stock units</th></tr>
  </Fragment>


  <Fragment slot="body"> <!-- तालिका की बॉडी भेजें  -->
    <tr><td>Flip-flops</td><td>64</td></tr>
    <tr><td>Boots</td><td>32</td></tr>
    <tr><td>Sneakers</td><td class="text-red-500">0</td></tr>
  </Fragment>
</CustomTable>

ध्यान दें कि नामित स्लॉट अवयव का तत्काल बच्चा होना चाहिए। आप नेस्टेड तत्वों के माध्यम से नामित स्लॉट भेज नहीं सकते।

स्लॉट्स के लिए फ़ॉलबैक कंटेंट

शीर्षक स्लॉट्स के लिए फ़ॉलबैक कंटेंट

स्लॉट फ़ॉलबैक सामग्री भी प्रस्तुत कर सकते हैं। जब किसी स्लॉट में कोई मेल खाने वाले बच्चे नहीं भेजे जाते हैं, तो एक <स्लॉट /> तत्व अपने स्वयं के प्लेसहोल्डर बच्चों को प्रस्तुत करेगा।

src/components/Wrapper.astro
---
import Header from './Header.astro';
import Logo from './Logo.astro';
import Footer from './Footer.astro';


const { title } = Astro.props;
---
<div id="content-wrapper">
  <Header />
  <Logo />
  <h1>{title}</h1>
  <slot>
    <p>यदि स्लॉट में कोई बच्चा नहीं भेजा गया तो यह मेरी फ़ॉलबैक सामग्री है</p>
  </slot>
  <Footer />
</div>

स्लॉट स्थानांतरित करना

शीर्षक स्लॉट स्थानांतरित करना

स्लॉट्स को अन्य अवयवों में स्थानांतरित किया जा सकता है। उदाहरण के लिए, नेस्टेड लेआउट बनाते समय:

src/layouts/BaseLayout.astro
---
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <slot name="head" />
  </head>
  <body>
    <slot />
  </body>
</html>
src/layouts/HomeLayout.astro
---
import BaseLayout from './BaseLayout.astro';
---
<BaseLayout>
  <slot name="head" slot="head" />
  <slot />
</BaseLayout>

अब, HomeLayout को दिए गए डिफ़ॉल्ट और head स्लॉट को BaseLayout जनक में स्थानांतरित कर दिया जाएगा

src/pages/index.astro
---
import HomeLayout from '../layouts/HomeLayout.astro';
---
<HomeLayout>
  <title slot="head">Astro</title>
  <h1>Astro</h1>
</HomeLayout>

HTML अवयव

शीर्षक HTML अवयव

Astro .html फ़ाइलों को अवयवों के रूप में आयात करने और उपयोग करने या इन फ़ाइलों को src/pages/ उपनिर्देशिका में पेजों के रूप में रखने का समर्थन करता है। यदि आप किसी फ्रेमवर्क के बिना निर्मित मौजूदा साइट से कोड का पुन: उपयोग कर रहे हैं, या यदि आप यह सुनिश्चित करना चाहते हैं कि आपके अवयव में कोई गतिशील विशेषताएं नहीं हैं, तो आप HTML अवयवों का उपयोग करना चाह सकते हैं।

HTML अवयवों में केवल वैध HTML होना चाहिए, और इसलिए प्रमुख Astro अवयव सुविधाओं का अभाव है:

अगले कदम

शीर्षक अगले कदम
अपने Astro परियोजना में UI फ्रेमवर्क अवयवों का उपयोग करने के बारे में और पढ़ें।