अवयवों

अवयव आपको आसानी से 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 होना चाहिए। लेबल के आगे Starlight के अंतर्निर्मित आइकन में से एक को शामिल करने के लिए वैकल्पिक icon विशेषता का उपयोग करें।

src/content/docs/example.mdx

import { Tabs, TabItem } from '@astrojs/starlight/components';

<Tabs>
  <TabItem label="Stars" icon="star">
    Sirius, Vega, Betelgeuse
  </TabItem>
  <TabItem label="Moons" icon="moon">
    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 में कंटेंट संलेखन” मार्गदर्शिका देखें।

कोड

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

फ़ाइल वृक्ष

फ़ाइल आइकन और बंधने योग्य उप-निर्देशिकाओं के साथ निर्देशिका की संरचना प्रदर्शित करने के लिए <FileTree> घटक का उपयोग करें।

<FileTree> के अंदर एक अव्यवस्थित Markdown सूची के साथ अपनी फ़ाइलों और निर्देशिकाओं की संरचना निर्दिष्ट करें। नेस्टेड सूची का उपयोग करके एक उप-निर्देशिका बनाएं या इसे विशिष्ट सामग्री के बिना निर्देशिका के रूप में प्रस्तुत करने के लिए सूची आइटम के अंत में / जोड़ें।

फ़ाइल वृक्ष के स्वरूप को अनुकूलित करने के लिए निम्नलिखित सिंटैक्स का उपयोग किया जा सकता है:

• किसी फ़ाइल या निर्देशिका का नाम बोल्ड करके उसे हाइलाइट करें, उदा. **README.md** पढ़ें.
• किसी फ़ाइल या निर्देशिका में नाम के बाद और टेक्स्ट जोड़कर एक टिप्पणी जोड़ें।
• नाम के रूप में .... या … का उपयोग करके प्लेसहोल्डर फ़ाइलें और निर्देशिकाएँ जोड़ें।

src/content/docs/example.mdx

import { FileTree } from '@astrojs/starlight/components';

<FileTree>

- astro.config.mjs an **important** file
- package.json
- README.md
- src
  - components
    - **Header.astro**
  - …
- pages/

</FileTree>

उपरोक्त कोड पृष्ठ पर निम्नलिखित उत्पन्न करता है:

• astro.config.mjs एक महत्वपूर्ण फ़ाइल
• package.json
• README.md
• Directorysrc

  • Directorycomponents

    • Header.astro
  • …
• Directorypages/

  • …

चरण

कार्यों की क्रमांकित सूचियों को स्टाइल करने के लिए <चरण> घटक का उपयोग करें। यह अधिक जटिल चरण-दर-चरण मार्गदर्शिकाओं के लिए उपयोगी है जहां प्रत्येक चरण को स्पष्ट रूप से हाइलाइट करने की आवश्यकता होती है।

<चरण> को मानक Markdown आदेशित सूची के चारों ओर लपेटें। सभी सामान्य Markdown सिंटैक्स <Steps> के अंदर लागू होते हैं।

src/content/docs/example.mdx

import { Steps } from '@astrojs/starlight/components';

<Steps>

1. अवयव को अपनी MDX फ़ाइल में आयात करें:

   ```js
   import { Steps } from '@astrojs/starlight/components';
   ```

2. अपने ऑर्डर किए गए सूची आइटम के चारों ओर `<Steps>` लपेटें।

</Steps>

उपरोक्त कोड पृष्ठ पर निम्नलिखित उत्पन्न करता है:

1. अवयव को अपनी MDX फ़ाइल में आयात करें:

   import { Steps } from '@astrojs/starlight/components';

2. अपने ऑर्डर किए गए सूची आइटम के चारों ओर <Steps> लपेटें।

आइकन

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 comment comment-alt heart github gitlab bitbucket codePen farcaster discord gitter twitter x.com mastodon codeberg youtube threads linkedin twitch microsoftTeams instagram stackOverflow telegram rss facebook email reddit patreon signal slack matrix hackerOne openCollective blueSky astro alpine pnpm biome bun mdx apple linux homebrew nix starlight pkl node cloudflare vercel netlify deno seti:folder seti:bsl seti:mdo seti:salesforce seti:asm seti:bicep seti:bazel seti:c seti:c-sharp seti:html seti:cpp seti:clojure seti:coldfusion seti:config seti:crystal seti:crystal_embedded seti:json seti:css seti:csv seti:xls seti:cu seti:cake seti:cake_php seti:d seti:word seti:elixir seti:elixir_script seti:hex seti:elm seti:favicon seti:f-sharp seti:git seti:go seti:godot seti:gradle seti:grails seti:graphql seti:hacklang seti:haml seti:mustache seti:haskell seti:haxe seti:jade seti:java seti:javascript seti:jinja seti:julia seti:karma seti:kotlin seti:dart seti:liquid seti:livescript seti:lua seti:markdown seti:argdown seti:info seti:clock seti:maven seti:nim seti:github seti:notebook seti:nunjucks seti:npm seti:ocaml seti:odata seti:perl seti:php seti:pipeline seti:pddl seti:plan seti:happenings seti:powershell seti:prisma seti:pug seti:puppet seti:purescript seti:python seti:react seti:rescript seti:R seti:ruby seti:rust seti:sass seti:spring seti:slim seti:smarty seti:sbt seti:scala seti:ethereum seti:stylus seti:svelte seti:swift seti:db seti:terraform seti:tex seti:default seti:twig seti:typescript seti:tsconfig seti:vala seti:vue seti:wasm seti:wat seti:xml seti:yml seti:prolog seti:zig seti:zip seti:wgt seti:illustrator seti:photoshop seti:pdf seti:font seti:image seti:svg seti:sublime seti:code-search seti:shell seti:video seti:audio seti:windows seti:jenkins seti:babel seti:bower seti:docker seti:code-climate seti:eslint seti:firebase seti:firefox seti:gitlab seti:grunt seti:gulp seti:ionic seti:platformio seti:rollup seti:stylelint seti:yarn seti:webpack seti:lock seti:license seti:makefile seti:heroku seti:todo seti:ignored