दस्तावेज़फ़ाइलों में पेज और लेआउट
फ्रंटेंड पेज
एक पेज नेक्सी एप्लिकेशन की मूल इकाई है। यह एक यूआरएल-एड्रेसेबल संसाधन है जिसे src/routes/ के अंतर्गत एक फ़ाइल द्वारा परिभाषित किया गया है।
उपयोग किए गए क्लाइंट ढांचे के बावजूद, प्रत्येक पृष्ठ समान सार्वभौमिक जीवनचक्र और वास्तुशिल्प बाधाओं का पालन करता है।
पेज जीवनचक्र
जब कोई उपयोगकर्ता किसी पृष्ठ पर नेविगेट करता है, तो Nexy निम्नलिखित चरण निष्पादित करता है:
- रूट मिलान: राउटर यूआरएल के अनुरूप फ़ाइल की पहचान करता है।
- डेटा फ़ेचिंग: सर्वर अपनी ज़रूरत का डेटा लाने के लिए पेज के Python फ्रंटमैटर को चलाता है।
- रचना: पृष्ठ अपने निकटतम
layout.nexy(या फ्रेमवर्क लेआउट) में लपेटा गया है। - रेंडरिंग: परिणाम HTML में रेंडर किया जाता है (Jinja2, Markdown, या फ्रेमवर्क एसएसआर के माध्यम से)।
- हाइड्रेशन: यदि पेज क्लाइंट फ्रेमवर्क का उपयोग करता है, तो ब्राउज़र स्थिर HTML में इंटरैक्टिव तर्क जोड़ता है।
एक सर्वर-मोड पेज में चरण 2 से 4: फ्रंटमैटर लाता है, टेम्पलेट प्रस्तुत करता है, और रूट लेआउट परिणाम को रैप करता है।
from src.users import all_users users = all_users()<h1>Users</h1><ul> {% for user in users %} <li>{{ user.name }}</li> {% endfor %}</ul>रूटिंग और यूआरएल
रूटिंग पूरी तरह से फ़ाइल-आधारित है। URL का निर्धारण src/routes/ के अंतर्गत फ़ाइल के पथ द्वारा किया जाता है, एक्सटेंशन को घटाकर।
गतिशील खंड
एक ऐसा मार्ग बनाने के लिए जो पैरामीटर के अनुसार भिन्न होता है (उदाहरण के लिए, एक उपयोगकर्ता प्रोफ़ाइल), वर्गाकार कोष्ठक का उपयोग करें:
src/routes/user/[id].tsx→/user/123
खंड का मान (123) @nexy/client से useParams() हुक के माध्यम से पृष्ठ पर उपलब्ध है।
import { useParams } from "@nexy/client"; export default function User() { const { id } = useParams<{ id: string }>(); return <h1>User {id}</h1>;}मार्ग समूह
कोष्ठकों में लिपटे फ़ोल्डरों को राउटर द्वारा अनदेखा कर दिया जाता है, लेकिन आपको संगठनात्मक उद्देश्यों या साझा लेआउट के लिए फ़ाइलों को समूहीकृत करने की अनुमति मिलती है:
src/routes/(auth)/login.tsx→/login
पेज मेटाडेटा
प्रत्येक पृष्ठ मेटाडेटा (शीर्षक, विवरण, ओपनग्राफ टैग) को परिभाषित कर सकता है जिसे नेक्सी दस्तावेज़ शेल में इंजेक्ट करता है। एक .nexy पेज इसे अपने फ्रंटमैटर में शाब्दिक रूप से या setMetadata के साथ सेट करता है:
metadata = {"title": "Blog", "description": "Posts about Nexy"}<h1>Blog</h1>setMetadata Python है: एक .tsx, .vue या .svelte पेज में कोई metadata निर्यात नहीं है, इसलिए क्लाइंट मोड में रूट लेआउट में शीर्षक और मेटा टैग लिखें। प्रत्येक फ़ील्ड के लिए पेज मेटाडेटा देखें।
रूपरेखा कार्यान्वयन
उपरोक्त अवधारणाएँ सार्वभौमिक हैं। यह देखने के लिए कि किसी पेज को अपने विशिष्ट ढांचे में कैसे लागू किया जाए, अंतर मार्गदर्शिका देखें: