\n```\n\n> **रूटिंग सेटअप पर नोट:**\n> आपके द्वारा उपयोग की जाने वाली निर्देशिका संरचना `intlayer.config.ts` में `middleware.routing` सेटिंग पर निर्भर करती है:\n>\n> - **`prefix-no-default` (डिफ़ॉल्ट):** डिफ़ॉल्ट भाषा को रूट पर रखता है (कोई उपसर्ग नहीं) और अन्य को उपसर्ग देता है। सभी मामलों को पकड़ने के लिए `[...locale]` का उपयोग करें।\n> - **`prefix-all`:** सभी URL को भाषा उपसर्ग प्राप्त होता है। यदि आपको रूट को अलग से संभालने की आवश्यकता नहीं है तो आप मानक `[locale]` का उपयोग कर सकते हैं।\n> - **`search-param` या `no-prefix`:** किसी भाषा निर्देशिका की आवश्यकता नहीं है। भाषा को क्वेरी पैरामीटर या कुकीज़ के माध्यम से संभाला जाता है।\n\n### चरण 6: एक Lit Custom Element घटक बनाएँ\n\nएक Lit custom element बनाएँ। क्लाइंट-साइड अनुवाद सिंगलटन को इनिशियलाइज़ करने के लिए सर्वर-आधारित `locale` एट्रिब्यूट (attribute) का उपयोग करके `connectedCallback` में `installIntlayer` को कॉल करें।\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\nimport { LitElement, html } from \"lit\";\nimport { installIntlayer, useIntlayer, useLocale } from \"lit-intlayer\";\nimport { getLocalizedUrl, getLocaleName, type LocalesValues } from \"intlayer\";\n\nclass LitDemo extends LitElement {\n static properties = {\n locale: { type: String },\n };\n\n locale: LocalesValues = \"en\" as LocalesValues;\n\n private _content = useIntlayer(this, \"lit-demo\");\n private _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n window.location.href = getLocalizedUrl(\n window.location.pathname,\n newLocale\n );\n },\n });\n\n override connectedCallback() {\n super.connectedCallback();\n // सर्वर-पहचाने गए लोकेल के साथ इनिशियलाइज़ करें\n installIntlayer({ locale: this.locale as any });\n }\n\n override render() {\n const { greeting, description } = this._content;\n const {\n locale: currentLocale,\n availableLocales,\n setLocale,\n } = this._localeCtrl;\n\n return html`\n \n `;\n }\n}\n\ncustomElements.define(\"lit-demo\", LitDemo);\n```\n\n> `locale` एट्रिब्यूट को Astro पृष्ठ (सर्वर पहचान) से पारित किया जाता है और `connectedCallback` में `installIntlayer` को इनिशियलाइज़ करने के लिए उपयोग किया जाता है, जो घटक के भीतर सभी `ReactiveController` हुक के लिए प्रारंभिक भाषा सेट करता है।\n\n> `useIntlayer` को एक `ReactiveController` के रूप में पंजीकृत किया गया है। भाषा बदलने पर यह ऑटोमैटिक रूप से घटक को पुन: रेंडर (re-render) करने का निर्देश देता है, इसलिए किसी अतिरिक्त सदस्यता तर्क की आवश्यकता नहीं है।\n\n### चरण 7: एक भाषा स्विचर जोड़ना\n\nभाषा स्विचिंग कार्यक्षमता सीधे Lit custom element की `render()` विधि के भीतर एकीकृत है (ऊपर चरण 6 देखें)। यह `lit-intlayer` से `useLocale` का उपयोग करता है और उपयोगकर्ता द्वारा एक नई भाषा चुनने पर स्थानीयकृत URL पर नेविगेट करता है:\n\n```typescript fileName=\"src/components/lit/LitDemo.ts\"\n// LitElement क्लास के भीतर, चरण 6 में useLocale सेटअप के बाद:\n\nprivate _localeCtrl = useLocale(this, {\n onLocaleChange: (newLocale: LocalesValues) => {\n // भाषा परिवर्तन पर स्थानीयकृत URL पर नेविगेट करें\n window.location.href = getLocalizedUrl(window.location.pathname, newLocale);\n },\n});\n\noverride render() {\n const { locale: currentLocale, availableLocales, setLocale } = this._localeCtrl;\n\n return html`\n \n `;\n}\n```\n\n> **Lit प्रतिक्रियात्मकता पर नोट:**\n> `useLocale` एक `ReactiveController` लौटाता है। जब `setLocale` को कॉल किया जाता है, तो कंट्रोलर ऑटोमैटिक रूप से पुन: रेंडर का निर्देश देता है, जिससे मैन्युअल DOM हेरफेर के बिना सक्रिय बटन स्थिति अपडेट हो जाती है।\n\n> **निरंतरता पर नोट:**\n> `window.location.href` के माध्यम से रीडायरेक्ट करने के लिए `onLocaleChange` का उपयोग यह सुनिश्चित करता है कि नया भाषाई URL देखा जाए, जिससे Intlayer मिडलवेयर भाषा कुकी सेट कर सके और भविष्य की यात्राओं में उपयोगकर्ता की वरीयता को याद रख सके।\n\n### चरण 8: Sitemap और Robots.txt\n\nIntlayer आपकी स्थानीयकृत साइटमैप और robots.txt फ़ाइलों को गतिशील रूप से बनाने के लिए उपयोगिताओं की पेशकश करता है।\n\n#### साइटमैप (Sitemap)\n\nIntlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.\n\n> The Intlayer generated sitemap supports the `xhtml:link` namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., `/about`, `/about?lang=fr`, and `/about?lang=es`). This ensures search engines correctly index and serve the right language version to the right audience.\n\nअपने सभी स्थानीयकृत रूट सहित साइटमैप उत्पन्न करने के लिए `src/pages/sitemap.xml.ts` बनाएँ।\n\n```typescript fileName=\"src/pages/sitemap.xml.ts\"\nimport type { APIRoute } from \"astro\";\nimport { generateSitemap, type SitemapUrlEntry } from \"intlayer\";\n\nconst pathList: SitemapUrlEntry[] = [\n { path: \"/\", changefreq: \"daily\", priority: 1.0 },\n { path: \"/about\", changefreq: \"monthly\", priority: 0.7 },\n];\n\nconst SITE_URL = import.meta.env.SITE ?? \"http://localhost:4321\";\n\nexport const GET: APIRoute = async ({ site }) => {\n const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });\n\n return new Response(xmlOutput, {\n headers: { \"Content-Type\": \"application/xml\" },\n });\n};\n```\n\n#### Robots.txt\n\nखोज इंजन क्रॉलिंग को नियंत्रित करने के लिए `src/pages/robots.txt.ts` बनाएँ।\n\n```typescript fileName=\"src/pages/robots.txt.ts\"\nimport type { APIRoute } from \"astro\";\nimport { getMultilingualUrls } from \"intlayer\";\n\nconst getAllMultilingualUrls = (urls: string[]) =>\n urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);\n\nconst disallowedPaths = getAllMultilingualUrls([\"/admin\", \"/private\"]);\n\nexport const GET: APIRoute = ({ site }) => {\n const robotsTxt = [\n \"User-agent: *\",\n \"Allow: /\",\n ...disallowedPaths.map((path) => `Disallow: ${path}`),\n \"\",\n `Sitemap: ${new URL(\"/sitemap.xml\", site).href}`,\n ].join(\"\\n\");\n\n return new Response(robotsTxt, {\n headers: { \"Content-Type\": \"text/plain\" },\n });\n};\n```\n\n### TypeScript कॉन्फ़िगरेशन\n\nIntlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है। यदि आप डेकोरेटर (decorator) सिंटैक्स का उपयोग करते हैं, तो सुनिश्चित करें कि आप अपने कंपाइलर विकल्पों में `experimentalDecorators` को सक्षम करें।\n\n\n\n\n\nसुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।\n\n```json5 fileName=\"tsconfig.json\"\n{\n compilerOptions: {\n // ...\n experimentalDecorators: true,\n useDefineForClassFields: false, // Lit में डेकोरेटर समर्थन के लिए आवश्यक\n },\n \"include\": [\n // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन\n \".intlayer/**/*.ts\", // स्वतः उत्पन्न प्रकारों को शामिल करें\n ],\n}\n```\n\n### Git कॉन्फ़िगरेशन\n\nIntlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।\n\nऐसा करने के लिए, अपनी `.gitignore` फ़ाइल में निम्न निर्देश जोड़ें:\n\n```bash\n# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें\n.intlayer\n```\n\n### VS Code एक्सटेंशन\n\nIntlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप **आधिकारिक Intlayer VS Code एक्सटेंशन** स्थापित कर सकते हैं।\n\n[VS Code Marketplace से इंस्टॉलेशन](https://marketplace.visualstudio.com/items?itemName=intlayer.intlayer-vs-code-extension)\n\nयह एक्सटेंशन प्रदान करता है:\n\n- अनुवाद कुंजियों के लिए **ऑटो-पूर्णता**।\n- अनुपलब्ध अनुवादों के लिए **वास्तविक समय त्रुटि पहचान**।\n- अनूदित सामग्री का **इनलाइन पूर्वावलोकन**।\n- आसानी से अनुवाद बनाने और अपडेट करने के लिए **त्वरित क्रियाएं**।\n\nएक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, [VS Code एक्सटेंशन दस्तावेज़](https://intlayer.org/doc/vs-code-extension) देखें।\n\n---\n\n### (वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें\n\nयदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।\n\nइस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक [कंपाइलर](/hi/doc/compiler) / [एक्सट्रैक्टर](/hi/doc/concept/cli/extract) का प्रस्ताव करता है।\n\nइसे सेट करने के लिए, आप अपनी `intlayer.config.ts` फ़ाइल में एक `compiler` अनुभाग जोड़ सकते हैं:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... आपका शेष कॉन्फ़िगरेशन\n compiler: {\n /**\n * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।\n */\n enabled: true,\n\n /**\n * आउटपुट फ़ाइलों का पथ परिभाषित करता है\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।\n */\n saveComponents: false,\n\n /**\n * शब्दकोश कुंजी उपसर्ग\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nअपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nintlayerCompiler प्लगइन शामिल करने के लिए अपनी `vite.config.ts` अपडेट करें:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # या npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n---\n\n### अपने ज्ञान को और गहरा करें\n\nयदि आप और अधिक सीखना चाहते हैं, तो आप [विजुअल एडिटर](/hi/doc/concept/editor) को भी लागू कर सकते हैं या अपनी सामग्री को बाहरी बनाने के लिए [CMS](/hi/doc/concept/cms) का उपयोग कर सकते हैं।\n","about":"Intlayer के साथ अपनी Astro + Lit साइट में अंतर्राष्ट्रीयकरण (i18n) जोड़ना सीखें। अपनी साइट को बहुभाषी बनाने के लिए इस गाइड का पालन करें।","url":"https://intlayer.org/hi/doc/environment/astro/lit","datePublished":"24-04-2026","dateModified":"06-05-2026","keywords":"अंतर्राष्ट्रीयकरण, दस्तावेज़ीकरण, Intlayer, Astro, Lit, Web Components, i18n, JavaScript","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"डेवलपर्स, सामग्री प्रबंधक"}}

Creation:2026-04-24Last update:2026-05-06