Author:
    Aymeric PINEAU
    Creation:2025-11-20Last update:2026-06-23

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

    ide.intlayer.org
    intlayer-sveltekit-template.vercel.app

    सामग्री सूची

    विकल्पों पर इन्टलेयर क्यों?

    svelte-i18n या i18next जैसे मुख्य समाधानों की तुलना में, Intlayer एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

    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 है जो हम बनाएंगे:

    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
      npx intlayer init --interactive
      --interactive ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो intlayer-cli init का उपयोग करें।
      यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:
      bash
      npm install intlayer svelte-intlayer
npm install vite-intlayer --save-dev
      • 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 कंपोनेंट में useIntlayer फ़ंक्शन का उपयोग कर सकते हैं। यह एक रिएक्टिव स्टोर रिटर्न करता है जो जब लोकेल बदलता है तो स्वचालित रूप से अपडेट हो जाता है। फ़ंक्शन स्वचालित रूप से वर्तमान लोकेल को सम्मानित करता है (SSR और क्लाइंट-साइड नेविगेशन दोनों के दौरान)।

      प्रीफिक्स का उपयोग करना होगा (जैसे, $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 स्वचालित रूप से पहचान लेगा।

      Intlayer v9 के बाद से, intlayerProxy() को सीधे intlayer() प्लगइन में बंडल किया गया है और routing.enableProxy विकल्प (true डिफ़ॉल्ट रूप से) के माध्यम से डिफ़ॉल्ट रूप से सक्षम किया गया है। इसे नीचे दिखाए गए अनुसार अलग से रजिस्टर करना अब वैकल्पिक है — यह पिछड़ी संगतता के लिए और उन सेटअप के लिए रखा गया है जिन्हें प्लगइन क्रम को नियंत्रित करने की आवश्यकता है। ऑप्ट आउट करने के लिए routing.enableProxy: false सेट करें। v9 रिलीज़ नोट्स देखें।
      vite.config.ts
      import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";
import { sveltekit } from "@sveltejs/kit/vite";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
    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>

    12. अपने घटकों की सामग्री निकालें

      वैकल्पिक

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

      इस प्रक्रिया को आसान बनाने के लिए, 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
      v9 के बाद से, intlayerCompiler को intlayer plugin में शामिल किया गया है। इसलिए आपको इसे manually जोड़ने की आवश्यकता नहीं है।

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

      vite.config.ts
      import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

export default defineConfig({
  plugins: [
    intlayer({
      proxy: {
        ignore: (req) => req.url?.startsWith("/api"),
      },
    }),
  ],
});
      bash
      npm run build # या npm run dev

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

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

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

    आगे बढ़ें

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

    अक्सर पूछे जाने वाले प्रश्न

    • svelte-i18n और typesafe-i18n: स्टोर-आधारित कैटलॉग।
    • Paraglide: संदेश कंपाइलर।
    • Intlayer: घटक के बगल में घोषणा, SSR और SSG समर्थन, पूर्ण Svelte प्रतिक्रियाशीलता और AI अनुवाद।

    Intlayer क्यों चुनें देखें।

    नेमस्पेस-आधारित समाधानों की तुलना में बहुत कम, क्योंकि एक पृष्ठ कभी भी उस कैटलॉग को डाउनलोड नहीं करता है जिसे वह रेंडर नहीं करता है। बिल्ड-टाइम कंपाइलर useIntlayer कॉल को घटक द्वारा उपयोग की जाने वाली सटीक प्रविष्टियों से बदल देता है, और गतिशील शब्दकोश शेष को प्रति लोकेल विभाजित करते हैं, जिससे बंडल 50% तक कम हो जाता है। बंडल अनुकूलन और बेंचमार्क देखें।

    काफी हद तक हाँ। Svelte I18n माइग्रेशन गाइड का पालन करें।

    हाँ। sync JSON plugin आपकी /messages/{locale}/{namespace}.json फ़ाइलों को सत्य का स्रोत बनाए रखता है और दोनों दिशाओं में उनसे Intlayer dictionaries बनाता है। sync PO plugin gettext catalogs के लिए भी ऐसा ही करता है, और per locale files आपको locales को एक फ़ाइल में समूहीकृत करने के बजाय भाषा के अनुसार content को विभाजित करने देते हैं।

    नहीं। npx intlayer extract चलाएं और Intlayer आपकी फ़ाइलों को पढ़ता है, उपयोगकर्ता के अनुकूल स्ट्रिंग्स निकालता है, और प्रत्येक के बगल में एक .content फ़ाइल लिखता है, जिससे आप कैटलॉग में मैन्युअल रूप से कॉपी करने के बजाय एक diff की समीक्षा करते हैं।

    पूर्ण स्वचालन के लिए, Intlayer Compiler बिल्ड समय पर यही काम करता है: प्रत्येक परिवर्तन पर कोड स्कैन करता है, शब्दकोश उत्पन्न करता है और HMR के साथ सिंक करता है।

    कंपाइलर को चालू करने से पहले दो सीमाएं जानने योग्य हैं। यह स्थिर विश्लेषण द्वारा काम करता है, इसलिए जो स्ट्रिंग्स केवल रनटाइम पर मौजूद होती हैं, जैसे कि API त्रुटि कोड या CMS फ़ील्ड, वे पहुंच से बाहर रहती हैं। और इसे className="active" या स्थिति कोड जैसे एप्लिकेशन लॉजिक से उपयोगकर्ता के सामने आने वाले टेक्स्ट को अलग करना होगा, जिसके लिए एक बड़े कोडबेस में कुछ एनोटेशन की आवश्यकता होती है। extract command आपको लूप में रखकर दोनों से बचाता है।

    पाँच उपकरण, सभी वैकल्पिक:

    • VS Code extension: useIntlayer कुंजी से उसे घोषित करने वाली सामग्री फ़ाइल पर जाएं, घटकों से सामग्री निकालें, और कमांड पैलेट या Intlayer टैब से build, fill, test, push और pull चलाएं।
    • LSP server: LSP का समर्थन करने वाले किसी भी संपादक में समान सुविधा, परिभाषा पर जाएं, अनुवादित मान का पूर्वावलोकन देखें, और कुंजी पूर्णता प्राप्त करें। i18next, react-i18next, next-intl और use-intl कॉल का भी समर्थन करता है।
    • MCP server: Cursor, VS Code, Claude Desktop, Claude Code और ChatGPT के लिए Intlayer दस्तावेज़ और CLI प्रदान करता है।
    • Agent skills: केंद्रित कौशल जैसे intlayer-config, intlayer-cli और intlayer-content।
    • ESLint plugin: no-raw-text नियम हार्डकोडेड स्ट्रिंग्स को चिह्नित करता है।
    Vite और SvelteVite और Preact