परियोजना संरचना

create astro CLI विज़ार्ड से उत्पन्न आपके नए Astro परियोजना में पहले से ही कुछ फ़ाइलें और फ़ोल्डर्स शामिल होते हैं। अन्य, आप स्वयं बनाएंगे और Astro की मौजूदा फ़ाइल संरचना में जोड़ें।

यहां बताया गया है कि Astro परियोजना कैसे आयोजित किया जाता है, और कुछ फ़ाइलें जो आपको अपने नए परियोजना में मिलेंगी।

निर्देशिकाएँ और फ़ाइलें

Astro आपके परियोजना के लिए एक सुविचारित फ़ोल्डर लेआउट का लाभ उठाता है। प्रत्येक Astro परियोजना रूट में निम्नलिखित निर्देशिकाएँ और फ़ाइलें शामिल होनी चाहिए:

• src/* - आपका परियोजना स्रोत कोड (अवयव, पृष्ठ, शैलियाँ, आदि।)
• public/* - आपका गैर-कोड, असंसाधित संपत्ति (फ़ॉन्ट, आइकॉन, आदि)
• package.json - एक परियोजना घोषणापत्र।
• astro.config.mjs - एक Astro कॉन्फ़िगरेशन फ़ाइल। (अनुशंसित)
• tsconfig.json - एक TypeScript कॉन्फ़िगरेशन फ़ाइल। (अनुशंसित)

उदाहरण परियोजना वृक्ष

एक सामान्य Astro परियोजना निर्देशिका इस तरह दिख सकती है:

• Directorypublic/

  • robots.txt
  • favicon.svg
  • social-image.png
• Directorysrc/

  • Directorycomponents/

    • Header.astro
    • Button.jsx
  • Directorylayouts/

    • PostLayout.astro
  • Directorypages/

    • Directoryposts/

      • post1.md
      • post2.md
      • post3.md
    • index.astro
  • Directorystyles/

    • global.css
• astro.config.mjs
• package.json
• tsconfig.json

src/

src/ फ़ोल्डर वह जगह है जहां आपका अधिकांश परियोजना स्रोत कोड रहता है। इसमें शामिल:

• पृष्ठ
• नक़्शे (EN)
• Astro अवयव
• UI फ्रेमवर्क अवयव (React, etc.) (EN)
• शैलियां (CSS, Sass) (EN)
• Markdown (EN)

ब्राउज़र पर भेजी जाने वाली अंतिम वेबसाइट बनाने के लिए Astro आपकी src/ फ़ाइलों को संसाधित, अनुकूलित और बंडल करता है। स्थिर public/ निर्देशिका के विपरीत, आपकी src/ फ़ाइलें Astro द्वारा आपके लिए बनाई और प्रबंधित की जाती हैं।

कुछ फ़ाइलें (जैसे Astro अवयव) लिखित रूप में ब्राउज़र पर भी नहीं भेजी जाती हैं, बल्कि उन्हें स्थिर HTML में प्रस्तुत किया जाता है। अन्य फ़ाइलें (जैसे CSS) ब्राउज़र पर भेजी जाती हैं लेकिन प्रदर्शन के लिए उन्हें अन्य CSS फ़ाइलों के साथ अनुकूलित या बंडल किया जा सकता है।

:::tipहालाँकि यह मार्गदर्शिका Astro समुदाय में उपयोग की जाने वाली कुछ लोकप्रिय परंपराओं का वर्णन करती है, Astro द्वारा आरक्षित एकमात्र निर्देशिकाएँ src/pages/ और src/content/ हैं। आप किसी भी अन्य निर्देशिका का नाम बदलने और उसे इस तरह से पुनर्व्यवस्थित करने के लिए स्वतंत्र हैं जो आपके लिए सर्वोत्तम हो।:::

src/components

अवयव आपके HTML पेजों के लिए कोड की पुन: प्रयोज्य इकाइयाँ हैं। ये Astro अवयव, या UI फ्रेमवर्क अवयव (EN) जैसे React या Vue हो सकते हैं। इस फ़ोल्डर में अपने सभी परियोजना अवयवों को एक साथ समूहित और आयोजित करना आम बात है।

Astro परियोजनाओं में यह एक सामान्य परंपरा है, लेकिन इसकी आवश्यकता नहीं है। बेझिझक अपने अवयवों को अपनी इच्छानुसार आयोजित करें!

src/content

src/content/ निर्देशिका सामग्री संग्रह (EN) और एक वैकल्पिक संग्रह कॉन्फ़िगरेशन फ़ाइल को संग्रहीत करने के लिए आरक्षित है। इस फ़ोल्डर के अंदर किसी अन्य फ़ाइल की अनुमति नहीं है।

src/layouts

लेआउट (EN) एक Astro अवयव हैं जो एक या अधिक पेजों द्वारा साझा की गई UI संरचना को परिभाषित करते हैं।

बिल्कुल src/components की तरह, यह निर्देशिका एक सामान्य परंपरा है लेकिन आवश्यक नहीं है।

src/pages

पेजों एक विशेष प्रकार का अवयव है जिसका उपयोग आपकी साइट पर नए पेज बनाने के लिए किया जाता है। एक पृष्ठ एक Astro अवयव या एक Markdown फ़ाइल हो सकता है जो आपकी साइट के लिए सामग्री के कुछ पृष्ठ का प्रतिनिधित्व करता है।

:::cautionsrc/pages आपके Astro परियोजना में एक आवश्यक उप-निर्देशिका है। इसके बिना, आपकी साइट पर कोई पेज या रूट नहीं होगा!:::

src/styles

अपनी CSS या Sass फ़ाइलों को src/styles निर्देशिका में संग्रहीत करना एक सामान्य परंपरा है, लेकिन इसकी आवश्यकता नहीं है। जब तक आपकी शैलियाँ src/ निर्देशिका में कहीं रहती हैं और सही ढंग से आयात की जाती हैं, Astro उन्हें संभालेगा और अनुकूलित करेगा।

public/

public/ निर्देशिका आपके परियोजना में उन फ़ाइलों और परिसंपत्तियों के लिए है जिन्हें Astro की निर्माण प्रक्रिया के दौरान संसाधित करने की आवश्यकता नहीं है। इस फ़ोल्डर की फ़ाइलें बिना छुए बिल्ड फ़ोल्डर में कॉपी कर दी जाएंगी, और फिर आपकी साइट बन जाएगी।

यह व्यवहार public/ को छवियों और फ़ॉन्ट जैसी सामान्य संपत्तियों, या robots.txt और manifest.webmanifest जैसी विशेष फ़ाइलों के लिए आदर्श बनाता है।

आप CSS और JavaScript को अपनी public/ निर्देशिका में रख सकते हैं, लेकिन ध्यान रखें कि उन फ़ाइलों को आपके अंतिम निर्माण में बंडल या अनुकूलित नहीं किया जाएगा।

:::tipएक सामान्य नियम के रूप में, कोई भी CSS या JavaScript जिसे आप स्वयं लिखते हैं, उसे आपकी src/ निर्देशिका में रहना चाहिए।:::

package.json

यह आपकी निर्भरताओं को प्रबंधित करने के लिए JavaScript पैकेज प्रबंधकों द्वारा उपयोग की जाने वाली फ़ाइल है। यह उन स्क्रिप्ट्स को भी परिभाषित करता है जो आमतौर पर Astro को चलाने के लिए उपयोग की जाती हैं (उदाहरण: npm start, npm run build)।

package.json में आप दो प्रकार की निर्भरताएँ निर्दिष्ट कर सकते हैं: dependencies और devDependencies। ज्यादातर मामलों में, ये समान रूप से काम करते हैं: Astro को निर्माण के समय सभी निर्भरताओं की आवश्यकता होती है, और आपका पैकेज प्रबंधक दोनों को स्थापित करेगा। हम अनुशंसा करते हैं कि शुरू करने के लिए अपनी सभी निर्भरताओं को dependencies में रखें, और यदि आपको ऐसा करने की कोई विशिष्ट आवश्यकता लगती है तो केवल devDependencies का उपयोग करें।

अपने परियोजना के लिए एक नई package.json फ़ाइल बनाने में सहायता के लिए, मैन्युअल सेटअप (EN) निर्देश देखें।

astro.config.mjs

यह फ़ाइल प्रत्येक स्टार्टर टेम्पलेट में जेनरेट होती है और इसमें आपके Astro परियोजना के लिए कॉन्फ़िगरेशन विकल्प शामिल होते हैं। यहां आप उपयोग के लिए एकीकरण, निर्माण विकल्प, सर्वर विकल्प और बहुत कुछ निर्दिष्ट कर सकते हैं।

Astro अपनी JavaScript कॉन्फ़िगरेशन फ़ाइल के लिए कई फ़ाइल स्वरूपों का समर्थन करता है: astro.config.js, astro.config.mjs और astro.config.ts। हम ज़्यादातर मामलों में .mjs या अगर आप अपनी कॉन्फ़िगरेशन फ़ाइल में TypeScript लिखना चाहते हैं तो .ts का उपयोग करने की सलाह देते हैं।

TypeScript कॉन्फ़िगरेशन फ़ाइल को tsm का उपयोग करके नियंत्रित किया जाता है और यह आपके परियोजना के tsconfig विकल्पों का सम्मान करेगा।

कॉन्फ़िगरेशन सेट करने के विवरण के लिए कॉन्फ़िगरिंग Astro मार्गदर्शिका (EN) देखें।

tsconfig.json

यह फ़ाइल प्रत्येक स्टार्टर टेम्पलेट में उत्पन्न होती है और इसमें आपके Astro परियोजना के लिए TypeScript कॉन्फ़िगरेशन विकल्प शामिल होते हैं। कुछ सुविधाएँ (जैसे npm पैकेज आयात) tsconfig.json फ़ाइल के बिना एडिटर में पूरी तरह से समर्थित नहीं हैं।

कॉन्फ़िगरेशन सेट करने के विवरण के लिए TypeScript मार्गदर्शिका (EN) देखें।