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

अवयवों

अवयव आपको आसानी से UI के एक टुकड़े या शैलियों का लगातार पुन: उपयोग करने देते हैं। उदाहरणों में एक लिंक कार्ड या YouTube embed शामिल हो सकता है। Starlight MDX फ़ाइलों में अवयवों के उपयोग का समर्थन करता है और आपके उपयोग के लिए कुछ सामान्य अवयव प्रदान करता है।

Astro दस्तावेज़ीकरण के माध्यम से अवयवों के निर्माण के बारे में और जानें।

जाने कैसे एक अवयव का उपयोग करें

आप किसी अवयव को अपने MDX फ़ाइल में आयात करके और फिर उसे JSX टैग के रूप में प्रस्तुत करके उपयोग कर सकते हैं। ये HTML टैग्स की तरह दिखते हैं लेकिन आपके import कथन में नाम से मेल खाने वाले बड़े अक्षर से शुरू होते हैं:

src/content/docs/example.mdx
---
title: मेरे दस्तावेज़ में आपका स्वागत है
---


import SomeComponent from '../../components/SomeComponent.astro';
import AnotherComponent from '../../components/AnotherComponent.astro';


<SomeComponent prop="something" />


<AnotherComponent>
  अवयवों में **नेस्टेड कंटेंट** भी हो सकती है।
</AnotherComponent>

क्योंकि Starlight Astro द्वारा संचालित है, आप अपने MDX फ़ाइलों में किसी भी समर्थित UI फ्रेमवर्क (React, Preact, Svelte, Vue, Solid, Lit और Alpine) के साथ निर्मित अवयवों के लिए समर्थन जोड़ सकते हैं। Astro दस्तावेज़ीकरण में MDX में अवयवों का उपयोग करने के बारे में और जानें।

Starlight की शैलियों के साथ संगतता

Starlight आपके Markdown कंटेंट पर डिफ़ॉल्ट शैलि लागू करता है, उदाहरण के लिए तत्वों के बीच margin जोड़ना। यदि ये शैलियाँ आपके अवयव की उपस्थिति के साथ संघर्ष करती हैं, तो उन्हें अक्षम करने के लिए अपने अवयव पर not-content वर्ग सेट करें।

src/components/Example.astro
<div class="not-content">
  <p>Starlight की डिफ़ॉल्ट कंटेंट शैली से प्रभावित नहीं।</p>
</div>

अंतर्निर्मित अवयव

Starlight सामान्य दस्तावेज़ीकरण उपयोग मामलों के लिए कुछ अंतर्निहित अवयव प्रदान करता है। ये अवयव @astrojs/starlight/components पैकेज से उपलब्ध हैं।

टैब

आप <Tabs> और <TabItem> अवयवों का उपयोग करके एक टैब्ड इंटरफ़ेस प्रदर्शित कर सकते हैं। प्रत्येक <TabItem> में उपयोगकर्ताओं को प्रदर्शित करने के लिए एक label होना चाहिए।

src/content/docs/example.mdx
import { Tabs, TabItem } from '@astrojs/starlight/components';


<Tabs>
  <TabItem label="Stars">Sirius, Vega, Betelgeuse</TabItem>
  <TabItem label="Moons">Io, Europa, Ganymede</TabItem>
</Tabs>

उपरोक्त कोड पेज पर निम्नलिखित टैब उत्पन्न करता है:

Sirius, Vega, Betelgeuse

कार्ड

आप <Card> अवयव का उपयोग करके Starlight की शैलियों से मेल खाने वाले बक्से में कंटेंट प्रदर्शित कर सकते हैं। पर्याप्त जगह होने पर कार्डों को एक साथ प्रदर्शित करने के लिए <CardGrid> अवयव में एकाधिक कार्ड लपेटें।

एक <Card> के लिए एक title की आवश्यकता होती है और इसमें वैकल्पिक रूप से Starlight के अंतर्निहित आइकनों में से एक के नाम पर सेट एक icon विशेषता शामिल हो सकती है।

src/content/docs/example.mdx
import { Card, CardGrid } from '@astrojs/starlight/components';


<Card title="इसको देखे">दिलचस्प कंटेंट जिसे आप हाइलाइट करना चाहते हैं।</Card>


<CardGrid>
  <Card title="सितारे" icon="star">
    Sirius, Vega, Betelgeuse
  </Card>
  <Card title="चन्द्रमा" icon="moon">
    Io, Europa, Ganymede
  </Card>
</CardGrid>

उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:

इसको देखे

दिलचस्प कंटेंट जिसे आप हाइलाइट करना चाहते हैं।

सितारे

Sirius, Vega, Betelgeuse

चन्द्रमा

Io, Europa, Ganymede

लिंक कार्ड

विभिन्न पेजों को प्रमुखता से लिंक करने के लिए <LinkCard> अवयव का उपयोग करें।

<LinkCard> के लिए एक title और एक href विशेषता की आवश्यकता होती है। आप वैकल्पिक रूप से एक संक्षिप्त description या target जैसी अन्य लिंक विशेषताएँ शामिल कर सकते हैं।

पर्याप्त जगह होने पर कार्डों को एक साथ प्रदर्शित करने के लिए <CardGrid> में कई <LinkCard> अवयवों को समूहित करें।

src/content/docs/example.mdx
import { LinkCard, CardGrid } from '@astrojs/starlight/components';


<LinkCard
  title="स्टारलाईट को अनुकूलित करना"
  description="जानें कि कस्टम शैलियों, फ़ॉन्ट और बहुत कुछ के साथ अपनी Starlight साइट को कैसे अपना बनाएं।"
  href="/hi/guides/customization/"
/>


<CardGrid>
  <LinkCard title="Markdown का संलेखन" href="/hi/guides/authoring-content/" />
  <LinkCard title="अवयवों" href="/hi/guides/components/" />
</CardGrid>

उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:

स्टारलाईट को अनुकूलित करना जानें कि कस्टम शैलियों, फ़ॉन्ट और बहुत कुछ के साथ अपनी Starlight साइट को कैसे अपना बनाएं।
Markdown का संलेखन
अवयवों

असाइड्स

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

एक <Aside> में note (डिफ़ॉल्ट), tip, caution या danger का वैकल्पिक type हो सकता है। title विशेषता सेट करना डिफ़ॉल्ट असाइड् शीर्षक को ओवरराइड करता है।

src/content/docs/example.mdx
import { Aside } from '@astrojs/starlight/components';


<Aside>कस्टम शीर्षक के बिना एक डिफ़ॉल्ट असाइड्।</Aside>


<Aside type="caution" title="ध्यान रहें!">
  एक कस्टम शीर्षक के *साथ* एक चेतावनी वाला असाइड्।
</Aside>


<Aside type="tip">


असाइड्स में अन्य कंटेंट भी अलग से समर्थित है।


```js
// उदाहरण के लिए, एक कोड स्निपेट।
```


</Aside>


<Aside type="danger">आप अपना पासवर्ड किसी को न दें।</Aside>

उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:

Starlight <Aside> अवयव के विकल्प के रूप में Markdown” और MDX में असाइड् प्रस्तुत करने के लिए एक कस्टम सिंटैक्स भी प्रदान करता है। कस्टम सिंटैक्स के विवरण के लिए “Markdown में कंटेंट संलेखन” मार्गदर्शिका देखें।

आइकन

Starlight सामान्य आइकन का एक संग्रह प्रदान करता है जिसे आप <Icon> अवयव का उपयोग करके अपने कंटेंट में प्रदर्शित कर सकते हैं।

प्रत्येक <Icon> को एक name की आवश्यकता होती है और इसमें वैकल्पिक रूप से एक label, size, और color विशेषता शामिल हो सकती है।

src/content/docs/example.mdx
import { Icon } from '@astrojs/starlight/components';


<Icon name="star" color="goldenrod" size="2rem" />

उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:

सभी आइकन

सभी उपलब्ध आइकनों की एक सूची उनके संबंधित नामों के साथ नीचे दिखाई गई है। इसके अवयव कोड की प्रतिलिपि बनाने के लिए किसी भी आइकन पर क्लिक करें।

कोड

जब Markdown कोड ब्लॉक का उपयोग करना संभव नहीं हो, तब सिंटैक्स हाइलाइट किए गए कोड को रेंडर करने के लिए <Code> अवयव का उपयोग करें, उदाहरण के लिए, फ़ाइलों, डेटाबेस, या APIs जैसे बाहरी स्रोतों से आने वाले डेटा को रेंडर करना।

<Code> द्वारा समर्थित प्रॉप्स की पूरी जानकारी के लिए Expressive Code “Code अवयव” दस्तावेज़ देखें।

src/content/docs/example.mdx
import { Code } from '@astrojs/starlight/components';


export const exampleCode = `console.log('यह किसी फ़ाइल या CMS से आ सकता है!');`;
export const fileName = 'example.js';
export const highlights = ['फ़ाइल', 'CMS'];


<Code code={exampleCode} lang="js" title={fileName} mark={highlights} />

उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:

example.js
console.log('यह किसी फ़ाइल या CMS से आ सकता है!');

आयातित कोड

किसी भी कोड फ़ाइल को स्ट्रिंग के रूप में आयात करने के लिए Vite के ?raw आयात प्रत्यय का उपयोग करें। फिर आप इस आयातित स्ट्रिंग को अपने पृष्ठ पर शामिल करने के लिए <Code> अवयव में पास कर सकते हैं।

src/content/docs/example.mdx
import { Code } from '@astrojs/starlight/components';
import importedCode from '/src/env.d.ts?raw';


<Code code={importedCode} lang="ts" title="src/env.d.ts" />

उपरोक्त कोड पेज पर निम्नलिखित उत्पन्न करता है:

src/env.d.ts
/// <reference path="../.astro/types.d.ts" />
/// <reference types="astro/client" />