Intlayer के साथ अपनी Astro + Vanilla JS साइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

विषय-सूची

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

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

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

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

1. 1

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

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

   bash

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

   कोड कॉपी करें

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

   npm install intlayer astro-intlayer vanilla-intlayer
   
   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 vanilla-intlayer
   

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

   • astro-intlayer Intlayer को Vite बंडलर के साथ जोड़ने के लिए Astro एकीकरण प्लगइन, साथ ही उपयोगकर्ता की पसंदीदा भाषा का पता लगाने, कुकीज़ प्रबंधित करने और URL रीडायरेक्ट को संभालने के लिए मिडलवेयर शामिल है।

   • vanilla-intlayer Vanilla JavaScript / TypeScript अनुप्रयोगों में Intlayer को एकीकृत करने के लिए एक पैकेज। यह एक Pub/Sub सिंगलटन (IntlayerClient) और कॉलबैक-आधारित सहायक (useIntlayer, useLocale, आदि) प्रदान करता है, जिससे आपके Astro <script> टैग का कोई भी हिस्सा बिना किसी UI फ्रेमवर्क की आवश्यकता के भाषा परिवर्तनों का जवाब दे सकता है।

2. 2

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

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

   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 प्लगइन जोड़ें। Vanilla JS के लिए, किसी अतिरिक्त UI फ्रेमवर्क एकीकरण की आवश्यकता नहीं है।

   astro.config.ts

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

   कोड कॉपी करें

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

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

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

4. 4

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

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

   src/app.content.ts

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

   कोड कॉपी करें

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

   import { t, type Dictionary } from "intlayer";
   
   const appContent = {
     key: "app",
     content: {
       greeting: t({
         en: "Hello World",
         fr: "Bonjour le monde",
         es: "Hola mundo",
         hi: "नमस्ते दुनिया",
       }),
       description: t({
         en: "Welcome to my multilingual Astro site.",
         fr: "Bienvenue sur mon site Astro multilingue.",
         es: "Bienvenido a mi sitio Astro multilingüe.",
         hi: "मेरी बहुभाषी Astro साइट पर आपका स्वागत है।",
       }),
       switchLocale: t({
         en: "Switch language:",
         fr: "Changer de langue :",
         es: "Cambiar idioma:",
         hi: "भाषा बदलें:",
       }),
     },
   } satisfies Dictionary;
   
   export default appContent;
   

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

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

5. 5

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

   Vanilla JS के साथ, सभी सर्वर-साइड रेंडरिंग सीधे getIntlayer का उपयोग करके .astro फ़ाइलों में होती है। इसके बाद, क्लाइंट पर भाषा स्विचिंग सक्षम करने के लिए एक <script> ब्लॉक vanilla-intlayer को इनिशियलाइज़ करता है।

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

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

   कोड कॉपी करें

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

   ---
   import {
     getIntlayer,
     getLocaleFromPath,
     getLocalizedUrl,
     getPrefix,
     getLocaleName,
     localeMap,
     locales,
     defaultLocale,
     getPathWithoutLocale,
     type LocalesValues,
   } from "intlayer";
   
   export const getStaticPaths = () => {
     return localeMap(({ locale }) => ({
       params: { locale: getPrefix(locale).localePrefix },
     }));
   };
   
   const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
   const pathWithoutLocale = getPathWithoutLocale(Astro.url.pathname);
   const { greeting, description, switchLocale } = getIntlayer("app", locale);
   ---
   
   <!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>{greeting}</title>
   
       <!-- कैनोनिकल लिंक -->
       <link
         rel="canonical"
         href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}
       />
   
       <!-- Hreflang लिंक्स -->
       {
         localeMap(({ locale: mapLocale }) => (
           <link
             rel="alternate"
             hreflang={mapLocale}
             href={new URL(
               getLocalizedUrl(Astro.url.pathname, mapLocale),
               Astro.site
             )}
           />
         ))
       }
   
       <link
         rel="alternate"
         hreflang="x-default"
         href={new URL(
           getLocalizedUrl(Astro.url.pathname, defaultLocale),
           Astro.site
         )}
       />
     </head>
     <body>
       <main>
         <h1 id="greeting">{greeting}</h1>
         <p id="description">{description}</p>
   
         <div class="locale-switcher">
           <span class="switcher-label">{switchLocale}</span>
           <div class="locale-buttons">
             {
               locales.map((localeItem) => (
                 <a
                   href={localeItem === locale ? undefined : getLocalizedUrl(pathWithoutLocale, localeItem)}
                   class={`locale-btn ${localeItem === locale ? "active" : ""}`}
                   data-locale={localeItem}
                   aria-disabled={localeItem === locale}
                 >
                   {getLocaleName(localeItem)}
                 </a>
               ))
             }
           </div>
         </div>
       </main>
     </body>
   </html>
   

   यदि आप अपनी सामग्री को string विशेषता में उपयोग करना चाहते हैं, जैसे 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)} />
   

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

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

6. 6

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

   Vanilla JS के साथ Astro में, भाषा स्विचर सर्वर पर नियमित लिंक के रूप में रेंडर किया जाता है और क्लाइंट पर एक <script> ब्लॉक के माध्यम से हाइड्रेट किया जाता है। जब कोई उपयोगकर्ता भाषा लिंक पर क्लिक करता है, तो vanilla-intlayer स्थानीयकृत URL पर नेविगेट करने से पहले setLocale के माध्यम से भाषा कुकी सेट करता है।

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

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

   कोड कॉपी करें

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

   <!-- ऊपर चरण 5 से सर्वर-साइड मार्कअप शामिल करें -->
   
   <script>
     import { installIntlayer, useLocale } from "vanilla-intlayer";
     import { getLocaleFromPath, getLocalizedUrl, type LocalesValues } from "intlayer";
   
     // वर्तमान पथ से लिए गए लोकेल के साथ क्लाइंट पर Intlayer को इनिशियलाइज़ करें
     const locale = getLocaleFromPath(window.location.pathname);
     installIntlayer({ locale: locale as LocalesValues });
   
     const { setLocale } = useLocale({
       onLocaleChange: (newLocale: LocalesValues) => {
         window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
       },
     });
   
     // भाषा स्विचर लिंक पर क्लिक इवेंट बाइंड करें
     const localeLinks = document.querySelectorAll("[data-locale]");
     localeLinks.forEach((link) => {
       link.addEventListener("click", (e) => {
         const localeValue = link.getAttribute("data-locale") as LocalesValues;
         if (localeValue && localeValue !== locale) {
           e.preventDefault();
           setLocale(localeValue);
         }
       });
     });
   </script>
   

   निरंतरता पर नोट: installIntlayer सर्वर-परिभाषित लोकेल के साथ Intlayer सिंगलटन को इनिशियलाइज़ करता है। onLocaleChange के साथ useLocale सुनिश्चित करता है कि मिडलवेयर के माध्यम से नेविगेट करने से पहले भाषा कुकी सेट हो जाए, ताकि भविष्य की यात्राओं में उपयोगकर्ता की भाषा वरीयता याद रखी जाए।

   प्रोग्रेसिव एन्हांसमेंट पर नोट: भाषा स्विचर में लिंक जावास्क्रिप्ट के बिना भी मानक <a> टैग के रूप में काम करेंगे। जब जावास्क्रिप्ट उपलब्ध हो, तो setLocale को कॉल करने से नेविगेट करने से पहले कुकी अपडेट हो जाएगी, यह सुनिश्चित करते हुए कि मिडलवेयर सही रीडायरेक्ट करता है।

7. 7

   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 },
   ];
   
   const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";
   
   export const GET: APIRoute = async ({ site }) => {
     const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });
   
     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" },
     });
   };
   

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

   v9 के बाद से, intlayerCompiler को intlayer प्लगइन में शामिल किया गया है। इसलिए आपको इसे मैन्युअल रूप से जोड़ने की आवश्यकता नहीं है।

   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
   

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 Marketplace से इंस्टॉलेशन

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

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

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

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

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

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