प्रारंभिक थीम सेटअप

1. शुरू करने के लिए, सबसे पहले npm install या pnpm install से सभी ज़रूरी पैकेज इंस्टॉल करें, फिर npm run build या pnpm build से एक प्रारंभिक बिल्ड चलाकर पक्का करें कि सेटअप काम कर रहा है.
2. Pagefind बिल्ड (साइट सर्च के लिए) को कॉपी करें ताकि वह dev एनवायरनमेंट में उपलब्ध रहे. यह आपके OS के अनुसार अलग-अलग होता है. मैंने मदद के लिए कुछ कमांड बनाए हैं.
   • Windows के लिए, npm run winsearch चलाएं
   • OSX या Linux के लिए, npm run osxsearch चलाएं
3. इसके बाद, आप अपनी साइट का i18n सेटअप कॉन्फ़िगर करना चाहेंगे (एक भाषा, या कई). बस npm run docs:config-i18n कमांड चलाएं और सेटअप पूरा करने के लिए स्क्रिप्ट के निर्देशों का पालन करें!
4. अब आप साइट को अपनी पसंद के अनुसार सेट अप कर सकते हैं!

कोड परिचय

मैंने आपको कोडबेस से परिचित कराने के लिए कुछ कोड टूर बनाए हैं. इन्हें VSCode या किसी अन्य IDE में देखने के लिए आपको Code Tour एक्सटेंशन की ज़रूरत होगी.

कोड संरचना

कोड इस तरह संरचित है कि ज़्यादातर आइटम src/docs डायरेक्टरी के अंदर हैं. इससे उस पूरे फ़ोल्डर को किसी मौजूदा प्रोजेक्ट में डालना और कुछ ही मिनटों में डॉक्यूमेंटेशन की सुविधा जोड़ना आसान हो जाता है.

कॉन्फ़िगरेशन विकल्प

पूरी साइट का कॉन्फ़िगरेशन src/docs/config/ फ़ोल्डर में किया जाता है. ज़्यादातर सेटिंग्स अलग-अलग भाषा फ़ोल्डरों के अंदर होती हैं, ताकि अनुवाद संभालना आसान रहे.

साइट सेटिंग्स

src/docs/config/siteSettings.json.ts फ़ाइल का उपयोग साइट सेटिंग्स कॉन्फ़िगर करने के लिए होता है. इनमें ऐसी चीज़ें शामिल हैं जैसे view transitions चालू करनी हैं या नहीं, एनिमेशन चालू करने हैं या नहीं, और डॉक्यूमेंटेशन हेडिंग के लिए कॉपी लिंक बटन दिखाने हैं या नहीं.

साइट डेटा

src/docs/config/[language]/siteData.json.ts फ़ाइल का उपयोग साइट डेटा कॉन्फ़िगर करने के लिए होता है. इसमें साइट का शीर्षक, विवरण, सोशल लिंक और डिफ़ॉल्ट इमेज जैसी चीज़ें शामिल हैं.

नेविगेशन डेटा

ऊपरी नेवबार के लिए अपना नेविगेशन डेटा src/docs/config/[language]/navData.json.ts फ़ाइल में कॉन्फ़िगर करें.

साइडबार लेआउट

अपने डॉक्यूमेंटेशन सेक्शन का क्रम src/docs/config/[language]/sidebarNavData.json.ts फ़ाइल में कॉन्फ़िगर करें.

Robots

Google जैसे रोबोट सही साइटमैप देख सकें, इसके लिए आप public/robots.txt फ़ाइल को अपने वेबसाइट डोमेन के साथ एडिट करना चाहेंगे.

और संसाधन

सामान्य Astro जानकारी

Astro src/pages/ डायरेक्टरी में .astro या .md फ़ाइलें खोजता है. हर पेज अपने फ़ाइल नाम के आधार पर एक रूट के रूप में उपलब्ध होता है.

src/components/ में कुछ खास नहीं है, लेकिन हम Astro/React/Vue/Svelte/Preact कंपोनेंट वहीं रखना पसंद करते हैं.

कोई भी स्टैटिक एसेट, जैसे इमेज, public/ डायरेक्टरी में रखी जा सकती है. इमेज ऑप्टिमाइज़ेशन के लिए Astro assets का उपयोग करते समय मैं अक्सर इमेज के लिए src/assets भी इस्तेमाल करता हूं.

कमांड

सभी कमांड प्रोजेक्ट की रूट डायरेक्टरी से, टर्मिनल में चलाए जाते हैं:

कमांड	क्रिया
npm install	डिपेंडेंसी इंस्टॉल करता है
npm run dev	localhost:4321 पर लोकल dev सर्वर शुरू करता है
npm run build	आपकी प्रोडक्शन साइट ./dist/ में बिल्ड करता है
npm run preview	डिप्लॉय करने से पहले बिल्ड का लोकल प्रीव्यू
npm run astro ...	astro add, astro check जैसे CLI कमांड चलाएं
npm run astro -- --help	Astro CLI के उपयोग में मदद पाएं

और जानना चाहते हैं?

डॉक्यूमेंटेशन देखें या Discord सर्वर से जुड़ें.