अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके
संस्करण इतिहास
- "सॉलिड useIntlayer API उपयोग को सीधे प्रॉपर्टी एक्सेस में अपडेट करें"v8.9.04/5/2026
- "init कमांड जोड़ें"v7.5.930/12/2025
- "दस्तावेज़ अपडेट करें"v5.5.1119/11/2025
- "इतिहास प्रारंभ करें"v5.5.1029/6/2025
इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंकदस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें
Intlayer का उपयोग करके अपनी Vite और Svelte वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)
सामग्री तालिका
विकल्पों पर इन्टलेयर क्यों?
svelte-i18n या i18next जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
पूर्ण विस्तृत कवरेज
इंटलेयर को घटक-स्तरीय सामग्री स्कोपिंग, प्रतिक्रियाशील अनुवाद, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके स्वेल्टे के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।
बंडल का आकार
अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।
रखरखाव
आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए रखरखाव की सुविधा प्रदान करता है। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer पूरी तरह से टाइप किया गया है।
एआई एजेंट
सामग्री का सह-स्थानीकरण बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे CLI ताकि लापता अनुवादों का परीक्षण किया जा सके,LSP, MCP, और एजेंट कौशल, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।
स्वचालन
अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक कंपाइलर के साथ-साथ पृष्ठभूमि में अनुवाद में मदद करने के लिए एक वेब प्लेटफ़ॉर्म भी प्रदान करता है।
प्रदर्शन
बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। इंटलेयर बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।
किसी भी देव के साथ स्केलिंग
सिर्फ एक i18n समाधान से अधिक, Intlayer एक स्व-होस्टेड विज़ुअल एडिटर और एक [पूर्ण] प्रदान करता है सीएमएस](/hi/doc/concept/cms) आपकी बहुभाषी सामग्री को वास्तविक समय में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
Vite और Svelte एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
GitHub पर एप्लिकेशन टेम्पलेट देखें।
Dependencies इंस्टॉल करें
npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
bashकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
intlayer
मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपाइलेशन, और CLI कमांड के लिए अंतरराष्ट्रीयकरण उपकरण प्रदान करता है।
- svelte-intlayer
svelte-intlayer
वह पैकेज जो Intlayer को Svelte एप्लिकेशन के साथ एकीकृत करता है। यह Svelte अंतरराष्ट्रीयकरण के लिए context providers और hooks प्रदान करता है।vite-intlayer
इसमें Vite प्लगइन शामिल है जो Intlayer को Vite bundler के साथ एकीकृत करता है, साथ ही उपयोगकर्ता की पसंदीदा locale का पता लगाने, कुकीज़ प्रबंधित करने, और URL पुनर्निर्देशन को संभालने के लिए middleware भी शामिल है।
अपने प्रोजेक्ट का कॉन्फ़िगरेशन
अपने एप्लिकेशन की भाषाओं को कॉन्फ़िगर करने के लिए एक config फ़ाइल बनाएं:
intlayer.config.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, middleware पुनर्निर्देशन, कुकी नाम, अपनी सामग्री घोषणाओं का स्थान और एक्सटेंशन सेट कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और भी बहुत कुछ। उपलब्ध सभी पैरामीटर की पूरी सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।
अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।
vite.config.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
intlayer()Vite प्लगइन का उपयोग Intlayer को Vite के साथ एकीकृत करने के लिए किया जाता है। यह कंटेंट घोषणा फ़ाइलों के निर्माण को सुनिश्चित करता है और विकास मोड में उन्हें मॉनिटर करता है। यह Vite एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है। इसके अतिरिक्त, यह प्रदर्शन को अनुकूलित करने के लिए उपनाम प्रदान करता है।अपनी सामग्री घोषित करें
अनुवाद संग्रहीत करने के लिए अपनी सामग्री घोषणाओं को बनाएँ और प्रबंधित करें:
src/app.content.tsxकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
import { t, type Dictionary } from "intlayer"; 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,cjs,md,mdx,yaml,yml})।अधिक विवरण के लिए, content declaration documentation देखें।
अपने कोड में Intlayer का उपयोग करें
src/App.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
यदि आपका ऐप पहले से मौजूद है, तो आप हजारों घटकों को एक सेकंड में बदलने के लिए Intlayer कंपाइलर को एक्सट्रैक्ट कमांड के साथ उपयोग कर सकते हैं।
अपनी सामग्री की भाषा बदलें
वैकल्पिकsrc/App.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
मार्कडाउन रेंडर करें
वैकल्पिकIntlayer सीधे आपके Svelte एप्लिकेशन में Markdown सामग्री को रेंडर करने का समर्थन करता है। डिफ़ॉल्ट रूप से, Markdown को सादा टेक्स्ट के रूप में माना जाता है। Markdown को समृद्ध HTML में बदलने के लिए, आप
@humanspeak/svelte-markdownया किसी अन्य markdown पार्सर को एकीकृत कर सकते हैं।intlayerपैकेज का उपयोग करके markdown सामग्री को कैसे घोषित करें, यह देखने के लिए markdown doc देखें।src/App.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
आप अपने मार्कडाउन फ्रंट-मैटर डेटा को
content.markdownContent.metadata.xxxप्रॉपर्टी का उपयोग करके भी एक्सेस कर सकते हैं।intlayer संपादक / CMS सेट करें
वैकल्पिकintlayer संपादक सेट करने के लिए, आपको intlayer संपादक दस्तावेज़ का पालन करना होगा।
intlayer CMS सेट करने के लिए, आपको intlayer CMS दस्तावेज़ का पालन करना होगा।
अपनी एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें
वैकल्पिकअपनी Svelte एप्लिकेशन में स्थानीयकृत रूटिंग को संभालने के लिए, आप
svelte-spa-routerका उपयोग Intlayer केlocaleFlatMapके साथ कर सकते हैं ताकि प्रत्येक लोकल के लिए रूट्स जनरेट किए जा सकें।सबसे पहले,
svelte-spa-routerइंस्टॉल करें:bashकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
फिर, अपने रूट्स को परिभाषित करने के लिए एक
Router.svelteफ़ाइल बनाएं:src/Router.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
अपने
main.tsको अपडेट करें ताकिAppके बजायRouterकंपोनेंट को माउंट किया जा सके:src/main.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
अंत में, अपने
App.svelteको अपडेट करें ताकि वहlocaleprop प्राप्त कर सके और इसेuseIntlayerके साथ उपयोग कर सके:src/App.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
सर्वर-साइड रूटिंग कॉन्फ़िगर करें (वैकल्पिक)
साथ ही, आप अपने एप्लिकेशन में सर्वर-साइड रूटिंग जोड़ने के लिए
intlayerProxyका भी उपयोग कर सकते हैं। यह प्लगइन URL के आधार पर वर्तमान locale को स्वचालित रूप से पहचान लेगा और उपयुक्त locale कुकी सेट करेगा। यदि कोई locale निर्दिष्ट नहीं है, तो प्लगइन उपयोगकर्ता के ब्राउज़र भाषा प्राथमिकताओं के आधार पर सबसे उपयुक्त locale निर्धारित करेगा। यदि कोई locale पता नहीं चलता है, तो यह डिफ़ॉल्ट locale पर पुनर्निर्देशित कर देगा।ध्यान दें कि उत्पादन में
intlayerProxyका उपयोग करने के लिए, आपकोvite-intlayerपैकेज कोdevDependenciesसेdependenciesमें स्विच करना होगा।vite.config.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; import { intlayer, intlayerProxy } from "vite-intlayer"; plugins: [intlayerProxy(), // should be placed first svelte(), intlayer()], });जब locale बदलता है तो URL बदलें
वैकल्पिकउपयोगकर्ताओं को भाषाएँ बदलने और URL को उसके अनुसार अपडेट करने की अनुमति देने के लिए, आप एक
LocaleSwitcherकॉम्पोनेंट बना सकते हैं। यह कॉम्पोनेंटintlayerसेgetLocalizedUrlऔरsvelte-spa-routerसेpushका उपयोग करेगा।src/lib/LocaleSwitcher.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
अपने घटकों की सामग्री निकालें
वैकल्पिकयदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।
इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।
इसे सेट करने के लिए, आप अपनी
intlayer.config.tsफ़ाइल में एकcompilerअनुभाग जोड़ सकते हैं:intlayer.config.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
import { type IntlayerConfig } from "intlayer"; const config: IntlayerConfig = { // ... आपका शेष कॉन्फ़िगरेशन compiler: { /** * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए। */ enabled: true, /** * आउटपुट फ़ाइलों का पथ परिभाषित करता है */ output: ({ fileName, extension }) => `./${fileName}${extension}`, /** * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए। उस तरह से, कंपाइलर को ऐप बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है। */ saveComponents: false, /** * शब्दकोश कुंजी उपसर्ग */ dictionaryKeyPrefix: "", }, }; export default config;अपने घटकों को बदलने और सामग्री निकालने के लिए एक्सट्रैक्टर चलाएँ
bashकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
Git कॉन्फ़िगरेशन
यह अनुशंसा की जाती है कि Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा किया जाए। इससे आप उन्हें अपने Git रिपॉजिटरी में कमिट करने से बच सकते हैं।
ऐसा करने के लिए, आप अपनी .gitignore फ़ाइल में निम्नलिखित निर्देश जोड़ सकते हैं:
कोड को क्लिपबोर्ड पर कॉपी करें
VS कोड एक्सटेंशन
अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code Extension इंस्टॉल कर सकते हैं।
VS Code Marketplace से इंस्टॉल करें
यह एक्सटेंशन प्रदान करता है:
- अनुवाद कुंजियों के लिए ऑटोकंप्लीशन।
- गायब अनुवादों के लिए रीयल-टाइम त्रुटि पता लगाना।
- अनुवादित सामग्री के इनलाइन पूर्वावलोकन।
- अनुवादों को आसानी से बनाने और अपडेट करने के लिए त्वरित क्रियाएं।
एक्सटेंशन का उपयोग कैसे करें, इसके लिए अधिक जानकारी के लिए देखें Intlayer VS Code Extension दस्तावेज़।
(वैकल्पिक) साइटमैप और robots.txt (बिल्ड-टाइम जनरेशन)
Intlayer generateSitemap और getMultilingualUrls उपलब्ध कराता है ताकि आप क्रॉलर-तैयार बहुभाषी sitemap.xml और robots.txt बनाकर public/ में स्वचालित लिख सकें। आमतौर पर Vite से पहले छोटा Node स्क्रिप्ट चलाएँ (जैसे npm predev / prebuild)।
साइटमैप
Intlayer का साइटमैप जनरेटर आपकी लोकेल सेटिंग का सम्मान करता है और क्रॉलर के लिए मेटाडेटा जोड़ता है।
जनरेट साइटमैपxhtml:link(hreflang) नेमस्पेस को सपोर्ट करता है। सपाट URL सूची के बजाय Intlayer हर पृष्ठ के सभी भाषा संस्करणों को दोतरफा जोड़ता है (जैसे/about,/fr/about, या/about?lang=fr- रूटिंग मोड पर निर्भर)।
Robots.txt
getMultilingualUrls का उपयोग करें ताकि Disallow नियम संवेदनशील पथों के सभी बहुभाषी रूपों को कवर करें।
1. प्रोजेक्ट रूट में generate-seo.mjs जोड़ें
कोड को क्लिपबोर्ड पर कॉपी करें
स्क्रिप्ट को intlayer इम्पोर्ट करने के लिए पैकेज इंस्टॉल होना चाहिए। प्रोडक्शन में SITE_URL सेट करें (जैसे CI में)।
Node ESM के लिएgenerate-seo.mjsपसंद करें।generate-seo.jsके लिएpackage.jsonमें"type": "module"या अन्य ESM सेटअप करें।
2. Vite से पहले स्क्रिप्ट चलाएँ
कोड को क्लिपबोर्ड पर कॉपी करें
pnpm या yarn हो तो कमांड अनुकूलित करें। CI से भी कॉल कर सकते हैं।
आगे बढ़ें
आगे बढ़ने के लिए, आप visual editor को लागू कर सकते हैं या अपनी सामग्री को CMS का उपयोग करके बाहरी रूप से प्रबंधित कर सकते हैं।