अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके
संस्करण इतिहास
- "सॉलिड useIntlayer API उपयोग को सीधे प्रॉपर्टी एक्सेस में अपडेट करें"v8.9.04/5/2026
- "init कमांड जोड़ा गया"v7.5.930/12/2025
- "Astro एकीकरण, कॉन्फ़िगरेशन और उपयोग का अपडेट"v6.2.03/10/2025
इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंकदस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें
Intlayer के साथ अपनी Astro साइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
विषय-सूची
Intlayer क्या है?
Intlayer एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
Intlayer के साथ, आप यह कर सकते हैं:
- अनुवादों को आसानी से प्रबंधित करें: घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके।
- मेटाडेटा, रूट और सामग्री को गतिशील रूप से स्थानीयकृत करें।
- TypeScript समर्थन सुनिश्चित करें: बेहतर ऑटो-पूर्णता और त्रुटि पहचान के लिए स्वतः उत्पन्न प्रकारों के साथ।
- उन्नत सुविधाओं का लाभ उठाएं: जैसे गतिशील भाषा पहचान और स्विचिंग।
Astro में Intlayer को कॉन्फ़िगर करने के लिए चरण-दर-चरण मार्गदर्शिका
GitHub पर एप्लिकेशन टेम्पलेट देखें।
चरण 1: निर्भरताएँ स्थापित करें
अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:
कोड को क्लिपबोर्ड पर कॉपी करें
npm install intlayer astro-intlayer# वैकल्पिक: यदि आप React islands के लिए समर्थन जोड़ते हैंnpm install react react-dom react-intlayer @astrojs/reactintlayer मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपाइलेशन और CLI कमांड के लिए i18n टूल प्रदान करता है।
astro-intlayer Intlayer को Vite बंडलर के साथ जोड़ने के लिए Astro एकीकरण प्लगइन, साथ ही उपयोगकर्ता की पसंदीदा भाषा का पता लगाने, कुकीज़ प्रबंधित करने और URL रीडायरेक्ट को संभालने के लिए मिडलवेयर शामिल है।
चरण 2: अपना प्रोजेक्ट कॉन्फ़िगर करें
अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:
कोड को क्लिपबोर्ड पर कॉपी करें
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.HINDI, // आपकी अन्य भाषाएँ ], defaultLocale: Locales.ENGLISH, },};export default config;इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्ट, कुकी नाम, सामग्री घोषणाओं का स्थान और एक्सटेंशन कॉन्फ़िगर कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।
चरण 3: अपने Astro कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
अपने Astro कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।
कोड को क्लिपबोर्ड पर कॉपी करें
// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({ integrations: [intlayer()],});intlayer() एकीकरण प्लगइन का उपयोग Intlayer को Astro के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के उत्पादन को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Astro एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है और प्रदर्शन को अनुकूलित करने के लिए उपनाम (aliases) प्रदान करता है।चरण 4: अपनी सामग्री घोषित करें
अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:
कोड को क्लिपबोर्ड पर कॉपी करें
import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = { key: "app", content: { title: t({ en: "Hello World", fr: "Bonjour le monde", es: "Hola mundo", hi: "नमस्ते दुनिया", }), },} satisfies Dictionary;export default appContent;सामग्री घोषणाओं को आपके एप्लिकेशन में कहीं भी परिभाषित किया जा सकता है, बशर्ते वेcontentDir(डिफ़ॉल्ट रूप से./src) में शामिल हों और सामग्री घोषणा फ़ाइल एक्सटेंशन (डिफ़ॉल्ट रूप से.content.{json,ts,tsx,js,jsx,mjs,cjs}) से मेल खाती हों।
अधिक जानकारी के लिए, सामग्री घोषणा दस्तावेज़ देखें।
चरण 5: Astro में सामग्री का उपयोग करना
आप सीधे अपने .astro फ़ाइलों में intlayer से निर्यात किए गए मुख्य सहायकों का उपयोग करके शब्दकोशों का उपयोग कर सकते हैं।
कोड को क्लिपबोर्ड पर कॉपी करें
---import { getIntlayer, getLocaleFromPath, getLocalizedUrl, defaultLocale, localeMap, getHTMLTextDir, type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <title>{title}</title> <!-- Canonical link: Tells search engines which is the primary version of this page --> <link rel="canonical" href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)} /> <!-- Hreflang: Tell Google about all localized versions --> { localeMap(({ locale: mapLocale }) => ( <link rel="alternate" hreflang={mapLocale} href={new URL( getLocalizedUrl(Astro.url.pathname, mapLocale), Astro.site )} /> )) } <!-- x-default: Fallback for users in unmatched languages --> <link rel="alternate" hreflang="x-default" href={new URL( getLocalizedUrl(Astro.url.pathname, defaultLocale), Astro.site )} /> </head> <body> <header> <LocaleSwitcher /> </header> <main> <h1>{title}</h1> </main> </body></html>चरण 6: स्थानीयकृत रूटिंग
स्थानीयकृत पृष्ठों को परोसने के लिए गतिशील रूट सेगमेंट बनाएँ (उदा. src/pages/[locale]/index.astro):
कोड को क्लिपबोर्ड पर कॉपी करें
---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>Astro एकीकरण एक Vite मिडलवेयर जोड़ता है जो विकास के दौरान भाषा-संवेदनशील रूटिंग और पर्यावरण परिभाषाओं में मदद करता है। आप अपनी स्वयं की तर्क या intlayer टूल जैसे getLocalizedUrl का उपयोग करके विभिन्न भाषाओं के बीच लिंक भी बना सकते हैं।
चरण 7: अपने पसंदीदा फ्रेमवर्क का उपयोग जारी रखें
अपनी पसंद के फ्रेमवर्क का उपयोग करके अपना एप्लिकेशन बनाना जारी रखें।
- Intlayer + React: React के साथ Intlayer
- Intlayer + Vue: Vue के साथ Intlayer
- Intlayer + Svelte: Svelte के साथ Intlayer
- Intlayer + Solid: Solid के साथ Intlayer
- Intlayer + Preact: Preact के साथ Intlayer
TypeScript कॉन्फ़िगरेशन
Intlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है।
सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।
कोड को क्लिपबोर्ड पर कॉपी करें
{ // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन "include": [ // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकारों को शामिल करें ],}Git कॉन्फ़िगरेशन
Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।
ऐसा करने के लिए, अपनी .gitignore फ़ाइल में निम्न निर्देश जोड़ें:
कोड को क्लिपबोर्ड पर कॉपी करें
# Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करें.intlayerVS Code एक्सटेंशन
Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code एक्सटेंशन स्थापित कर सकते हैं।
VS Code Marketplace से इंस्टॉलेशन
यह एक्सटेंशन प्रदान करता है:
- अनुवाद कुंजियों के लिए ऑटो-पूर्णता।
- अनुपलब्ध अनुवादों के लिए वास्तविक समय त्रुटि पहचान।
- अनूदित सामग्री का इनलाइन पूर्वावलोकन।
- आसानी से अनुवाद बनाने और अपडेट करने के लिए त्वरित क्रियाएं।
एक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, VS Code एक्सटेंशन दस्तावेज़ देखें।
(वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें
यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।
इसे सेट करने के लिए, आप अपनी intlayer.config.ts फ़ाइल में एक compiler अनुभाग जोड़ सकते हैं:
कोड को क्लिपबोर्ड पर कॉपी करें
import { type IntlayerConfig } from "intlayer";
const config: IntlayerConfig = {
// ... आपका शेष कॉन्फ़िगरेशन
compiler: {
/**
* इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।
*/
enabled: true,
/**
* आउटपुट फ़ाइलों का पथ परिभाषित करता है
*/
output: ({ fileName, extension }) => `./${fileName}${extension}`,
/**
* इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।
*/
saveComponents: false,
/**
* शब्दकोश कुंजी उपसर्ग
*/
dictionaryKeyPrefix: "",
},
};
export default config;अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ
कोड को क्लिपबोर्ड पर कॉपी करें
npx intlayer extractअपने ज्ञान को और गहरा करें
यदि आप और अधिक सीखना चाहते हैं, तो आप विजुअल एडिटर को भी लागू कर सकते हैं या अपनी सामग्री को बाहरी बनाने के लिए CMS का उपयोग कर सकते हैं।