--- title: कस्टम पेज description: >- पूरी तरह कस्टम .astro रूट्स को अपने डॉक्स के साथ माउंट करें और अपनी साइट का कॉन्फ़िग, नेविगेशन तथा कंटेंट blume:data मॉड्यूल से पढ़ें। --- एक Blume साइट का अधिकांश भाग Markdown होता है, लेकिन कभी-कभी आपको ऐसा रूट चाहिए होता है जो डॉक _न_ हो — एक लैंडिंग पेज, एक प्राइसिंग पेज, हाथ से बनाया गया ब्लॉग या चेंजलॉग इंडेक्स, या एक इंटरैक्टिव डैशबोर्ड। अपने **pages** फ़ोल्डर में एक `.astro` फ़ाइल रखें और Blume उसे आपके कंटेंट के साथ-साथ एक वास्तविक रूट के रूप में माउंट कर देता है। ## पेज जोड़ें [#add-a-page] अपने प्रोजेक्ट रूट पर एक `pages/` फ़ोल्डर बनाएँ और उसमें एक `.astro` फ़ाइल जोड़ें: ```astro pages/pricing.astro lineNumbers --- import data from "blume:data"; ---

Pricing for {data.config.title}

``` `blume dev` इसे तुरंत उठा लेता है और `blume build` इसे स्टैटिक HTML में प्रीरेंडर कर देता है। फ़ोल्डर का नाम [`content.pages`](/docs/configuration#content) से कॉन्फ़िगर किया जा सकता है (डिफ़ॉल्ट `"pages"`)। कस्टम पेज डिस्क पर अपना मूल स्थान बनाए रखते हैं, इसलिए रिलेटिव इम्पोर्ट, कंपोनेंट इम्पोर्ट और [`getStaticPaths`](https://docs.astro.build/en/reference/routing-reference/#getstaticpaths) सभी ठीक वैसे ही काम करते हैं जैसे एक सामान्य Astro प्रोजेक्ट में — Blume हर फ़ाइल को उसकी जगह पर ही माउंट करता है, उसे कॉपी नहीं करता। ## फ़ाइलें और रूट्स [#files-and-routes] pages फ़ोल्डर के अंतर्गत हर फ़ाइल का पाथ ही उसका रूट बन जाता है। `index` पैरेंट फ़ोल्डर से मैप होता है, और डायनैमिक `[param]` सेगमेंट संरक्षित रहते हैं: | फ़ाइल | रूट | | ------------------------- | ------------- | | `pages/pricing.astro` | `/pricing` | | `pages/blog/index.astro` | `/blog` | | `pages/blog/[slug].astro` | `/blog/:slug` | | `pages/changelog.astro` | `/changelog` | एक ही पाथ पर कस्टम पेज जेनरेट किए गए रूट पर **भारी पड़ता** है। उदाहरण के लिए, `pages/changelog.astro` जोड़ने पर Blume की [जेनरेट की गई चेंजलॉग टाइमलाइन](/docs/advanced/changelog) की जगह आपका अपना पेज आ जाता है। ## साइट डेटा पढ़ना [#reading-site-data] वही रिज़ॉल्व किया गया कॉन्फ़िग, नेविगेशन, रूट्स और फ़ीड्स पढ़ने के लिए `blume:data` इम्पोर्ट करें जिनका उपयोग बाकी साइट करती है: ```astro pages/all-pages.astro lineNumbers --- import data from "blume:data"; ---

All pages

``` Blume प्रोजेक्ट के भीतर यह मॉड्यूल स्वतः टाइप्ड होता है। आप इसका शेप स्पष्ट रूप से भी ला सकते हैं — टाइप्ड हेल्पर्स, प्रॉप्स, या अपने स्वयं के tsconfig के लिए — `import type { BlumeData } from "blume"` के साथ: ```ts import type { BlumeData, BlumeRoute } from "blume"; const indexable = (data: BlumeData): BlumeRoute[] => data.routes.filter((route) => route.indexable); ``` यह मॉड्यूल निम्नलिखित उपलब्ध कराता है: | Prop | Type | Default | Description | | - | - | - | - | | `config` | `BlumeDataConfig` | - | Resolved site settings: title, description, logo, favicon, appleIcon, banner, theme, site, repoUrl, github (owner, repo, host, and the REST api base — null when unset), search, i18n, mcp, ask, og, analytics, feedback, structuredData, toc, codeThemes, codeWrap, and imageZoom. | | `navigation` | `Navigation` | - | The sidebar, tabs, and selectors inferred from your content (default locale). | | `navigationByLocale` | `Record` | - | Per-locale navigation trees, keyed by locale code. Empty unless i18n is configured. | | `routes` | `BlumeRoute[]` | - | Every content page: { id, path, title, locale, indexable, hidden, draft, fallback, editUrl, lastModified, alternates, collection, entryId }. | | `feeds` | `BlumeFeed[]` | - | Generated RSS feeds: { href, title }. | | `fontCssVars` | `string[]` | - | CSS variable names for the configured fonts (Astro integration). | | `ui` | `UIStrings` | - | Resolved UI chrome strings for the default locale (search, sidebar, and footer labels). | | `uiByLocale` | `Record` | - | Per-locale UI strings, keyed by locale code. Empty unless i18n is configured. | `routes` पेज मेटाडेटा रखता है, लेकिन `type` या `date` जैसा फ़्रंटमैटर नहीं। कंटेंट टाइप के आधार पर फ़िल्टर की गई सूची बनाने के लिए — जैसे ब्लॉग या चेंजलॉग इंडेक्स — इसे Astro के `docs` कंटेंट कलेक्शन के साथ जोड़ें, जिसमें फ़्रंटमैटर होता है: ```astro pages/blog/index.astro lineNumbers --- import { getCollection } from "astro:content"; import data from "blume:data"; // Each route's id matches its collection entry id. const routeById = new Map(data.routes.map((route) => [route.id, route.path])); const posts = (await getCollection("docs")) .filter((entry) => entry.data.type === "blog" && !entry.data.draft) .map((entry) => ({ description: entry.data.description, href: routeById.get(entry.id), title: entry.data.title, })); ---
    { posts.map((post) => (
  • {post.title}

    {post.description}

    • )) }
``` ## रनटाइम हेल्पर्स [#runtime-helpers] `blume/runtime` सामान्य डेटा पैटर्न को बंडल करता है ताकि आपको `blume:data` के आंतरिक हिस्सों तक पहुँचना न पड़े। **`getBlumeCollection(data, query?)`** कंटेंट रूट्स चुनता है — कलेक्शन, लोकेल, या पाथ प्रीफ़िक्स के आधार पर फ़िल्टर किए हुए, ड्राफ़्ट और छिपे हुए पेज हटाकर और परिणाम पाथ के अनुसार क्रमबद्ध — जो ठीक वही है जिसकी एक कस्टम इंडेक्स को ज़रूरत होती है: ```astro pages/blog/index.astro lineNumbers --- import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const posts = getBlumeCollection(data, { prefix: "/blog" }); --- ``` **``** किसी कंटेंट एंट्री के बॉडी को एक कस्टम पेज के भीतर रेंडर करता है, जिसमें Blume के बिल्ट-इन MDX कंपोनेंट (कॉलआउट, कार्ड, स्टेप्स…) पहले से जुड़े होते हैं — किसी लैंडिंग पेज पर किसी डॉक को प्रस्तुत करने या वास्तविक कंटेंट दिखाने वाला अनुकूलित इंडेक्स बनाने के लिए: ```astro pages/index.astro lineNumbers --- import BlumePage from "blume/components/BlumePage.astro"; import data from "blume:data"; import { getBlumeCollection } from "blume/runtime"; const [intro] = getBlumeCollection(data, { prefix: "/docs" }); --- {intro && } ``` अपने स्वयं के ओवरराइड या आइलैंड्स (जो जेनरेट किए गए रनटाइम में रहते हैं और डिफ़ॉल्ट रूप से इम्पोर्ट नहीं होते) जोड़ने के लिए `components` पास करें, और `"docs"` के अलावा किसी अन्य कलेक्शन से पढ़ने के लिए `collection` पास करें। ## साइट लेआउट का उपयोग [#using-the-site-layout] `RootLayout` एक कस्टम पेज को पूरा डॉक्स क्रोम देता है — हेडर, साइडबार, सर्च, TOC और थीम — उसे उसी 3-कॉलम ग्रिड में लपेटकर जिसका उपयोग जेनरेट किए गए पेज करते हैं। लैंडिंग या मार्केटिंग पेज के लिए वह ग्रिड बाधा बनता है, इसलिए उसकी जगह **`PageLayout`** चुनें: यह डॉक्यूमेंट शेल, हेडर, थीम और फ़ॉन्ट देता है, और फिर एक अकेला पूरी चौड़ाई वाला `` (न साइडबार, न प्रोज़, न TOC)। एक वैकल्पिक `footer` स्लॉट `
` के बाद रेंडर होता है: ```astro pages/index.astro lineNumbers --- import PageLayout from "blume/components/layout/PageLayout.astro"; import data from "blume:data"; import Footer from "./_home/Footer.astro"; const { config } = data; ---

Build docs that fly