import ReadMore from '/components/ReadMore.astro'; import Since from '/components/Since.astro'

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

समर्थित पेज फ़ाइलें

Astro src/pages/ निर्देशिका में निम्नलिखित फ़ाइल प्रकारों का समर्थन करता है:

फ़ाइल-आधारित रूटिंग

Astro एक रूटिंग रणनीति का लाभ उठाता है जिसे फ़ाइल-आधारित रूटिंग कहा जाता है। आपकी src/pages/ निर्देशिका की प्रत्येक फ़ाइल अपने फ़ाइल पथ के आधार पर आपकी साइट पर एक एंडपॉइंट बन जाती है।

गतिशील रूटिंग का उपयोग करके एक एकल फ़ाइल कई पेज भी उत्पन्न कर सकती है। यह आपको पेज बनाने की अनुमति देता है, भले ही आपकी सामग्री विशेष /pages/ निर्देशिका से बाहर हो, जैसे कि सामग्री संग्रह या CMS में।

Astro में रूटिंग के बारे में और पढ़ें।

पेजों के बीच लिंक

अपनी साइट के अन्य पेजों से लिंक करने के लिए अपने Astro पेजों में मानक HTML <a> तत्व लिखें। अपने लिंक के रूप में अपने रूट डोमेन से संबंधित URL पथ का उपयोग करें, संबंधित फ़ाइल पथ का नहीं।

उदाहरण के लिए, example.com पर किसी अन्य पेज से https://example.com/authors/sonali/ को लिंक करने के लिए:

astro
<a href="/authors/sonali/">सोनाली के बारे</a> में और पढ़ें।

Astro पेज

Astro पेज .astro फ़ाइल एक्सटेंशन का उपयोग करते हैं और Astro अवयवों के समान सुविधाओं का समर्थन करते हैं।

astro
------<html lang="en">  <head>    <title>मेरा आमुख पेज</title>  </head>  <body>    <h1>मेरी वेबसाइट पर स्वागत है!</h1>  </body></html>

एक पेज को एक पूर्ण HTML दस्तावेज़ तैयार करना होगा। यदि स्पष्ट रूप से शामिल नहीं किया गया है, तो Astro डिफ़ॉल्ट रूप से src/pages/ के भीतर स्थित किसी भी .astro अवयव में आवश्यक <!DOCTYPE html> घोषणा और <head> सामग्री जोड़ देगा। आप इसे पार्शियल पेज के रूप में चिह्नित करके प्रति-अवयव के आधार पर इस व्यवहार से ऑप्ट-आउट कर सकते हैं।

प्रत्येक पेज पर समान HTML तत्वों को दोहराने से बचने के लिए, आप सामान्य <head> और <body> तत्वों को अपने स्वयं के लेआउट अवयवों में स्थानांतरित कर सकते हैं। आप जितने चाहें उतने या कम लेआउट अवयवों का उपयोग कर सकते हैं।

astro
---// src/pages/index.astroimport MySiteLayout from '../layouts/MySiteLayout.astro';---<MySiteLayout>  <p>मेरे पेज की सामग्री, एक लेआउट में लिपटी हुई!</p></MySiteLayout>

Astro में लेआउट अवयवों के बारे में और पढ़ें।

Markdown/MDX पेज

Astro आपकी अंतिम वेबसाइट में src/pages/ के अंदर किसी भी Markdown (.md) फ़ाइल को पेज के रूप में भी मानता है। यदि आपके पास MDX एकीकरण इंस्टॉल है, तो यह MDX (.mdx) फ़ाइलों के साथ भी उसी तरह व्यवहार करता है।

:::tip संबंधित Markdown फ़ाइलों की निर्देशिकाओं के लिए पृष्ठों के बजाय सामग्री संग्रह बनाने पर विचार करें जो समान संरचना साझा करते हैं, जैसे ब्लॉग पोस्ट या उत्पाद सामान। :::

Markdown फ़ाइलें एक लेआउट अवयव को निर्दिष्ट करने के लिए विशेष लेआउट फ्रंटमैटर प्रॉपर्टी का उपयोग कर सकती हैं जो उनकी Markdown सामग्री को पूर्ण <html>...</html> पेज दस्तावेज़ में लपेट देगा।

md
---# Example: src/pages/page.mdlayout: '../layouts/MySiteLayout.astro'title: 'मेरा Markdown पेज'---# शीर्षकयह मेरा पेज है, जो **Markdown** में लिखा गया है।

Astro में Markdown के बारे में और पढ़ें।

HTML पेज

.html फ़ाइल एक्सटेंशन वाली फ़ाइलेंsrc/pages/ निर्देशिका में रखी जा सकती हैं और सीधे आपकी साइट पर पेजों के रूप में उपयोग की जा सकती हैं। ध्यान दें कि कुछ प्रमुख Astro सुविधाएँ HTML अवयवों में समर्थित नहीं हैं।

कस्टम 404 त्रुटि पेज

कस्टम 404 त्रुटि पेज के लिए, आप src/pages में 404.astro या 404.md फ़ाइल बना सकते हैं।

यह एक 404.html पेज का निर्माण करेगा। अधिकांश परिनियोजन सेवाएँ इसे ढूँढेंगी और इसका उपयोग करेंगी।

कस्टम 500 त्रुटि पेज

मांग पर रेंडर किए गए पेजों के लिए कस्टम 500 त्रुटि पृष्ठ दिखाने के लिए, src/pages/500.astro फ़ाइल बनाएँ। यह कस्टम पृष्ठ प्रीरेंडर किए गए पेजों के लिए उपलब्ध नहीं है और इसे प्रीरेंडर नहीं किया जा सकता है।

यदि इस पेज को प्रस्तुत करते समय कोई त्रुटि होती है, तो आपके होस्ट का डिफ़ॉल्ट 500 त्रुटि पेज आपके विज़िटर को दिखाया जाएगा।

विकास के दौरान, यदि आपके पास 500.astro है, तो रनटाइम पर आई त्रुटि आपके टर्मिनल में लॉग हो जाती है, न कि त्रुटि ओवरले में दिखाई देती है।

error

src/pages/500.astro एक विशेष पेज है जिसे रेंडरिंग के दौरान किसी भी त्रुटि के लिए स्वचालित रूप से error प्रॉप पास किया जाता है। यह आपको अपने विज़िटर को जानकारी दिखाने के लिए किसी त्रुटि (जैसे किसी पेज से, मध्यस्थ से, आदि) के विवरण का उपयोग करने की अनुमति देता है।

त्रुटि प्रॉप का डेटा प्रकार कुछ भी हो सकता है, जो आपके कोड में मान टाइप करने या उपयोग करने के तरीके को प्रभावित कर सकता है:

astro
---interface Props {    error: unknown}const { error } = Astro.props---<div>{error instanceof Error ? error.message : 'अज्ञात त्रुटि'}</div>

error प्रॉप से ​​सामग्री प्रदर्शित करते समय संवेदनशील जानकारी लीक होने से बचने के लिए, पहले त्रुटि का मूल्यांकन करने और फेंकी गई त्रुटि के आधार पर उचित सामग्री वापस करने पर विचार करें। उदाहरण के लिए, आपको त्रुटि के स्टैक को प्रदर्शित करने से बचना चाहिए क्योंकि इसमें सर्वर पर आपके कोड की संरचना के बारे में जानकारी होती है।

पेज पार्शियल

:::caution पेज पार्शियल का उपयोग htmx या Unpoly जैसी फ्रंट-एंड लाइब्रेरी के संयोजन में किया जाना है। यदि आप निम्न-स्तरीय फ्रंट-एंड JavaScript लिखने में सहज हैं तो आप उनका उपयोग भी कर सकते हैं। इस कारण से वे एक उन्नत सुविधा हैं.

इसके अतिरिक्त, यदि अवयव में स्कोप्ड शैलियाँ या स्क्रिप्ट हैं, तो पार्शियल का उपयोग नहीं किया जाना चाहिए, क्योंकि इन तत्वों को HTML आउटपुट से हटा दिया जाएगा। यदि आपको स्कोप्ड शैलियों की आवश्यकता है, तो फ्रंटएंड लाइब्रेरी के साथ नियमित, गैर-पार्शियल पेजों का उपयोग करना बेहतर है जो सामग्री को हेड में मर्ज करना जानता है। :::

पार्शियल भाग src/pages/ के भीतर स्थित पेज अवयव हैं जिनका उद्देश्य पूर्ण पेजों के रूप में प्रस्तुत करना नहीं है।

इस फ़ोल्डर के बाहर स्थित अवयवों की तरह, इन फ़ाइलों में स्वचालित रूप से <!DOCTYPE html> घोषणा शामिल नहीं होती है, न ही कोई <head> सामग्री जैसे स्कोप्ड शैलियाँ और स्क्रिप्ट शामिल होती हैं।

हालाँकि, क्योंकि वे विशेष src/pages/ निर्देशिका में स्थित हैं, उत्पादित किया गया HTML इसके फ़ाइल पथ के अनुरूप URL पर उपलब्ध है। यह एक रेंडरिंग लाइब्रेरी (उदाहरण के लिए htmx, Stimulus, jQuery) को क्लाइंट पर इसे एक्सेस करने और ब्राउज़र रिफ्रेश या पेज मार्ग-निर्देशन के बिना किसी पेज पर HTML के अनुभागों को गतिशील रूप से लोड करने की अनुमति देता है।

पार्शियल, जब एक रेंडरिंग लाइब्रेरी के साथ जोड़ा जाता है, तो Astro में गतिशील सामग्री के निर्माण के लिए Astro द्वीप और <script> टैग का एक विकल्प प्रदान करता है।

पेज फ़ाइलें जो partial के लिए मान निर्यात कर सकती हैं (उदाहरण के लिए .astro और .mdx, परंतु .md नहीं) को पार्शियल के रूप में चिह्नित किया जा सकता है।

astro
---export const partial = true;---<li>मैं पार्शियल हूँ!</li>

लाइब्रेरी के साथ प्रयोग करना

पार्शियल का उपयोग पेज के एक अनुभाग को गतिशील रूप से अद्यतन करने के लिए किया जाता है htmx जैसी लाइब्रेरी का उपयोग करके।

निम्नलिखित उदाहरण एक hx-post विशेषता को पार्शियल URL पर सेट दिखाता है। पार्शियल पेज की सामग्री का उपयोग इस पेज पर लक्षित HTML तत्व को अद्यतन करने के लिए किया जाएगा।

astro
<html>  <head>    <title>मेरा पेज</title>    <script src="https://unpkg.com/htmx.org@1.9.6"      integrity="sha384-FhXw7b6AlE/jyjlZH5iHa/tTe9EpJ1Y55RjcgPbjeWMskSxZt1v9qkxLJWNJaGni"      crossorigin="anonymous"></script>  </head></html><section>  <div id="parent-div">यहां लक्ष्य करें</div>  <button hx-post="/partials/clicked/"    hx-trigger="click"    hx-target="#parent-div"    hx-swap="innerHTML"  >      मुझे क्लिक करें!  </button></section>

.Astro पार्शियल संबंधित फ़ाइल पथ पर मौजूद होना चाहिए, और पेज को पार्शियल के रूप में परिभाषित करने वाला एक निर्यात शामिल होना चाहिए:

astro
---export const partial = true;---<div>मुझे क्लिक किया गया!</div>

htmx का उपयोग करने के बारे में अधिक जानकारी के लिए htmx दस्तावेज़ देखें।

Astro घटक
परियोजना संरचना