\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (वैकल्पिक) चरण 6: रूटिंग सेट करें\n\nनिम्नलिखित चरण दिखाते हैं कि SvelteKit में locale-आधारित रूटिंग कैसे सेट करें। यह आपके URLs को locale प्रीफिक्स (जैसे, `/en/about`, `/fr/about`) शामिल करने की अनुमति देता है, जिससे SEO और उपयोगकर्ता अनुभव बेहतर होता है।\n\n```bash\n.\n└─── src\n ├── app.d.ts # locale प्रकार को परिभाषित करें\n ├── hooks.server.ts # locale रूटिंग प्रबंधित करें\n ├── lib\n │ └── getLocale.ts # हेडर, कुकीज़ से locale जांचें\n ├── params\n │ └── locale.ts # locale पैरामीटर को परिभाषित करें\n └── routes\n ├── [[locale=locale]] # locale सेट करने के लिए route group में लपेटें\n │ ├── +layout.svelte # रूट के लिए स्थानीय लेआउट\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # फोंट और वैश्विक शैलियों के लिए रूट लेआउट\n```\n\n### चरण 7: सर्वर-साइड लोकल डिटेक्शन (हुक्स) को संभालें\n\nSvelteKit में, SSR के दौरान सही सामग्री प्रस्तुत करने के लिए सर्वर को उपयोगकर्ता की लोकल जानकारी जाननी होती है। हम URL या कुकीज़ से लोकल पता लगाने के लिए `hooks.server.ts` का उपयोग करते हैं।\n\n`src/hooks.server.ts` बनाएँ या संशोधित करें:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // जांचें कि क्या वर्तमान पथ पहले से ही किसी locale से शुरू होता है (जैसे /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // यदि URL में कोई locale मौजूद नहीं है (जैसे उपयोगकर्ता \"/\" पर जाता है), तो उन्हें पुनः निर्देशित करें\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // अस्थायी पुनर्निर्देशन\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nफिर, अनुरोध ईवेंट से उपयोगकर्ता की locale प्राप्त करने के लिए एक हेल्पर बनाएं:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * अनुरोध ईवेंट से उपयोगकर्ता की भाषा प्राप्त करें।\n * यह फ़ंक्शन `src/hooks.server.ts` में `handle` हुक में उपयोग किया जाता है।\n *\n * यह पहले Intlayer स्टोरेज (कुकीज़ या कस्टम हेडर) से भाषा प्राप्त करने का प्रयास करता है।\n * यदि भाषा नहीं मिलती है, तो यह ब्राउज़र के \"Accept-Language\" नेगोशिएशन पर वापस जाता है।\n *\n * @param event - SvelteKit से अनुरोध ईवेंट\n * @returns उपयोगकर्ता की भाषा\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Intlayer स्टोरेज (कुकीज़ या हेडर) से भाषा प्राप्त करने का प्रयास करें\n const storedLocale = getLocaleFromStorage({\n // SvelteKit कुकीज़ एक्सेस\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // SvelteKit हेडर एक्सेस\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // ब्राउज़र \"Accept-Language\" नेगोशिएशन पर फॉलबैक\n const negotiatorHeaders: Record<string, string> = {};\n\n // SvelteKit Headers ऑब्जेक्ट को साधारण Record<string, string> में कन्वर्ट करें\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // `Accept-Language` हेडर से लोकल की जांच करें\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // यदि कोई मैच नहीं मिलता है तो डिफ़ॉल्ट लोकल लौटाएं\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` आपके कॉन्फ़िगरेशन के अनुसार हेडर या कुकी से locale की जांच करेगा। अधिक जानकारी के लिए देखें [Configuration](https://intlayer.org/doc/configuration)।\n\n> `localeDetector` फ़ंक्शन `Accept-Language` हेडर को प्रोसेस करेगा और सबसे उपयुक्त मैच लौटाएगा।\n\nयदि locale कॉन्फ़िगर नहीं किया गया है, तो हम 404 त्रुटि लौटाना चाहते हैं। इसे आसान बनाने के लिए, हम एक `match` फ़ंक्शन बना सकते हैं जो जांचे कि locale मान्य है या नहीं:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **नोट:** सुनिश्चित करें कि आपकी `src/app.d.ts` में locale परिभाषा शामिल है:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\n`+layout.svelte` फ़ाइल के लिए, हम सब कुछ हटा सकते हैं, केवल स्थैतिक सामग्री रखने के लिए, जो i18n से संबंधित नहीं है:\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nफिर, `[[locale=locale]]` समूह के अंतर्गत एक नया पेज और लेआउट बनाएं:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// सामान्य Load टाइप का उपयोग करें\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// रूट से locale के साथ Intlayer को इनिशियलाइज़ करें\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// लेआउट सामग्री शब्दकोश का उपयोग करें\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// होम कंटेंट डिक्शनरी का उपयोग करें\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (वैकल्पिक) चरण 8: अंतरराष्ट्रीयकृत लिंक\n\nSEO के लिए, यह अनुशंसा की जाती है कि आप अपने routes को locale के साथ prefix करें (जैसे, `/en/about`, `/fr/about`)। यह component स्वचालित रूप से किसी भी लिंक के साथ वर्तमान locale को prefix करता है।\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nयदि आप SvelteKit से `goto` का उपयोग करते हैं, तो आप localized URL पर नेविगेट करने के लिए `getLocalizedUrl` के साथ वही लॉजिक उपयोग कर सकते हैं:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // स्थानीय भाषा के अनुसार /en/about या /fr/about पर नेविगेट करता है\n```\n\n### (वैकल्पिक) चरण 9: भाषा स्विचर\n\nउपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए, URL को अपडेट करें।\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // स्टोर में locale सेट करेगा और onLocaleChange को ट्रिगर करेगा\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (वैकल्पिक) चरण 10: बैकएंड प्रॉक्सी जोड़ें\n\nअपने SvelteKit एप्लिकेशन में बैकएंड प्रॉक्सी जोड़ने के लिए, आप `vite-intlayer` प्लगइन द्वारा प्रदान किया गया `intlayerProxy` फ़ंक्शन उपयोग कर सकते हैं। यह प्लगइन URL, कुकीज़, और ब्राउज़र भाषा प्राथमिकताओं के आधार पर उपयोगकर्ता के लिए सबसे अच्छा locale स्वचालित रूप से पहचान लेगा।\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (वैकल्पिक) चरण 11: intlayer संपादक / CMS सेट करें\n\nintlayer संपादक सेट करने के लिए, आपको [intlayer संपादक दस्तावेज़](/hi/doc/concept/editor) का पालन करना होगा।\n\nintlayer CMS सेट करने के लिए, आपको [intlayer CMS दस्तावेज़](/hi/doc/concept/cms) का पालन करना होगा।\n\nintlayer संपादक चयनकर्ता को विज़ुअलाइज़ करने में सक्षम होने के लिए, आपको अपने intlayer कंटेंट में component सिंटैक्स का उपयोग करना होगा।\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Git कॉन्फ़िगरेशन\n\nयह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को ignore किया जाए।\n\n```plaintext fileName=\".gitignore\"\n# Intlayer द्वारा उत्पन्न फ़ाइलों को ignore करें\n.intlayer\n```\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- **विज़ुअल एडिटर**: UI से सीधे अनुवाद संपादित करने के लिए [Intlayer Visual Editor](/hi/doc/concept/editor) को एकीकृत करें।\n- **CMS**: अपनी सामग्री प्रबंधन को बाहरी बनाएं [Intlayer CMS](/hi/doc/concept/cms) का उपयोग करके।\n","about":"जानें कि अपनी SvelteKit वेबसाइट को बहुभाषी कैसे बनाएं। Server-Side Rendering (SSR) का उपयोग करके इसे अंतरराष्ट्रीयकृत (i18n) और अनुवादित करने के लिए दस्तावेज़ का पालन करें।","url":"https://intlayer.org/hi/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"अंतरराष्ट्रीयकरण, दस्तावेज़ीकरण, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"डेवलपर्स, सामग्री प्रबंधक"}}

Creation:2025-11-20Last update:2026-05-06

GitHub पर एप्लिकेशन टेम्पलेट देखें

इस पृष्ठ के लिए एक एप्लिकेशन टेम्पलेट उपलब्ध है।

शोकेस एप्लिकेशन देखें

यह पृष्ठ टेम्पलेट का लाइव डेमो लिंक करता है।

इस दस्तावेज़ को अपने पसंदीदा AI एसिस्टेंट के साथ संदर्भित करें

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

अपने प्रश्न को पूछें और दस्तावेज़ का सारांश प्राप्त करें, इस पृष्ठ और आपके चुने हुए AI प्रदाता का उपयोग करके

संस्करण इतिहास

"सॉलिड useIntlayer API उपयोग को सीधे प्रॉपर्टी एक्सेस में अपडेट करें"
v8.9.04/5/2026
"init कमांड जोड़ें"
v7.5.930/12/2025
"प्रारंभिक इतिहास"
v7.1.1020/11/2025

इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।

अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखें

इस दस्तावेज़ को संपादित करें

अगर आपके पास इस दस्तावेज़ को सुधारने के लिए कोई विचार है, तो कृपया GitHub पर एक पुल अनुरोध सबमिट करके योगदान देने में संकोच न करें।

दस्तावेज़ के लिए GitHub लिंक

Copy

दस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें

Intlayer का उपयोग करके अपनी SvelteKit वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)

ide.intlayer.org

सामग्री सूची

Intlayer क्या है?

Intlayer एक अभिनव, ओपन-सोर्स अंतरराष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब एप्लिकेशन में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है। यह SvelteKit के Server-Side Rendering (SSR) क्षमताओं के साथ सहजता से काम करता है।

Intlayer के साथ, आप कर सकते हैं:

घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें जो कि कंपोनेंट स्तर पर होते हैं।
मेटाडेटा, रूट्स, और कंटेंट को गतिशील रूप से स्थानीयकृत करें।
स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें।
SEO-अनुकूल अंतरराष्ट्रीयकरण के लिए SvelteKit के SSR का लाभ उठाएं।

SvelteKit एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

शुरू करने के लिए, एक नया SvelteKit प्रोजेक्ट बनाएं। यहाँ अंतिम संरचना है जिसे हम बनाएंगे:

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

चरण 1: Dependencies इंस्टॉल करें

npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: मुख्य i18n पैकेज।
svelte-intlayer: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
vite-intlayer: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।

चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन

अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:

intlayer.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

अपने vite.config.ts को अपडेट करें ताकि इसमें Intlayer प्लगइन शामिल हो। यह प्लगइन आपकी content फ़ाइलों के transpilation को संभालता है।

vite.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // क्रम महत्वपूर्ण है, Intlayer को SvelteKit से पहले रखा जाना चाहिए});

चरण 4: अपनी सामग्री घोषित करें

अपने src फ़ोल्डर में कहीं भी अपनी सामग्री घोषणा फ़ाइलें बनाएं (जैसे, src/lib/content या अपने components के साथ)। ये फ़ाइलें आपके एप्लिकेशन के लिए अनुवाद योग्य सामग्री को परिभाषित करती हैं, प्रत्येक locale के लिए t() फ़ंक्शन का उपयोग करके।

चरण 5: अपने Components में Intlayer का उपयोग करें

अब आप किसी भी Svelte component में useIntlayer फ़ंक्शन का उपयोग कर सकते हैं। यह एक reactive store लौटाता है जो locale बदलने पर स्वचालित रूप से अपडेट हो जाता है। यह फ़ंक्शन वर्तमान locale का स्वचालित रूप से सम्मान करेगा (SSR और client-side navigation दोनों के दौरान)।

नोट: useIntlayer एक Svelte store लौटाता है, इसलिए इसके reactive मान तक पहुँचने के लिए आपको `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: अपने SvelteKit ऐप का अनुवाद कैसे करें – i18n गाइड 2026 description: जानें कि अपनी SvelteKit वेबसाइट को बहुभाषी कैसे बनाएं। Server-Side Rendering (SSR) का उपयोग करके इसे अंतरराष्ट्रीयकृत (i18n) और अनुवादित करने के लिए दस्तावेज़ का पालन करें। keywords:

अंतरराष्ट्रीयकरण
दस्तावेज़ीकरण
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: प्रारंभिक इतिहास

Intlayer का उपयोग करके अपनी SvelteKit वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)

सामग्री सूची

Intlayer क्या है?

Intlayer के साथ, आप कर सकते हैं:

घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें जो कि कंपोनेंट स्तर पर होते हैं।
मेटाडेटा, रूट्स, और कंटेंट को गतिशील रूप से स्थानीयकृत करें।
स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें।
SEO-अनुकूल अंतरराष्ट्रीयकरण के लिए SvelteKit के SSR का लाभ उठाएं।

SvelteKit एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

चरण 1: Dependencies इंस्टॉल करें

npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: मुख्य i18n पैकेज।
svelte-intlayer: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
vite-intlayer: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।

चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन

अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:

intlayer.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

vite.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // क्रम महत्वपूर्ण है, Intlayer को SvelteKit से पहले रखा जाना चाहिए});

चरण 4: अपनी सामग्री घोषित करें

चरण 5: अपने Components में Intlayer का उपयोग करें

प्रीफिक्स का उपयोग करना होगा (जैसे, $content.title)।

src/lib/components/Component.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" वह key है जो चरण 4 में परिभाषित की गई है  const content = useIntlayer("hero-section");</script><!-- सामग्री को सरल सामग्री के रूप में रेंडर करें --><h1>{$content.title}</h1><!-- संपादक का उपयोग करके सामग्री को संपादन योग्य बनाने के लिए --><h1>{@const Title = $content.title}<Title /></h1><!-- सामग्री को स्ट्रिंग के रूप में प्रस्तुत करने के लिए --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(वैकल्पिक) चरण 6: रूटिंग सेट करें

निम्नलिखित चरण दिखाते हैं कि SvelteKit में locale-आधारित रूटिंग कैसे सेट करें। यह आपके URLs को locale प्रीफिक्स (जैसे, /en/about, /fr/about) शामिल करने की अनुमति देता है, जिससे SEO और उपयोगकर्ता अनुभव बेहतर होता है।

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

.└─── src    ├── app.d.ts                  # locale प्रकार को परिभाषित करें    ├── hooks.server.ts           # locale रूटिंग प्रबंधित करें    ├── lib    │   └── getLocale.ts          # हेडर, कुकीज़ से locale जांचें    ├── params    │   └── locale.ts             # locale पैरामीटर को परिभाषित करें    └── routes        ├── [[locale=locale]]     # locale सेट करने के लिए route group में लपेटें        │   ├── +layout.svelte    # रूट के लिए स्थानीय लेआउट        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # फोंट और वैश्विक शैलियों के लिए रूट लेआउट

चरण 7: सर्वर-साइड लोकल डिटेक्शन (हुक्स) को संभालें

SvelteKit में, SSR के दौरान सही सामग्री प्रस्तुत करने के लिए सर्वर को उपयोगकर्ता की लोकल जानकारी जाननी होती है। हम URL या कुकीज़ से लोकल पता लगाने के लिए hooks.server.ts का उपयोग करते हैं।

src/hooks.server.ts बनाएँ या संशोधित करें:

src/hooks.server.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // जांचें कि क्या वर्तमान पथ पहले से ही किसी locale से शुरू होता है (जैसे /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // यदि URL में कोई locale मौजूद नहीं है (जैसे उपयोगकर्ता "/" पर जाता है), तो उन्हें पुनः निर्देशित करें  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // अस्थायी पुनर्निर्देशन    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

फिर, अनुरोध ईवेंट से उपयोगकर्ता की locale प्राप्त करने के लिए एक हेल्पर बनाएं:

src/lib/getLocale.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * अनुरोध ईवेंट से उपयोगकर्ता की भाषा प्राप्त करें। * यह फ़ंक्शन `src/hooks.server.ts` में `handle` हुक में उपयोग किया जाता है। * * यह पहले Intlayer स्टोरेज (कुकीज़ या कस्टम हेडर) से भाषा प्राप्त करने का प्रयास करता है। * यदि भाषा नहीं मिलती है, तो यह ब्राउज़र के "Accept-Language" नेगोशिएशन पर वापस जाता है। * * @param event - SvelteKit से अनुरोध ईवेंट * @returns उपयोगकर्ता की भाषा */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayer स्टोरेज (कुकीज़ या हेडर) से भाषा प्राप्त करने का प्रयास करें  const storedLocale = getLocaleFromStorage({    // SvelteKit कुकीज़ एक्सेस    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKit हेडर एक्सेस    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // ब्राउज़र "Accept-Language" नेगोशिएशन पर फॉलबैक  const negotiatorHeaders: Record<string, string> = {};  // SvelteKit Headers ऑब्जेक्ट को साधारण Record<string, string> में कन्वर्ट करें  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` हेडर से लोकल की जांच करें  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // यदि कोई मैच नहीं मिलता है तो डिफ़ॉल्ट लोकल लौटाएं  return defaultLocale;};

getLocaleFromStorage आपके कॉन्फ़िगरेशन के अनुसार हेडर या कुकी से locale की जांच करेगा। अधिक जानकारी के लिए देखें Configuration।

localeDetector फ़ंक्शन Accept-Language हेडर को प्रोसेस करेगा और सबसे उपयुक्त मैच लौटाएगा।

यदि locale कॉन्फ़िगर नहीं किया गया है, तो हम 404 त्रुटि लौटाना चाहते हैं। इसे आसान बनाने के लिए, हम एक match फ़ंक्शन बना सकते हैं जो जांचे कि locale मान्य है या नहीं:

/src/params/locale.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

नोट: सुनिश्चित करें कि आपकी src/app.d.ts में locale परिभाषा शामिल है:
typescript
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

+layout.svelte फ़ाइल के लिए, हम सब कुछ हटा सकते हैं, केवल स्थैतिक सामग्री रखने के लिए, जो i18n से संबंधित नहीं है:

src/+layout.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

फिर, [[locale=locale]] समूह के अंतर्गत एक नया पेज और लेआउट बनाएं:

src/routes/[[locale=locale]]/+layout.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// सामान्य Load टाइप का उपयोग करेंexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // रूट से locale के साथ Intlayer को इनिशियलाइज़ करें  $effect(() => {      setupIntlayer(data.locale);  });    // लेआउट सामग्री शब्दकोश का उपयोग करें    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // होम कंटेंट डिक्शनरी का उपयोग करें    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(वैकल्पिक) चरण 8: अंतरराष्ट्रीयकृत लिंक

SEO के लिए, यह अनुशंसा की जाती है कि आप अपने routes को locale के साथ prefix करें (जैसे, /en/about, /fr/about)। यह component स्वचालित रूप से किसी भी लिंक के साथ वर्तमान locale को prefix करता है।

src/lib/components/LocalizedLink.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // वर्तमान locale के साथ URL को prefix करने में मदद करता है  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

यदि आप SvelteKit से goto का उपयोग करते हैं, तो आप localized URL पर नेविगेट करने के लिए getLocalizedUrl के साथ वही लॉजिक उपयोग कर सकते हैं:

typescript

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // स्थानीय भाषा के अनुसार /en/about या /fr/about पर नेविगेट करता है

(वैकल्पिक) चरण 9: भाषा स्विचर

उपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए, URL को अपडेट करें।

src/lib/components/LanguageSwitcher.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // स्टोर में locale सेट करेगा और onLocaleChange को ट्रिगर करेगा        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(वैकल्पिक) चरण 10: बैकएंड प्रॉक्सी जोड़ें

अपने SvelteKit एप्लिकेशन में बैकएंड प्रॉक्सी जोड़ने के लिए, आप vite-intlayer प्लगइन द्वारा प्रदान किया गया intlayerProxy फ़ंक्शन उपयोग कर सकते हैं। यह प्लगइन URL, कुकीज़, और ब्राउज़र भाषा प्राथमिकताओं के आधार पर उपयोगकर्ता के लिए सबसे अच्छा locale स्वचालित रूप से पहचान लेगा।

vite.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(वैकल्पिक) चरण 11: intlayer संपादक / CMS सेट करें

intlayer संपादक सेट करने के लिए, आपको intlayer संपादक दस्तावेज़ का पालन करना होगा।

intlayer CMS सेट करने के लिए, आपको intlayer CMS दस्तावेज़ का पालन करना होगा।

intlayer संपादक चयनकर्ता को विज़ुअलाइज़ करने में सक्षम होने के लिए, आपको अपने intlayer कंटेंट में component सिंटैक्स का उपयोग करना होगा।

Component.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component"); // सामग्री को component के रूप में उपयोग करें</script><div>  <!-- सामग्री को सरल सामग्री के रूप में रेंडर करें -->  <h1>{$content.title}</h1>  <!-- सामग्री को एक component के रूप में रेंडर करें (संपादक के लिए आवश्यक) -->  {@const Component = $content.component}<Component /></div>

Git कॉन्फ़िगरेशन

यह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को ignore किया जाए।

.gitignore

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

# Intlayer द्वारा उत्पन्न फ़ाइलों को ignore करें.intlayer

(वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें

यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।

इस प्रक्रिया को आसान बनाने के लिए, 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

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

npx intlayer extract

intlayerCompiler प्लगइन शामिल करने के लिए अपनी vite.config.ts अपडेट करें:

vite.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है ],});

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

npm run build # या npm run dev

आगे बढ़ें

विज़ुअल एडिटर: UI से सीधे अनुवाद संपादित करने के लिए Intlayer Visual Editor को एकीकृत करें।
CMS: अपनी सामग्री प्रबंधन को बाहरी बनाएं Intlayer CMS का उपयोग करके।

Vite और Svelte

Vite और Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // स्टोर में locale सेट करेगा और onLocaleChange को ट्रिगर करेगा\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

Creation:2025-11-20Last update:2026-05-06

GitHub पर एप्लिकेशन टेम्पलेट देखें

इस पृष्ठ के लिए एक एप्लिकेशन टेम्पलेट उपलब्ध है।

शोकेस एप्लिकेशन देखें

यह पृष्ठ टेम्पलेट का लाइव डेमो लिंक करता है।

इस दस्तावेज़ को अपने पसंदीदा AI एसिस्टेंट के साथ संदर्भित करें

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

संस्करण इतिहास

"सॉलिड useIntlayer API उपयोग को सीधे प्रॉपर्टी एक्सेस में अपडेट करें"
v8.9.04/5/2026
"init कमांड जोड़ें"
v7.5.930/12/2025
"प्रारंभिक इतिहास"
v7.1.1020/11/2025

इस पृष्ठ की सामग्री एक AI द्वारा अनुवादित की गई है।

अंग्रेजी में मूल सामग्री के अंतिम संस्करण देखें

इस दस्तावेज़ को संपादित करें

दस्तावेज़ के लिए GitHub लिंक

Copy

दस्तावेज़ का Markdown को क्लिपबोर्ड पर कॉपी करें

Intlayer का उपयोग करके अपनी SvelteKit वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)

ide.intlayer.org

सामग्री सूची

Intlayer क्या है?

Intlayer के साथ, आप कर सकते हैं:

घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें जो कि कंपोनेंट स्तर पर होते हैं।
मेटाडेटा, रूट्स, और कंटेंट को गतिशील रूप से स्थानीयकृत करें।
स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें।
SEO-अनुकूल अंतरराष्ट्रीयकरण के लिए SvelteKit के SSR का लाभ उठाएं।

SvelteKit एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

चरण 1: Dependencies इंस्टॉल करें

npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: मुख्य i18n पैकेज।
svelte-intlayer: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
vite-intlayer: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।

चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन

अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:

intlayer.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

vite.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // क्रम महत्वपूर्ण है, Intlayer को SvelteKit से पहले रखा जाना चाहिए});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // क्रम महत्वपूर्ण है, Intlayer को SvelteKit से पहले रखा जाना चाहिए});

चरण 4: अपनी सामग्री घोषित करें

चरण 5: अपने Components में Intlayer का उपयोग करें

नोट: useIntlayer एक Svelte store लौटाता है, इसलिए इसके reactive मान तक पहुँचने के लिए आपको `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: अपने SvelteKit ऐप का अनुवाद कैसे करें – i18n गाइड 2026 description: जानें कि अपनी SvelteKit वेबसाइट को बहुभाषी कैसे बनाएं। Server-Side Rendering (SSR) का उपयोग करके इसे अंतरराष्ट्रीयकृत (i18n) और अनुवादित करने के लिए दस्तावेज़ का पालन करें। keywords:

अंतरराष्ट्रीयकरण
दस्तावेज़ीकरण
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: प्रारंभिक इतिहास

Intlayer का उपयोग करके अपनी SvelteKit वेबसाइट का अनुवाद करें | अंतरराष्ट्रीयकरण (i18n)

सामग्री सूची

Intlayer क्या है?

Intlayer के साथ, आप कर सकते हैं:

घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों का आसानी से प्रबंधन करें जो कि कंपोनेंट स्तर पर होते हैं।
मेटाडेटा, रूट्स, और कंटेंट को गतिशील रूप से स्थानीयकृत करें।
स्वचालित रूप से उत्पन्न प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें।
SEO-अनुकूल अंतरराष्ट्रीयकरण के लिए SvelteKit के SSR का लाभ उठाएं।

SvelteKit एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

चरण 1: Dependencies इंस्टॉल करें

npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: मुख्य i18n पैकेज।
svelte-intlayer: Svelte/SvelteKit के लिए context providers और stores प्रदान करता है।
vite-intlayer: Vite प्लगइन जो content declarations को build प्रक्रिया के साथ एकीकृत करता है।

चरण 2: अपने प्रोजेक्ट का कॉन्फ़िगरेशन

अपने प्रोजेक्ट रूट में एक config फ़ाइल बनाएं:

intlayer.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

चरण 3: अपने Vite कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

vite.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // क्रम महत्वपूर्ण है, Intlayer को SvelteKit से पहले रखा जाना चाहिए});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // क्रम महत्वपूर्ण है, Intlayer को SvelteKit से पहले रखा जाना चाहिए});

चरण 4: अपनी सामग्री घोषित करें

चरण 5: अपने Components में Intlayer का उपयोग करें

प्रीफिक्स का उपयोग करना होगा (जैसे, $content.title)।

src/lib/components/Component.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" वह key है जो चरण 4 में परिभाषित की गई है  const content = useIntlayer("hero-section");</script><!-- सामग्री को सरल सामग्री के रूप में रेंडर करें --><h1>{$content.title}</h1><!-- संपादक का उपयोग करके सामग्री को संपादन योग्य बनाने के लिए --><h1>{@const Title = $content.title}<Title /></h1><!-- सामग्री को स्ट्रिंग के रूप में प्रस्तुत करने के लिए --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" वह key है जो चरण 4 में परिभाषित की गई है  const content = useIntlayer("hero-section");</script><!-- सामग्री को सरल सामग्री के रूप में रेंडर करें --><h1>{$content.title}</h1><!-- संपादक का उपयोग करके सामग्री को संपादन योग्य बनाने के लिए --><h1>{@const Title = $content.title}<Title /></h1><!-- सामग्री को स्ट्रिंग के रूप में प्रस्तुत करने के लिए --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(वैकल्पिक) चरण 6: रूटिंग सेट करें

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

.└─── src    ├── app.d.ts                  # locale प्रकार को परिभाषित करें    ├── hooks.server.ts           # locale रूटिंग प्रबंधित करें    ├── lib    │   └── getLocale.ts          # हेडर, कुकीज़ से locale जांचें    ├── params    │   └── locale.ts             # locale पैरामीटर को परिभाषित करें    └── routes        ├── [[locale=locale]]     # locale सेट करने के लिए route group में लपेटें        │   ├── +layout.svelte    # रूट के लिए स्थानीय लेआउट        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # फोंट और वैश्विक शैलियों के लिए रूट लेआउट

.└─── src    ├── app.d.ts                  # locale प्रकार को परिभाषित करें    ├── hooks.server.ts           # locale रूटिंग प्रबंधित करें    ├── lib    │   └── getLocale.ts          # हेडर, कुकीज़ से locale जांचें    ├── params    │   └── locale.ts             # locale पैरामीटर को परिभाषित करें    └── routes        ├── [[locale=locale]]     # locale सेट करने के लिए route group में लपेटें        │   ├── +layout.svelte    # रूट के लिए स्थानीय लेआउट        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # फोंट और वैश्विक शैलियों के लिए रूट लेआउट

चरण 7: सर्वर-साइड लोकल डिटेक्शन (हुक्स) को संभालें

src/hooks.server.ts बनाएँ या संशोधित करें:

src/hooks.server.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // जांचें कि क्या वर्तमान पथ पहले से ही किसी locale से शुरू होता है (जैसे /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // यदि URL में कोई locale मौजूद नहीं है (जैसे उपयोगकर्ता "/" पर जाता है), तो उन्हें पुनः निर्देशित करें  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // अस्थायी पुनर्निर्देशन    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // जांचें कि क्या वर्तमान पथ पहले से ही किसी locale से शुरू होता है (जैसे /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // यदि URL में कोई locale मौजूद नहीं है (जैसे उपयोगकर्ता "/" पर जाता है), तो उन्हें पुनः निर्देशित करें  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // अस्थायी पुनर्निर्देशन    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

फिर, अनुरोध ईवेंट से उपयोगकर्ता की locale प्राप्त करने के लिए एक हेल्पर बनाएं:

src/lib/getLocale.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * अनुरोध ईवेंट से उपयोगकर्ता की भाषा प्राप्त करें। * यह फ़ंक्शन `src/hooks.server.ts` में `handle` हुक में उपयोग किया जाता है। * * यह पहले Intlayer स्टोरेज (कुकीज़ या कस्टम हेडर) से भाषा प्राप्त करने का प्रयास करता है। * यदि भाषा नहीं मिलती है, तो यह ब्राउज़र के "Accept-Language" नेगोशिएशन पर वापस जाता है। * * @param event - SvelteKit से अनुरोध ईवेंट * @returns उपयोगकर्ता की भाषा */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayer स्टोरेज (कुकीज़ या हेडर) से भाषा प्राप्त करने का प्रयास करें  const storedLocale = getLocaleFromStorage({    // SvelteKit कुकीज़ एक्सेस    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKit हेडर एक्सेस    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // ब्राउज़र "Accept-Language" नेगोशिएशन पर फॉलबैक  const negotiatorHeaders: Record<string, string> = {};  // SvelteKit Headers ऑब्जेक्ट को साधारण Record<string, string> में कन्वर्ट करें  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` हेडर से लोकल की जांच करें  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // यदि कोई मैच नहीं मिलता है तो डिफ़ॉल्ट लोकल लौटाएं  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * अनुरोध ईवेंट से उपयोगकर्ता की भाषा प्राप्त करें। * यह फ़ंक्शन `src/hooks.server.ts` में `handle` हुक में उपयोग किया जाता है। * * यह पहले Intlayer स्टोरेज (कुकीज़ या कस्टम हेडर) से भाषा प्राप्त करने का प्रयास करता है। * यदि भाषा नहीं मिलती है, तो यह ब्राउज़र के "Accept-Language" नेगोशिएशन पर वापस जाता है। * * @param event - SvelteKit से अनुरोध ईवेंट * @returns उपयोगकर्ता की भाषा */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Intlayer स्टोरेज (कुकीज़ या हेडर) से भाषा प्राप्त करने का प्रयास करें  const storedLocale = getLocaleFromStorage({    // SvelteKit कुकीज़ एक्सेस    getCookie: (name: string) => event.cookies.get(name) ?? null,    // SvelteKit हेडर एक्सेस    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // ब्राउज़र "Accept-Language" नेगोशिएशन पर फॉलबैक  const negotiatorHeaders: Record<string, string> = {};  // SvelteKit Headers ऑब्जेक्ट को साधारण Record<string, string> में कन्वर्ट करें  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // `Accept-Language` हेडर से लोकल की जांच करें  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // यदि कोई मैच नहीं मिलता है तो डिफ़ॉल्ट लोकल लौटाएं  return defaultLocale;};

getLocaleFromStorage आपके कॉन्फ़िगरेशन के अनुसार हेडर या कुकी से locale की जांच करेगा। अधिक जानकारी के लिए देखें Configuration।

localeDetector फ़ंक्शन Accept-Language हेडर को प्रोसेस करेगा और सबसे उपयुक्त मैच लौटाएगा।

/src/params/locale.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

नोट: सुनिश्चित करें कि आपकी src/app.d.ts में locale परिभाषा शामिल है:
typescript
कोड कॉपी करें
कोड को क्लिपबोर्ड पर कॉपी करें
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

src/+layout.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

फिर, [[locale=locale]] समूह के अंतर्गत एक नया पेज और लेआउट बनाएं:

src/routes/[[locale=locale]]/+layout.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// सामान्य Load टाइप का उपयोग करेंexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// सामान्य Load टाइप का उपयोग करेंexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // रूट से locale के साथ Intlayer को इनिशियलाइज़ करें  $effect(() => {      setupIntlayer(data.locale);  });    // लेआउट सामग्री शब्दकोश का उपयोग करें    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // रूट से locale के साथ Intlayer को इनिशियलाइज़ करें  $effect(() => {      setupIntlayer(data.locale);  });    // लेआउट सामग्री शब्दकोश का उपयोग करें    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // होम कंटेंट डिक्शनरी का उपयोग करें    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // होम कंटेंट डिक्शनरी का उपयोग करें    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(वैकल्पिक) चरण 8: अंतरराष्ट्रीयकृत लिंक

src/lib/components/LocalizedLink.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // वर्तमान locale के साथ URL को prefix करने में मदद करता है  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // वर्तमान locale के साथ URL को prefix करने में मदद करता है  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

typescript

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // स्थानीय भाषा के अनुसार /en/about या /fr/about पर नेविगेट करता है

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // स्थानीय भाषा के अनुसार /en/about या /fr/about पर नेविगेट करता है

(वैकल्पिक) चरण 9: भाषा स्विचर

उपयोगकर्ताओं को भाषाएँ बदलने की अनुमति देने के लिए, URL को अपडेट करें।

src/lib/components/LanguageSwitcher.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // स्टोर में locale सेट करेगा और onLocaleChange को ट्रिगर करेगा        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // स्टोर में locale सेट करेगा और onLocaleChange को ट्रिगर करेगा        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(वैकल्पिक) चरण 10: बैकएंड प्रॉक्सी जोड़ें

vite.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(वैकल्पिक) चरण 11: intlayer संपादक / CMS सेट करें

intlayer संपादक सेट करने के लिए, आपको intlayer संपादक दस्तावेज़ का पालन करना होगा।

intlayer CMS सेट करने के लिए, आपको intlayer CMS दस्तावेज़ का पालन करना होगा।

Component.svelte

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component"); // सामग्री को component के रूप में उपयोग करें</script><div>  <!-- सामग्री को सरल सामग्री के रूप में रेंडर करें -->  <h1>{$content.title}</h1>  <!-- सामग्री को एक component के रूप में रेंडर करें (संपादक के लिए आवश्यक) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component"); // सामग्री को component के रूप में उपयोग करें</script><div>  <!-- सामग्री को सरल सामग्री के रूप में रेंडर करें -->  <h1>{$content.title}</h1>  <!-- सामग्री को एक component के रूप में रेंडर करें (संपादक के लिए आवश्यक) -->  {@const Component = $content.component}<Component /></div>

Git कॉन्फ़िगरेशन

यह अनुशंसित है कि Intlayer द्वारा उत्पन्न फ़ाइलों को ignore किया जाए।

.gitignore

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

# Intlayer द्वारा उत्पन्न फ़ाइलों को ignore करें.intlayer

# Intlayer द्वारा उत्पन्न फ़ाइलों को ignore करें.intlayer

(वैकल्पिक) कदम 1 : अपने घटकों की सामग्री निकालें

इसे सेट करने के लिए, आप अपनी 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

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

npx intlayer extract

npx intlayer extract

intlayerCompiler प्लगइन शामिल करने के लिए अपनी vite.config.ts अपडेट करें:

vite.config.ts

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // कंपाइलर प्लगइन जोड़ता है ],});

bash

कोड कॉपी करें

कोड को क्लिपबोर्ड पर कॉपी करें

npm run build # या npm run dev

npm run build # या npm run dev

आगे बढ़ें

विज़ुअल एडिटर: UI से सीधे अनुवाद संपादित करने के लिए Intlayer Visual Editor को एकीकृत करें।
CMS: अपनी सामग्री प्रबंधन को बाहरी बनाएं Intlayer CMS का उपयोग करके।

Vite और Svelte

Vite और Preact