अवयवों

अवयव आपको आसानी से 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>

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

Stars

Sirius, Vega, Betelgeuse

Moons

Io, Europa, Ganymede

कार्ड

आप <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

संकेत

अपने परियोजना की मुख्य विशेषताओं को प्रदर्शित करने के लिए अपने होम पेज पर एक कार्ड ग्रिड का उपयोग करें। कार्ड के दूसरे कॉलम को लंबवत रूप से स्थानांतरित करने और दृश्य रुचि जोड़ने के लिए stagger विशेषता जोड़ें:

<CardGrid stagger>
  <!-- cards -->
</CardGrid>

लिंक कार्ड

विभिन्न पेजों को प्रमुखता से लिंक करने के लिए <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" />

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

सभी आइकन

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

up-caret down-caret right-caret right-arrow left-arrow bars translate pencil pen document add-document setting external moon sun laptop open-book information magnifier forward-slash close error warning approve-check-circle approve-check rocket star puzzle list-format random github gitlab bitbucket codePen discord gitter twitter x.com mastodon codeberg youtube threads linkedin twitch microsoftTeams instagram stackOverflow telegram rss facebook email reddit patreon slack matrix openCollective

कोड

जब 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" />