इसे छोड़कर कंटेंट पर जाएं

पेज

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

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

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

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

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

शीर्षक फ़ाइल-आधारित रूटिंग

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

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

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

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

शीर्षक पेजों के बीच लिंक

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

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

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

Astro पेज

शीर्षक Astro पेज

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

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

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

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

src/pages/index.astro
---
import MySiteLayout from '../layouts/MySiteLayout.astro';
---
<MySiteLayout>
  <p>मेरे पेज की सामग्री, एक लेआउट में लिपटी हुई!</p>
</MySiteLayout>
Astro में लेआउट अवयवों के बारे में और पढ़ें।

Markdown/MDX पेज

शीर्षक Markdown/MDX पेज

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

src/content/ में Markdown और MDX पेज सामग्री के संग्रह का उपयोग गतिशील रूप से पेज बनाने के लिए किया जा सकता है।

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

src/pages/page.md
---
layout: '../layouts/MySiteLayout.astro'
title: 'मेरा Markdown पेज'
---
# शीर्षक


यह मेरा पेज है, जो **Markdown** में लिखा गया है।
Astro में Markdown के बारे में और पढ़ें।

HTML पेज

शीर्षक HTML पेज

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

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

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

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

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

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

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

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

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

जोड़ा गया: astro@4.10.3

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

error

शीर्षक error

जोड़ा गया: astro@4.11.0

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

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

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

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

पेज पार्शियल

शीर्षक पेज पार्शियल

जोड़ा गया: astro@3.4.0

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

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

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

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

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

निम्नलिखित निर्यात जोड़कर src/pages/ निर्देशिका के भीतर एक फ़ाइल को पार्शियल रूप से कॉन्फ़िगर करें:

src/pages/partial.astro
---
export const partial = true;
---


<li>मैं पार्शियल हूँ!</li>

export const partial को सांख्यिकीय रूप से पहचाना जाना चाहिए। इसका मूल्य हो सकता है:

  • boolean true.
  • import.meta.env जैसे import.meta.env.USE_PARTIALS का उपयोग करने वाला एक एनवायरनमेंट चर।

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

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

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

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

src/pages/index.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 पार्शियल संबंधित फ़ाइल पथ पर मौजूद होना चाहिए, और पेज को पार्शियल के रूप में परिभाषित करने वाला एक निर्यात शामिल होना चाहिए:

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

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

योगदान करें

आपके दिमाग में क्या है?

GitHub मुद्दा बनाएं

किसी समस्या के बारे में हमारी टीम को सचेत करने का सबसे तेज़ तरीका।

समुदाय