पेज
पेज वे फ़ाइलें हैं जो आपके Astro परियोजना की src/pages/
उपनिर्देशिका में रहती हैं। वे आपकी वेबसाइट के प्रत्येक पेज के लिए रूटिंग, डेटा लोडिंग और समग्र पेज लेआउट को संभालने के लिए जिम्मेदार हैं।
समर्थित पेज फ़ाइलें
शीर्षक समर्थित पेज फ़ाइलेंAstro src/pages/
निर्देशिका में निम्नलिखित फ़ाइल प्रकारों का समर्थन करता है:
.astro
.md
.mdx
(MDX एकीकरण इंस्टॉल होने के साथ).html
.js
/.ts
(endpoints की तरह)
फ़ाइल-आधारित रूटिंग
शीर्षक फ़ाइल-आधारित रूटिंगAstro एक रूटिंग रणनीति का लाभ उठाता है जिसे फ़ाइल-आधारित रूटिंग कहा जाता है। आपकी src/pages/
निर्देशिका की प्रत्येक फ़ाइल अपने फ़ाइल पथ के आधार पर आपकी साइट पर एक एंडपॉइंट बन जाती है।
गतिशील रूटिंग का उपयोग करके एक एकल फ़ाइल कई पेज भी उत्पन्न कर सकती है। यह आपको पेज बनाने की अनुमति देता है, भले ही आपकी सामग्री विशेष /pages/
निर्देशिका से बाहर हो, जैसे कि सामग्री संग्रह या CMS में।
पेजों के बीच लिंक
शीर्षक पेजों के बीच लिंकअपनी साइट के अन्य पेजों से लिंक करने के लिए अपने Astro पेजों में मानक HTML <a>
तत्व लिखें। अपने लिंक के रूप में अपने रूट डोमेन से संबंधित URL पथ का उपयोग करें, संबंधित फ़ाइल पथ का नहीं।
उदाहरण के लिए, example.com
पर किसी अन्य पेज से https://example.com/authors/sonali/
को लिंक करने के लिए:
Astro पेज
शीर्षक Astro पेजAstro पेज .astro फ़ाइल एक्सटेंशन का उपयोग करते हैं और Astro अवयवों के समान सुविधाओं का समर्थन करते हैं।
एक पेज को एक पूर्ण HTML दस्तावेज़ तैयार करना होगा। यदि स्पष्ट रूप से शामिल नहीं किया गया है, तो Astro डिफ़ॉल्ट रूप से src/pages/ के भीतर स्थित किसी भी .astro अवयव में आवश्यक <!DOCTYPE html>
घोषणा और <head>
सामग्री जोड़ देगा। आप इसे पार्शियल पेज के रूप में चिह्नित करके प्रति-अवयव के आधार पर इस व्यवहार से ऑप्ट-आउट कर सकते हैं।
प्रत्येक पेज पर समान HTML तत्वों को दोहराने से बचने के लिए, आप सामान्य <head>
और <body>
तत्वों को अपने स्वयं के लेआउट अवयवों में स्थानांतरित कर सकते हैं। आप जितने चाहें उतने या कम लेआउट अवयवों का उपयोग कर सकते हैं।
Markdown/MDX पेज
शीर्षक Markdown/MDX पेजAstro आपकी अंतिम वेबसाइट में src/pages/
के अंदर किसी भी Markdown (.md
) फ़ाइल को पेज के रूप में भी मानता है। यदि आपके पास MDX एकीकरण इंस्टॉल है, तो यह MDX (.mdx
) फ़ाइलों के साथ भी उसी तरह व्यवहार करता है। इनका उपयोग आमतौर पर ब्लॉग पोस्ट और दस्तावेज़ीकरण जैसे टेक्स्ट-भारी पेजों के लिए किया जाता है।
src/content/
में Markdown और MDX पेज सामग्री के संग्रह का उपयोग गतिशील रूप से पेज बनाने के लिए किया जा सकता है।
पेज लेआउट Markdown फ़ाइलों के लिए विशेष रूप से उपयोगी हैं। Markdown फ़ाइलें एक लेआउट अवयव को निर्दिष्ट करने के लिए विशेष लेआउट फ्रंटमैटर प्रॉपर्टी का उपयोग कर सकती हैं जो उनकी Markdown सामग्री को पूर्ण <html>...</html>
पेज दस्तावेज़ में लपेट देगा।
HTML पेज
शीर्षक HTML पेज.html
फ़ाइल एक्सटेंशन वाली फ़ाइलेंsrc/pages/
निर्देशिका में रखी जा सकती हैं और सीधे आपकी साइट पर पेजों के रूप में उपयोग की जा सकती हैं। ध्यान दें कि कुछ प्रमुख Astro सुविधाएँ HTML अवयवों में समर्थित नहीं हैं।
कस्टम 404 त्रुटि पेज
शीर्षक कस्टम 404 त्रुटि पेजकस्टम 404 त्रुटि पेज के लिए, आप /src/pages
में 404.astro
या 404.md
फ़ाइल बना सकते हैं।
यह एक 404.html
पेज का निर्माण करेगा। अधिकांश परिनियोजन सेवाएँ इसे ढूँढेंगी और इसका उपयोग करेंगी।
पेज पार्शियल
शीर्षक पेज पार्शियल
जोड़ा गया:
astro@3.4.0
पेज पार्शियल का उपयोग htmx या Unpoly जैसी फ्रंट-एंड लाइब्रेरी के संयोजन में किया जाना है। यदि आप निम्न-स्तरीय फ्रंट-एंड JavaScript लिखने में सहज हैं तो आप उनका उपयोग भी कर सकते हैं। इस कारण से वे एक उन्नत सुविधा हैं.
इसके अतिरिक्त, यदि अवयव में स्कोप्ड शैलियाँ या स्क्रिप्ट हैं, तो पार्शियल का उपयोग नहीं किया जाना चाहिए, क्योंकि इन तत्वों को HTML आउटपुट से हटा दिया जाएगा। यदि आपको स्कोप्ड शैलियों की आवश्यकता है, तो फ्रंटएंड लाइब्रेरी के साथ नियमित, गैर-पार्शियल पेजों का उपयोग करना बेहतर है जो सामग्री को हेड में मर्ज करना जानता है।
पार्शियल भाग src/pages/
के भीतर स्थित पेज अवयव हैं जिनका उद्देश्य पूर्ण पेजों के रूप में प्रस्तुत करना नहीं है।
इस फ़ोल्डर के बाहर स्थित अवयवों की तरह, इन फ़ाइलों में स्वचालित रूप से <!DOCTYPE html>
घोषणा शामिल नहीं होती है, न ही कोई <head>
सामग्री जैसे स्कोप्ड शैलियाँ और स्क्रिप्ट शामिल होती हैं।
हालाँकि, क्योंकि वे विशेष src/pages/
निर्देशिका में स्थित हैं, उत्पादित किया गया HTML इसके फ़ाइल पथ के अनुरूप URL पर उपलब्ध है। यह एक रेंडरिंग लाइब्रेरी (उदाहरण के लिए htmx, Stimulus, jQuery) को क्लाइंट पर इसे एक्सेस करने और ब्राउज़र रिफ्रेश या पेज मार्ग-निर्देशन के बिना किसी पेज पर HTML के अनुभागों को गतिशील रूप से लोड करने की अनुमति देता है।
पार्शियल, जब एक रेंडरिंग लाइब्रेरी के साथ जोड़ा जाता है, तो Astro में गतिशील सामग्री के निर्माण के लिए Astro द्वीप और <script>
टैग का एक विकल्प प्रदान करता है।
पेज फ़ाइलें जो एक मान निर्यात कर सकती हैं (उदाहरण के लिए .astro
, .mdx
) को पार्शियल के रूप में चिह्नित किया जा सकता है।
निम्नलिखित निर्यात जोड़कर src/pages/
निर्देशिका के भीतर एक फ़ाइल को पार्शियल रूप से कॉन्फ़िगर करें:
export const partial
को सांख्यिकीय रूप से पहचाना जाना चाहिए। इसका मूल्य हो सकता है:
- boolean
true
. - import.meta.env जैसे
import.meta.env.USE_PARTIALS
का उपयोग करने वाला एक एनवायरनमेंट चर।
लाइब्रेरी के साथ प्रयोग करना
शीर्षक लाइब्रेरी के साथ प्रयोग करनापार्शियल का उपयोग पेज के एक अनुभाग को गतिशील रूप से अद्यतन करने के लिए किया जाता है htmx जैसी लाइब्रेरी का उपयोग करके।
निम्नलिखित उदाहरण एक hx-post
विशेषता को पार्शियल URL पर सेट दिखाता है। पार्शियल पेज की सामग्री का उपयोग इस पेज पर लक्षित HTML तत्व को अद्यतन करने के लिए किया जाएगा।
.Astro
पार्शियल संबंधित फ़ाइल पथ पर मौजूद होना चाहिए, और पेज को पार्शियल के रूप में परिभाषित करने वाला एक निर्यात शामिल होना चाहिए:
htmx का उपयोग करने के बारे में अधिक जानकारी के लिए htmx दस्तावेज़ देखें।
Learn