अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके
संस्करण इतिहास
- "सॉलिड useIntlayer API उपयोग को सीधे प्रॉपर्टी एक्सेस में अपडेट करें"v8.9.04/5/2026
- "init कमांड जोड़ें"v7.5.930/12/2025
- "प्रारंभिक इतिहास"v7.1.1020/11/2025
इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।
अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखेंअगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।
दस्तावेज़ के लिए GitHub लिंकदस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें
Intlayer का उपयोग करके अपनी SvelteKit वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)
सामग्री सूची
विकल्पों पर इन्टलेयर क्यों?
svelte-i18n या i18next जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:
पूर्ण SvelteKit कवरेज
Intlayer को बहुभाषी रूटिंग, SSR समर्थन, और स्केलिंग अंतर्राष्ट्रीयकरण (i18n) के लिए आवश्यक सभी सुविधाओं की पेशकश करके SvelteKit के साथ पूरी तरह से काम करने के लिए अनुकूलित किया गया है।
बंडल का आकार
अपने पृष्ठों में विशाल JSON फ़ाइलें लोड करने के बजाय, केवल आवश्यक सामग्री लोड करें। इंटलेयर आपके बंडल और पृष्ठ आकार को 50% तक कम करने में मदद करता है।
रखरखाव
आपके एप्लिकेशन की सामग्री का दायरा बड़े पैमाने के अनुप्रयोगों के लिए रखरखाव की सुविधा प्रदान करता है। आप अपने संपूर्ण सामग्री कोडबेस की समीक्षा करने के मानसिक बोझ के बिना किसी एक फीचर फ़ोल्डर की नकल कर सकते हैं या उसे हटा सकते हैं। इसके अतिरिक्त, आपकी सामग्री की सटीकता सुनिश्चित करने के लिए Intlayer पूरी तरह से टाइप किया गया है।
एआई एजेंट
सामग्री का सह-स्थानीकरण बड़े भाषा मॉडल (एलएलएम) द्वारा आवश्यक संदर्भ को कम करता है। इंटलेयर टूल के एक सूट के साथ भी आता है, जैसे CLI ताकि लापता अनुवादों का परीक्षण किया जा सके,LSP, MCP, और agent skills, AI एजेंटों के लिए डेवलपर अनुभव (DX) को और भी आसान बनाने के लिए।
स्वचालन
अपने एआई प्रदाता की कीमत पर अपनी पसंद के एलएलएम का उपयोग करके अपने सीआई/सीडी पाइपलाइन में अनुवाद करने के लिए स्वचालन का उपयोग करें। इंटलेयर सामग्री निष्कर्षण को स्वचालित करने के लिए एक कंपाइलर के साथ-साथ पृष्ठभूमि में अनुवाद में मदद करने के लिए एक वेब प्लेटफ़ॉर्म भी प्रदान करता है।
प्रदर्शन
बड़े पैमाने पर JSON फ़ाइलों को घटकों से जोड़ने से प्रदर्शन और प्रतिक्रियाशीलता संबंधी समस्याएं हो सकती हैं। इंटलेयर बिल्ड समय पर आपकी सामग्री लोडिंग को अनुकूलित करता है।
किसी भी देव के साथ स्केलिंग
सिर्फ एक i18n समाधान से अधिक, Intlayer एक स्व-होस्टेड विज़ुअल एडिटर और एक [पूर्ण] प्रदान करता है सीएमएस](/hi/doc/concept/cms) आपकी बहुभाषी सामग्री को वास्तविक समय में प्रबंधित करने में मदद करता है, जिससे अनुवादकों, कॉपीराइटरों और टीम के अन्य सदस्यों के साथ सहयोग सहज हो जाता है। सामग्री को स्थानीय और/या दूरस्थ रूप से संग्रहीत किया जा सकता है।
SvelteKit एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका
शुरू करने के लिए, एक नया SvelteKit प्रोजेक्ट बनाएं। यहाँ अंतिम संरचना है जिसे हम बनाएंगे:
शुरुआत करने के लिए, एक नया SvelteKit project बनाएं। यहाँ अंतिम structure है जो हम बनाएंगे:
कोड को क्लिपबोर्ड पर कॉपी करें
Dependencies इंस्टॉल करें
npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:
bashकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
--interactiveध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तोintlayer-cli initका उपयोग करें।यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
bashकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
- intlayer: मुख्य i18n पैकेज।
- svelte-intlayer: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
- vite-intlayer: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।
अपने प्रोजेक्ट का कॉन्फ़िगरेशन
अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:
intlayer.config.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें
अपने
vite.config.tsको अपडेट करें ताकि इसमें Intlayer प्लगइन शामिल हो। यह प्लगइन आपकी content फ़ाइलों के transpilation को संभालता है।vite.config.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
अपनी सामग्री घोषित करें
अपने
srcफ़ोल्डर में कहीं भी अपनी सामग्री घोषणा फ़ाइलें बनाएं (जैसे,src/lib/contentया अपने components के साथ)। ये फ़ाइलें आपके एप्लिकेशन के लिए अनुवाद योग्य सामग्री को परिभाषित करती हैं, प्रत्येक locale के लिएt()फ़ंक्शन का उपयोग करके।अपने Components में Intlayer का उपयोग करें
अब आप किसी भी Svelte कंपोनेंट में
useIntlayerफ़ंक्शन का उपयोग कर सकते हैं। यह एक रिएक्टिव स्टोर रिटर्न करता है जो जब लोकेल बदलता है तो स्वचालित रूप से अपडेट हो जाता है। फ़ंक्शन स्वचालित रूप से वर्तमान लोकेल को सम्मानित करता है (SSR और क्लाइंट-साइड नेविगेशन दोनों के दौरान)।प्रीफिक्स का उपयोग करना होगा (जैसे,
$content.title)।src/lib/components/Component.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
रूटिंग सेट करें
वैकल्पिकनिम्नलिखित चरण दिखाते हैं कि SvelteKit में locale-आधारित रूटिंग कैसे सेट करें। यह आपके URLs को locale प्रीफिक्स (जैसे,
/en/about,/fr/about) शामिल करने की अनुमति देता है, जिससे SEO और उपयोगकर्ता अनुभव बेहतर होता है।bashकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
सर्वर-साइड लोकल डिटेक्शन (हुक्स) को संभालें
SvelteKit में, SSR के दौरान सही सामग्री प्रस्तुत करने के लिए सर्वर को उपयोगकर्ता की लोकल जानकारी जाननी होती है। हम URL या कुकीज़ से लोकल पता लगाने के लिए
hooks.server.tsका उपयोग करते हैं।src/hooks.server.tsबनाएँ या संशोधित करें:src/hooks.server.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
फिर, अनुरोध ईवेंट से उपयोगकर्ता की locale प्राप्त करने के लिए एक हेल्पर बनाएं:
src/lib/getLocale.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
getLocaleFromStorageआपके कॉन्फ़िगरेशन के अनुसार हेडर या कुकी से locale की जांच करेगा। अधिक जानकारी के लिए देखें Configuration।localeDetectorफ़ंक्शनAccept-Languageहेडर को प्रोसेस करेगा और सबसे उपयुक्त मैच लौटाएगा।यदि locale कॉन्फ़िगर नहीं किया गया है, तो हम 404 त्रुटि लौटाना चाहते हैं। इसे आसान बनाने के लिए, हम एक
matchफ़ंक्शन बना सकते हैं जो जांचे कि locale मान्य है या नहीं:/src/params/locale.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
नोट: सुनिश्चित करें कि आपकी
src/app.d.tsमें locale परिभाषा शामिल है:typescriptकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
+layout.svelteफ़ाइल के लिए, हम सब कुछ हटा सकते हैं, केवल स्थैतिक सामग्री रखने के लिए, जो i18n से संबंधित नहीं है:src/+layout.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
फिर,
[[locale=locale]]समूह के अंतर्गत एक नया पेज और लेआउट बनाएं:src/routes/[[locale=locale]]/+layout.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
src/routes/[[locale=locale]]/+layout.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
src/routes/[[locale=locale]]/+page.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
src/routes/[[locale=locale]]/+page.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
अंतरराष्ट्रीयकृत लिंक
वैकल्पिकSEO के लिए, यह अनुशंसा की जाती है कि आप अपने routes को locale के साथ prefix करें (जैसे,
/en/about,/fr/about)। यह component स्वचालित रूप से किसी भी लिंक के साथ वर्तमान locale को prefix करता है।src/lib/components/LocalizedLink.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
यदि आप SvelteKit से
gotoका उपयोग करते हैं, तो आप localized URL पर नेविगेट करने के लिएgetLocalizedUrlके साथ वही लॉजिक उपयोग कर सकते हैं:typescriptकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
भाषा स्विचर
वैकल्पिकउपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए, URL को अपडेट करें।
src/lib/components/LanguageSwitcher.svelteकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
बैकएंड प्रॉक्सी जोड़ें
वैकल्पिकअपने SvelteKit एप्लिकेशन में बैकएंड प्रॉक्सी जोड़ने के लिए, आप
vite-intlayerप्लगइन द्वारा प्रदान किया गयाintlayerProxyफ़ंक्शन उपयोग कर सकते हैं। यह प्लगइन URL, कुकीज़, और ब्राउज़र भाषा प्राथमिकताओं के आधार पर उपयोगकर्ता के लिए सबसे अच्छा locale स्वचालित रूप से पहचान लेगा।Intlayer v9 के बाद से,
intlayerProxy()को सीधेintlayer()प्लगइन में बंडल किया गया है औरrouting.enableProxyविकल्प (trueडिफ़ॉल्ट रूप से) के माध्यम से डिफ़ॉल्ट रूप से सक्षम किया गया है। इसे नीचे दिखाए गए अनुसार अलग से रजिस्टर करना अब वैकल्पिक है — यह पिछड़ी संगतता के लिए और उन सेटअप के लिए रखा गया है जिन्हें प्लगइन क्रम को नियंत्रित करने की आवश्यकता है। ऑप्ट आउट करने के लिएrouting.enableProxy: falseसेट करें। v9 रिलीज़ नोट्स देखें।vite.config.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
intlayer संपादक / CMS सेट करें
वैकल्पिकintlayer संपादक सेट करने के लिए, आपको intlayer संपादक दस्तावेज़ का पालन करना होगा।
intlayer CMS सेट करने के लिए, आपको intlayer CMS दस्तावेज़ का पालन करना होगा।
intlayer संपादक चयनकर्ता को विज़ुअलाइज़ करने में सक्षम होने के लिए, आपको अपने intlayer कंटेंट में component सिंटैक्स का उपयोग करना होगा।
Component.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कोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
v9 के बाद से,
intlayerCompilerकोintlayerplugin में शामिल किया गया है। इसलिए आपको इसे manually जोड़ने की आवश्यकता नहीं है।intlayerCompiler प्लगइन शामिल करने के लिए अपनी
vite.config.tsअपडेट करें:vite.config.tsकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
bashकोड कॉपी करेंकोड को क्लिपबोर्ड पर कॉपी करें
Git कॉन्फ़िगरेशन
यह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को ignore किया जाए।
कोड को क्लिपबोर्ड पर कॉपी करें
आगे बढ़ें
- विज़ुअल एडिटर: UI से सीधे अनुवाद संपादित करने के लिए Intlayer Visual Editor को एकीकृत करें।
- CMS: अपनी सामग्री प्रबंधन को बाहरी बनाएं Intlayer CMS का उपयोग करके।
