अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके
अपने पसंदीदा AI एसिस्टेंट में Intlayer MCP सर्वर को एकीकृत करके आप सभी दस्तावेज़ को सीधे ChatGPT, DeepSeek, Cursor, VSCode से प्राप्त कर सकते हैं।
MCP सर्वर दस्तावेज़ देखेंइस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंकदस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें
Intlayer के साथ अपना Astro अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)
GitHub पर एप्लिकेशन टेम्पलेट देखें।
Intlayer क्या है?
Intlayer एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।
Intlayer के साथ, आप कर सकते हैं:
- घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें जो कि कंपोनेंट स्तर पर होते हैं।
- मेटाडेटा, रूट्स, और सामग्री को गतिशील रूप से स्थानीयकृत करें।
- स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें, जिससे ऑटोकम्प्लीशन और त्रुटि पहचान में सुधार होता है।
- उन्नत सुविधाओं का लाभ उठाएं, जैसे कि गतिशील लोकल डिटेक्शन और स्विचिंग।
Astro में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
चरण 1: निर्भरताएँ स्थापित करें
अपने पैकेज प्रबंधक का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
npm install intlayer astro-intlayer# वैकल्पिक: React आइलैंड समर्थन जोड़ेंnpm install react react-dom react-intlayer @astrojs/reactintlayer मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपाइलेशन, और CLI कमांड के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
astro-intlayer Astro इंटीग्रेशन प्लगइन शामिल है जो Intlayer को Vite बंडलर के साथ एकीकृत करता है, साथ ही उपयोगकर्ता की पसंदीदा भाषा का पता लगाने, कुकीज़ प्रबंधित करने, और URL पुनर्निर्देशन को संभालने के लिए मिडलवेयर भी प्रदान करता है।
चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन
अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक कॉन्फ़िग फाइल बनाएं:
कोड को क्लिपबोर्ड पर कॉपी करें
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // आपकी अन्य भाषाएँ ], defaultLocale: Locales.ENGLISH, },};export default config;इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर पुनर्निर्देशन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और भी बहुत कुछ। उपलब्ध पैरामीटर की पूरी सूची के लिए, कृपया कॉन्फ़िगरेशन दस्तावेज़ देखें।
चरण 3: अपने Astro कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।
कोड को क्लिपबोर्ड पर कॉपी करें
// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({ integrations: [intlayer()],});intlayer() Astro एकीकरण प्लगइन का उपयोग Intlayer को Astro के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Astro एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।
चरण 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", }), },} satisfies Dictionary;export default appContent;आपकी सामग्री घोषणाएँ आपकी एप्लिकेशन में कहीं भी परिभाषित की जा सकती हैं जब तक कि वे contentDir निर्देशिका (डिफ़ॉल्ट रूप से, ./src) में शामिल हों। और सामग्री घोषणा फ़ाइल एक्सटेंशन से मेल खाती हों (डिफ़ॉल्ट रूप से, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx})।
अधिक विवरण के लिए, सामग्री घोषणा प्रलेखन देखें।
चरण 5: अपनी सामग्री को Astro में उपयोग करें
आप सीधे .astro फ़ाइलों में intlayer द्वारा निर्यात किए गए कोर हेल्पर्स का उपयोग करके शब्दकोशों का उपयोग कर सकते हैं।
कोड को क्लिपबोर्ड पर कॉपी करें
<!-- astro -->---import { getIntlayer } from "intlayer";import appContent from "../app.content";const { title } = getIntlayer('app');---<html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>{title}</title> </head> <body> <h1>{title}</h1> </body></html>चरण 6: स्थानीयकृत रूटिंग
स्थानीयकृत पृष्ठों की सेवा के लिए एक डायनामिक रूट सेगमेंट बनाएं, उदाहरण के लिए src/pages/[locale]/index.astro:
कोड को क्लिपबोर्ड पर कॉपी करें
<!-- 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 टाइपस्क्रिप्ट के लाभ प्राप्त करने और आपके कोडबेस को मजबूत बनाने के लिए मॉड्यूल ऑगमेंटेशन का उपयोग करता है।
सुनिश्चित करें कि आपकी टाइपस्क्रिप्ट कॉन्फ़िगरेशन में ऑटो-जनरेटेड टाइप्स शामिल हैं।
कोड को क्लिपबोर्ड पर कॉपी करें
{ // ... आपकी मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन "include": [ // ... आपकी मौजूदा टाइपस्क्रिप्ट कॉन्फ़िगरेशन ".intlayer/**/*.ts", // ऑटो-जनरेटेड टाइप्स शामिल करें ],}Git कॉन्फ़िगरेशन
यह अनुशंसा की जाती है कि Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा किया जाए। इससे आप उन्हें अपने Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
इसे करने के लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
# Intlayer द्वारा जनरेट की गई फाइलों को अनदेखा करें.intlayerVS कोड एक्सटेंशन
Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS कोड एक्सटेंशन इंस्टॉल कर सकते हैं।
VS कोड मार्केटप्लेस से इंस्टॉल करें
यह एक्सटेंशन प्रदान करता है:
- अनुवाद कुंजियों के लिए ऑटोकम्प्लीशन।
- गायब अनुवादों के लिए रीयल-टाइम त्रुटि पता लगाना।
- अनुवादित सामग्री के इनलाइन पूर्वावलोकन।
- अनुवादों को आसानी से बनाने और अपडेट करने के लिए त्वरित क्रियाएं।
एक्सटेंशन का उपयोग कैसे करें, इसके लिए अधिक जानकारी के लिए देखें Intlayer VS कोड एक्सटेंशन दस्तावेज़।
आगे बढ़ें
आगे बढ़ने के लिए, आप विज़ुअल एडिटर को लागू कर सकते हैं या अपनी सामग्री को CMS का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।