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

पेज

पेज वे फ़ाइलें हैं जो आपके 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 पेज का निर्माण करेगा। अधिकांश परिनियोजन सेवाएँ इसे ढूँढेंगी और इसका उपयोग करेंगी।

पेज पार्शियल

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

जोड़ा गया: 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 दस्तावेज़ देखें।