परियोजना संरचना
create astro
CLI विज़ार्ड से उत्पन्न आपके नए Astro परियोजना में पहले से ही कुछ फ़ाइलें और फ़ोल्डर्स शामिल होते हैं। अन्य, आप स्वयं बनाएंगे और Astro की मौजूदा फ़ाइल संरचना में जोड़ें।
यहां बताया गया है कि Astro परियोजना कैसे आयोजित किया जाता है, और कुछ फ़ाइलें जो आपको अपने नए परियोजना में मिलेंगी।
निर्देशिकाएँ और फ़ाइलें
Section titled “निर्देशिकाएँ और फ़ाइलें”Astro आपके परियोजना के लिए एक सुविचारित फ़ोल्डर लेआउट का लाभ उठाता है। प्रत्येक Astro परियोजना रूट में निम्नलिखित निर्देशिकाएँ और फ़ाइलें शामिल होनी चाहिए:
src/*
- आपका परियोजना स्रोत कोड (अवयव, पृष्ठ, शैलियाँ, आदि।)public/*
- आपका गैर-कोड, असंसाधित संपत्ति (फ़ॉन्ट, आइकॉन, आदि)package.json
- एक परियोजना घोषणापत्र।astro.config.mjs
- एक Astro कॉन्फ़िगरेशन फ़ाइल। (अनुशंसित)tsconfig.json
- एक TypeScript कॉन्फ़िगरेशन फ़ाइल। (अनुशंसित)
उदाहरण परियोजना वृक्ष
Section titled “उदाहरण परियोजना वृक्ष”एक सामान्य 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/
फ़ोल्डर वह जगह है जहां आपका अधिकांश परियोजना स्रोत कोड रहता है। इसमें शामिल:
- पृष्ठ
- नक़्शे (EN)
- Astro अवयव
- UI फ्रेमवर्क अवयव (React, etc.) (EN)
- शैलियां (CSS, Sass) (EN)
- Markdown (EN)
ब्राउज़र पर भेजी जाने वाली अंतिम वेबसाइट बनाने के लिए Astro आपकी src/
फ़ाइलों को संसाधित, अनुकूलित और बंडल करता है। स्थिर public/
निर्देशिका के विपरीत, आपकी src/
फ़ाइलें Astro द्वारा आपके लिए बनाई और प्रबंधित की जाती हैं।
कुछ फ़ाइलें (जैसे Astro अवयव) लिखित रूप में ब्राउज़र पर भी नहीं भेजी जाती हैं, बल्कि उन्हें स्थिर HTML में प्रस्तुत किया जाता है। अन्य फ़ाइलें (जैसे CSS) ब्राउज़र पर भेजी जाती हैं लेकिन प्रदर्शन के लिए उन्हें अन्य CSS फ़ाइलों के साथ अनुकूलित या बंडल किया जा सकता है।
हालाँकि यह मार्गदर्शिका Astro समुदाय में उपयोग की जाने वाली कुछ लोकप्रिय परंपराओं का वर्णन करती है, Astro द्वारा आरक्षित एकमात्र निर्देशिकाएँ src/pages/
और src/content/
हैं। आप किसी भी अन्य निर्देशिका का नाम बदलने और उसे इस तरह से पुनर्व्यवस्थित करने के लिए स्वतंत्र हैं जो आपके लिए सर्वोत्तम हो।
src/components
Section titled “src/components”अवयव आपके HTML पेजों के लिए कोड की पुन: प्रयोज्य इकाइयाँ हैं। ये Astro अवयव, या UI फ्रेमवर्क अवयव (EN) जैसे React या Vue हो सकते हैं। इस फ़ोल्डर में अपने सभी परियोजना अवयवों को एक साथ समूहित और आयोजित करना आम बात है।
Astro परियोजनाओं में यह एक सामान्य परंपरा है, लेकिन इसकी आवश्यकता नहीं है। बेझिझक अपने अवयवों को अपनी इच्छानुसार आयोजित करें!
src/content
Section titled “src/content”src/content/
निर्देशिका सामग्री संग्रह (EN) और एक वैकल्पिक संग्रह कॉन्फ़िगरेशन फ़ाइल को संग्रहीत करने के लिए आरक्षित है। इस फ़ोल्डर के अंदर किसी अन्य फ़ाइल की अनुमति नहीं है।
src/layouts
Section titled “src/layouts”लेआउट (EN) एक Astro अवयव हैं जो एक या अधिक पेजों द्वारा साझा की गई UI संरचना को परिभाषित करते हैं।
बिल्कुल src/components
की तरह, यह निर्देशिका एक सामान्य परंपरा है लेकिन आवश्यक नहीं है।
src/pages
Section titled “src/pages”पेजों एक विशेष प्रकार का अवयव है जिसका उपयोग आपकी साइट पर नए पेज बनाने के लिए किया जाता है। एक पृष्ठ एक Astro अवयव या एक Markdown फ़ाइल हो सकता है जो आपकी साइट के लिए सामग्री के कुछ पृष्ठ का प्रतिनिधित्व करता है।
src/pages
आपके Astro परियोजना में एक आवश्यक उप-निर्देशिका है। इसके बिना, आपकी साइट पर कोई पेज या रूट नहीं होगा!
src/styles
Section titled “src/styles”अपनी CSS या Sass फ़ाइलों को src/styles
निर्देशिका में संग्रहीत करना एक सामान्य परंपरा है, लेकिन इसकी आवश्यकता नहीं है। जब तक आपकी शैलियाँ src/
निर्देशिका में कहीं रहती हैं और सही ढंग से आयात की जाती हैं, Astro उन्हें संभालेगा और अनुकूलित करेगा।
public/
Section titled “public/”public/
निर्देशिका आपके परियोजना में उन फ़ाइलों और परिसंपत्तियों के लिए है जिन्हें Astro की निर्माण प्रक्रिया के दौरान संसाधित करने की आवश्यकता नहीं है। इस फ़ोल्डर की फ़ाइलें बिना छुए बिल्ड फ़ोल्डर में कॉपी कर दी जाएंगी, और फिर आपकी साइट बन जाएगी।
यह व्यवहार public/
को छवियों और फ़ॉन्ट जैसी सामान्य संपत्तियों, या robots.txt
और manifest.webmanifest
जैसी विशेष फ़ाइलों के लिए आदर्श बनाता है।
आप CSS और JavaScript को अपनी public/
निर्देशिका में रख सकते हैं, लेकिन ध्यान रखें कि उन फ़ाइलों को आपके अंतिम निर्माण में बंडल या अनुकूलित नहीं किया जाएगा।
एक सामान्य नियम के रूप में, कोई भी CSS या JavaScript जिसे आप स्वयं लिखते हैं, उसे आपकी src/
निर्देशिका में रहना चाहिए।
package.json
Section titled “package.json”यह आपकी निर्भरताओं को प्रबंधित करने के लिए JavaScript पैकेज प्रबंधकों द्वारा उपयोग की जाने वाली फ़ाइल है। यह उन स्क्रिप्ट्स को भी परिभाषित करता है जो आमतौर पर Astro को चलाने के लिए उपयोग की जाती हैं (उदाहरण: npm start
, npm run build
)।
package.json
में आप दो प्रकार की निर्भरताएँ निर्दिष्ट कर सकते हैं: dependencies
और devDependencies
। ज्यादातर मामलों में, ये समान रूप से काम करते हैं: Astro को निर्माण के समय सभी निर्भरताओं की आवश्यकता होती है, और आपका पैकेज प्रबंधक दोनों को स्थापित करेगा। हम अनुशंसा करते हैं कि शुरू करने के लिए अपनी सभी निर्भरताओं को dependencies
में रखें, और यदि आपको ऐसा करने की कोई विशिष्ट आवश्यकता लगती है तो केवल devDependencies
का उपयोग करें।
अपने परियोजना के लिए एक नई package.json
फ़ाइल बनाने में सहायता के लिए, मैन्युअल सेटअप (EN) निर्देश देखें।
astro.config.mjs
Section titled “astro.config.mjs”यह फ़ाइल प्रत्येक स्टार्टर टेम्पलेट में जेनरेट होती है और इसमें आपके Astro परियोजना के लिए कॉन्फ़िगरेशन विकल्प शामिल होते हैं। यहां आप उपयोग के लिए एकीकरण, निर्माण विकल्प, सर्वर विकल्प और बहुत कुछ निर्दिष्ट कर सकते हैं।
Astro अपनी JavaScript कॉन्फ़िगरेशन फ़ाइल के लिए कई फ़ाइल स्वरूपों का समर्थन करता है: astro.config.js
, astro.config.mjs
, astro.config.cjs
और astro.config.ts
। हम ज़्यादातर मामलों में .mjs
या अगर आप अपनी कॉन्फ़िगरेशन फ़ाइल में TypeScript लिखना चाहते हैं तो .ts
का उपयोग करने की सलाह देते हैं।
TypeScript कॉन्फ़िगरेशन फ़ाइल को tsm
का उपयोग करके नियंत्रित किया जाता है और यह आपके परियोजना के tsconfig
विकल्पों का सम्मान करेगा।
कॉन्फ़िगरेशन सेट करने के विवरण के लिए कॉन्फ़िगरिंग Astro मार्गदर्शिका (EN) देखें।
tsconfig.json
Section titled “tsconfig.json”यह फ़ाइल प्रत्येक स्टार्टर टेम्पलेट में उत्पन्न होती है और इसमें आपके Astro परियोजना के लिए TypeScript कॉन्फ़िगरेशन विकल्प शामिल होते हैं। कुछ सुविधाएँ (जैसे npm पैकेज आयात) tsconfig.json
फ़ाइल के बिना एडिटर में पूरी तरह से समर्थित नहीं हैं।
कॉन्फ़िगरेशन सेट करने के विवरण के लिए TypeScript मार्गदर्शिका (EN) देखें।
Learn