Intlayer के साथ अपनी Astro + Svelte साइट का अनुवाद करें

विषय-सूची

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

एस्ट्रो-आई18एन या आई18नेक्स्ट जैसे मुख्य समाधानों की तुलना में, इंटलेयर एक ऐसा समाधान है जो एकीकृत अनुकूलन के साथ आता है जैसे:

Astro + Svelte में Intlayer को कॉन्फ़िगर करने के लिए चरण-दर-चरण मार्गदर्शिका

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

1. 1

   निर्भरताएँ स्थापित करें

   अपने पसंदीदा पैकेज मैनेजर का उपयोग करके आवश्यक पैकेज स्थापित करें:

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   npm install intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
   
   npx intlayer init
   

   यदि आप अपनी सामग्री का उपयोग स्ट्रिंग एट्रिब्यूट में करना चाहते हैं, जैसे कि alt, title, href, aria-label, आदि, तो आप फ़ंक्शन के मान का उपयोग कर सकते हैं, जैसे:

   tsx

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   <img src={content.image.src.value} alt={content.image.value} />
   <img src={content.image.src.toString()} alt={content.image.toString()} />
   <img src={String(content.image.src)} alt={String(content.image)} />
   

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   npm install intlayer astro-intlayer svelte svelte-intlayer @astrojs/svelte
   

   • intlayer मुख्य पैकेज जो कॉन्फ़िगरेशन प्रबंधन, अनुवाद, सामग्री घोषणा, ट्रांसपाइलेशन और CLI कमांड के लिए i18n टूल प्रदान करता है।

   • astro-intlayer Intlayer को Vite बंडलर के साथ एकीकृत करने के लिए Astro एकीकरण प्लगइन, प्रत्येक अनुरोध के लोकेल को Astro.locals.intlayer में हल करने वाला एक मिडलवेयर, और useIntlayer / useDictionary / useLocale हुक्स शामिल हैं। वही आयात पथ आपके .astro फ्रंटमैट में सर्वर कार्यान्वयन और <script> ब्लॉक में क्लाइंट कार्यान्वयन (vanilla-intlayer द्वारा समर्थित) को हल करता है।

   • svelte मुख्य Svelte पैकेज।

   • svelte-intlayer Svelte अनुप्रयोगों में Intlayer को एकीकृत करने के लिए पैकेज। यह Svelte में अंतर्राष्ट्रीयकरण के लिए setupIntlayer के साथ-साथ useIntlayer और useLocale स्टोर्स (stores) प्रदान करता है।

   • @astrojs/svelte आधिकारिक Astro एकीकरण जो Svelte घटक islands के उपयोग की अनुमति देता है।

2. 2

   अपना प्रोजेक्ट कॉन्फ़िगर करें

   आर्किटेक्चर

   इस आर्किटेक्चर में, astro.config.ts में पंजीकृत intlayer() इंटीग्रेशन आपकी डिक्शनरी बनाता है और एक मिडलवेयर जोड़ता है जो प्रत्येक अनुरोध के लोकेल को हल करता है और इसे Astro.locals.intlayer पर प्रदर्शित करता है। पेज src/pages/[...locale]/ रेस्ट सेगमेंट के तहत रहते हैं, इसलिए डिफ़ॉल्ट लोकेल बिना किसी प्रीफ़िक्स के सर्व किया जाता है और अन्य प्रत्येक लोकेल को अपना समर्पित URL मिलता है। .astro फ़ाइलें सर्वर रेंडर के लिए astro-intlayer के useIntlayer / useLocale हुक्स के साथ कंटेंट को पढ़ती हैं, और Svelte आइलैंड (src/components/svelte/SvelteIsland.svelte) सर्वर द्वारा पहचाने गए लोकेल को एक prop के रूप में प्राप्त करता है और इंटरैक्टिव भाग के लिए इसे svelte-intlayer को सौंपता है। कंटेंट घोषणाएं src/ में आपके कंपोनेंट्स के साथ रखी जाती हैं।

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   .
   ├── src
   │   ├── app.content.ts                # App content declaration
   │   ├── components
   │   │   └── svelte
   │   │       └── SvelteIsland.svelte   # Svelte island (content + locale switcher)
   │   └── pages
   │       ├── [...locale]
   │       │   └── index.astro           # Localized page mounting the island
   │       ├── robots.txt.ts             # robots.txt endpoint
   │       └── sitemap.xml.ts            # Localized sitemap endpoint
   ├── astro.config.ts                   # Astro config with the intlayer() and svelte() integrations
   ├── intlayer.config.ts
   ├── package.json
   └── tsconfig.json
   

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

   अपने एप्लिकेशन की भाषाओं को परिभाषित करने के लिए एक कॉन्फ़िगरेशन फ़ाइल बनाएँ:

   intlayer.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         Locales.HINDI,
         // आपकी अन्य भाषाएँ
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   इस कॉन्फ़िगरेशन फ़ाइल के माध्यम से, आप स्थानीयकृत URL, मिडलवेयर रीडायरेक्ट, कुकी नाम, सामग्री घोषणाओं का स्थान और एक्सटेंशन कॉन्फ़िगर कर सकते हैं, कंसोल में Intlayer लॉग को अक्षम कर सकते हैं, और बहुत कुछ। उपलब्ध मापदंडों की पूरी सूची के लिए, कॉन्फ़िगरेशन दस्तावेज़ देखें।

   कॉन्फ़िगरेशन दस्तावेज़
3. 3

   अपने Astro कॉन्फ़िगरेशन में Intlayer को एकीकृत करें

   अपने Astro कॉन्फ़िगरेशन में intlayer प्लगइन और Svelte एकीकरण जोड़ें।

   astro.config.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   // @ts-check
   
   import { intlayer } from "astro-intlayer";
   import svelte from "@astrojs/svelte";
   import { defineConfig } from "astro/config";
   
   // https://astro.build/config
   export default defineConfig({
     integrations: [intlayer(), svelte()],
   });
   

   intlayer() एकीकरण प्लगइन का उपयोग Intlayer को Astro के साथ एकीकृत करने के लिए किया जाता है। यह सामग्री घोषणा फ़ाइलों के उत्पादन को सुनिश्चित करता है और विकास मोड में उनकी निगरानी करता है। यह Astro एप्लिकेशन के भीतर Intlayer पर्यावरण चर को परिभाषित करता है और प्रदर्शन को अनुकूलित करने के लिए उपनाम (aliases) प्रदान करता है।

   svelte() एकीकरण client:only="svelte" के माध्यम से Svelte घटक islands के उपयोग की अनुमति देता है।

4. 4

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

   अनुवादों को संग्रहीत करने के लिए अपनी सामग्री घोषणाएँ बनाएँ और प्रबंधित करें:

   src/app.content.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   import { t, type Dictionary } from "intlayer";
   
   const appContent = {
     key: "app",
     content: {
       title: t({
         en: "Hello World",
         fr: "Bonjour le monde",
         es: "Hola mundo",
         hi: "नमस्ते दुनिया",
       }),
     },
   } satisfies Dictionary;
   
   export default appContent;
   

   सामग्री घोषणाओं को आपके एप्लिकेशन में कहीं भी परिभाषित किया जा सकता है, बशर्ते वे contentDir (डिफ़ॉल्ट रूप से ./src) में शामिल हों और सामग्री घोषणा फ़ाइल एक्सटेंशन (डिफ़ॉल्ट रूप से .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}) से मेल खाती हों।

   अधिक जानकारी के लिए, सामग्री घोषणा दस्तावेज़ देखें।

   सामग्री घोषणा दस्तावेज़
5. 5

   Astro में सामग्री का उपयोग करना

   astro-intlayer द्वारा निर्यात किए गए हुक्स के साथ .astro फ़ाइलों में अपने शब्दकोशों का उपयोग करें। वे react-intlayer के समान हस्ताक्षर साझा करते हैं: useIntlayer("key") एक शब्दकोश की सामग्री लौटाता है और useLocale() बिना किसी तर्क के वर्तमान लोकेल लौटाता है।

   लोकेल astro-intlayer मिडलवेयर से आता है, जिसे एकीकरण आपके अपने src/middleware.ts से पहले पंजीकृत करता है। यह प्रत्येक अनुरोध के लिए इसे URL उपसर्ग, फिर क्लाइंट द्वारा सहेजे गए लोकेल (कुकी या हेडर), फिर Accept-Language से हल करता है, और इसे Astro.locals.intlayer में संग्रहीत करता है। प्री-रेंडर किए गए पृष्ठ केवल URL का उपयोग करते हैं, क्योंकि वे प्रत्येक आगंतुक के लिए एक बार रेंडर होते हैं।

   आपको हर पृष्ठ पर SEO मेटाडेटा (जैसे hreflang और कैनोनिकल लिंक) भी जोड़ना चाहिए और इंटरैक्टिव क्लाइंट-साइड सामग्री के लिए एक Svelte island पेश करना चाहिए।

   src/pages/[...locale]/index.astro

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   ---
   import { useIntlayer, useLocale } from "astro-intlayer";
   import {
     getLocalizedUrl,
     getPrefix,
     localeMap,
     defaultLocale,
     getHTMLTextDir,
   } from "intlayer";
   import SvelteIsland from "../../components/svelte/SvelteIsland.svelte";
   
   export const getStaticPaths = () => {
     return localeMap(({ locale }) => ({
       params: { locale: getPrefix(locale).localePrefix },
     }));
   };
   
   // मिडलवेयर द्वारा हल किया गया लोकेल (उदा. /hi/about -> 'hi')
   const { locale } = useLocale();
   
   // उस लोकेल के लिए 'app' शब्दकोश की सामग्री
   const { title } = useIntlayer("app");
   ---
   
   <!doctype html>
   <html lang={locale} dir={getHTMLTextDir(locale)}>
     <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width" />
       <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
       <title>{title}</title>
   
       <!-- कैनोनिकल लिंक: खोज इंजनों को इस पृष्ठ के मुख्य संस्करण के बारे में सूचित करता है -->
       <link
         rel="canonical"
         href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
       />
   
       <!-- Hreflang: Google को सभी स्थानीयकृत संस्करणों के बारे में सूचित करता है -->
       {
         localeMap(({ locale: mapLocale }) => (
           <link
             rel="alternate"
             hreflang={mapLocale}
             href={new URL(
               getLocalizedUrl(Astro.url.pathname, mapLocale),
               Astro.site
             )}
           />
         ))
       }
   
       <!-- x-default: फ़ॉलबैक विकल्प जब लोकेल उपयोगकर्ता की भाषा से मेल नहीं खाता -->
       <link
         rel="alternate"
         hreflang="x-default"
         href={new URL(
           getLocalizedUrl(Astro.url.pathname, defaultLocale),
           Astro.site
         )}
       />
     </head>
     <body>
       <!-- Svelte island भाषा स्विचर सहित सभी इंटरैक्टिव सामग्री को रेंडर करता है -->
       <SvelteIsland locale={locale} client:only="svelte" />
     </body>
   </html>
   

   यदि आप अपनी content को string attribute में उपयोग करना चाहते हैं, जैसे alt, title, href, aria-label, आदि, तो आप function के value का उपयोग कर सकते हैं, जैसे:

   tsx

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   <img src={content.image.src.value} alt={content.image.value} />
   <img src={content.image.src.toString()} alt={content.image.toString()} />
   <img src={String(content.image.src)} alt={String(content.image)} />
   

   Astro.locals.intlayer आपके अपने मिडलवेयर और एंडपॉइंट्स के लिए locale, defaultLocale और availableLocales भी प्रदर्शित करता है। एक कॉल के लिए अनुरोध लोकेल को ओवरराइड करने के लिए दूसरे तर्क के रूप में एक लोकेल या चयनकर्ता पास करें (useIntlayer("app", "fr"), useIntlayer("faq", { item: 2 }))।

   रूटिंग सेटअप पर नोट: आपके द्वारा उपयोग की जाने वाली निर्देशिका संरचना intlayer.config.ts में middleware.routing सेटिंग पर निर्भर करती है:

   • prefix-no-default (डिफ़ॉल्ट): डिफ़ॉल्ट भाषा को रूट पर रखता है (कोई उपसर्ग नहीं) और अन्य को उपसर्ग देता है। सभी मामलों को पकड़ने के लिए [...locale] का उपयोग करें।
   • prefix-all: सभी URL को भाषा उपसर्ग प्राप्त होता है। यदि आपको रूट को अलग से संभालने की आवश्यकता नहीं है तो आप मानक [locale] का उपयोग कर सकते हैं।
   • search-param या no-prefix: किसी भाषा निर्देशिका की आवश्यकता नहीं है। भाषा को क्वेरी पैरामीटर या कुकीज़ के माध्यम से संभाला जाता है।

6. 6

   एक Svelte Island घटक बनाएँ

   एक island घटक बनाएँ जो आपके Svelte एप्लिकेशन को लपेटता है। आपको स्टोर्स तक पहुँचने से पहले सर्वर-संसूचित लोकेल के साथ setupIntlayer को कॉल करना होगा।

   src/components/svelte/SvelteIsland.svelte

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   <script lang="ts">
     import { useIntlayer, useLocale, setupIntlayer } from "svelte-intlayer";
     import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";
   
     export let locale: LocalesValues;
   
     setupIntlayer(locale);
   
     const content = useIntlayer("app");
     const { locale: currentLocale, availableLocales, setLocale } = useLocale({
       onLocaleChange: (newLocale: LocalesValues) => {
         window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
       },
     });
   </script>
   
   <div>
     <h1>{$content.title}</h1>
     <!-- भाषा स्विचर सीधे island के भीतर रेंडर किया गया है -->
     <div class="locale-switcher">
       <span class="switcher-label">भाषा बदलें:</span>
       <div class="locale-buttons">
         {#each availableLocales as localeItem}
           <button
             class="locale-btn {localeItem === $currentLocale ? 'active' : ''}"
             disabled={localeItem === $currentLocale}
             on:click={() => setLocale(localeItem)}
           >
             <span class="ls-own-name">{getLocaleName(localeItem)}</span>
             <span class="ls-current-name">{getLocaleName(localeItem, $currentLocale)}</span>
             <span class="ls-code">{localeItem.toUpperCase()}</span>
           </button>
         {/each}
       </div>
     </div>
   </div>
   

   locale प्रॉप को Astro पृष्ठ (सर्वर पहचान) से पारित किया जाता है और setupIntlayer को इनिशियलाइज़ करने के लिए उपयोग किया जाता है, जिससे घटक में सभी स्टोर्स के लिए प्रारंभिक भाषा सेट हो जाती है।

7. 7

   एक भाषा स्विचर जोड़ना

   भाषा स्विचिंग कार्यक्षमता सीधे Svelte island के भीतर एकीकृत है (ऊपर चरण 6 देखें)। यह svelte-intlayer से useLocale स्टोर का उपयोग करता है और उपयोगकर्ता द्वारा एक नई भाषा चुनने पर स्थानीयकृत URL पर नेविगेट करता है:

   src/components/svelte/SvelteIsland.svelte

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   <script lang="ts">
     import { useLocale } from "svelte-intlayer";
     import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";
   
     // चरण 6 से समान लोकेल/setupIntlayer लॉजिक का पुन: उपयोग करें...
   
     const {
       locale: currentLocale,
       availableLocales,
       setLocale,
     } = useLocale({
       onLocaleChange: (newLocale: LocalesValues) => {
         // भाषा परिवर्तन पर स्थानीयकृत URL पर नेविगेट करें
         window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
       },
     });
   </script>
   
   <div class="locale-switcher">
     <span class="switcher-label">भाषा बदलें:</span>
     <div class="locale-buttons">
       {#each availableLocales as localeItem}
         <button
           class="locale-btn {localeItem === $currentLocale ? 'active' : ''}"
           disabled={localeItem === $currentLocale}
           on:click={() => setLocale(localeItem)}
         >
           <span class="ls-own-name">{getLocaleName(localeItem)}</span>
           <span class="ls-current-name">{getLocaleName(localeItem, $currentLocale)}</span>
           <span class="ls-code">{localeItem.toUpperCase()}</span>
         </button>
       {/each}
     </div>
   </div>
   

   निरंतरता पर नोट: window.location.href के माध्यम से रीडायरेक्ट करने के लिए onLocaleChange का उपयोग यह सुनिश्चित करता है कि नया भाषाई URL देखा जाए, जिससे Intlayer मिडलवेयर भाषा कुकी सेट कर सके और भविष्य की यात्राओं में उपयोगकर्ता की वरीयता को याद रख सके।

8. 8

   Sitemap और Robots.txt

   Intlayer आपकी स्थानीयकृत साइटमैप और robots.txt फ़ाइलों को गतिशील रूप से बनाने के लिए उपयोगिताओं की पेशकश करता है।

   साइटमैप (Sitemap)

   Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.

   The Intlayer generated sitemap supports the xhtml:link namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., /about, /about?lang=fr, and /about?lang=es). This ensures search engines correctly index and serve the right language version to the right audience.

   अपने सभी स्थानीयकृत रूट सहित साइटमैप उत्पन्न करने के लिए src/pages/sitemap.xml.ts बनाएँ।

   src/pages/sitemap.xml.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   import type { APIRoute } from "astro";
   import { generateSitemap, type SitemapUrlEntry } from "intlayer";
   
   const pathList: SitemapUrlEntry[] = [
     { path: "/", changefreq: "daily", priority: 1.0 },
     { path: "/about", changefreq: "monthly", priority: 0.7 },
   ];
   
   export const GET: APIRoute = async ({ site }) => {
     const xmlOutput = generateSitemap(pathList, {
       siteUrl: "https://example.com",
     });
   
     return new Response(xmlOutput, {
       headers: { "Content-Type": "application/xml" },
     });
   };
   

   Robots.txt

   खोज इंजन क्रॉलिंग को नियंत्रित करने के लिए src/pages/robots.txt.ts बनाएँ।

   src/pages/robots.txt.ts

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   import type { APIRoute } from "astro";
   import { getMultilingualUrls } from "intlayer";
   
   const getAllMultilingualUrls = (urls: string[]) =>
     urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);
   
   const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);
   
   export const GET: APIRoute = ({ site }) => {
     const robotsTxt = [
       "User-agent: *",
       "Allow: /",
       ...disallowedPaths.map((path) => `Disallow: ${path}`),
       "",
       `Sitemap: ${new URL("/sitemap.xml", site).href}`,
     ].join("\n");
   
     return new Response(robotsTxt, {
       headers: { "Content-Type": "text/plain" },
     });
   };
   

9. 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
   

   अपने घटकों को बदलने और सामग्री निकालने के लिए अपना एप्लिकेशन बिल्ड करें

   bash

   सामग्री कॉपी करें

   कोड कॉपी करें

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

   npm run build # या npm run dev
   

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

Intlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है।

सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं।

{
  // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन
  "include": [
    // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन
    ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकारों को शामिल करें
  ],
}

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

Intlayer द्वारा उत्पन्न फ़ाइलों को अनदेखा करने की अनुशंसा की जाती है। यह उन्हें आपके Git रिपॉजिटरी में कमिट करने से बचाता है।

ऐसा करने के लिए, अपनी .gitignore फ़ाइल में निम्न निर्देश जोड़ें:

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

VS Code एक्सटेंशन

Intlayer के साथ अपने विकास अनुभव को बेहतर बनाने के लिए, आप आधिकारिक Intlayer VS Code एक्सटेंशन स्थापित कर सकते हैं।

यह एक्सटेंशन प्रदान करता है:

• अनुवाद कुंजियों के लिए ऑटो-पूर्णता।
• अनुपलब्ध अनुवादों के लिए वास्तविक समय त्रुटि पहचान।
• अनूदित सामग्री का इनलाइन पूर्वावलोकन।
• आसानी से अनुवाद बनाने और अपडेट करने के लिए त्वरित क्रियाएं।

एक्सटेंशन का उपयोग करने के बारे में अधिक जानकारी के लिए, VS Code एक्सटेंशन दस्तावेज़ देखें।

अपने ज्ञान को और गहरा करें

यदि आप और अधिक सीखना चाहते हैं, तो आप विजुअल एडिटर को भी लागू कर सकते हैं या अपनी सामग्री को बाहरी बनाने के लिए CMS का उपयोग कर सकते हैं।

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