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

विषय-सूची

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

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

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

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

1. 1

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

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

   bash

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

   कोड कॉपी करें

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

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

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

   html

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

   कोड कॉपी करें

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

   <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 preact preact-intlayer @astrojs/preact
   

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

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

   • preact मुख्य Preact पैकेज - React का एक तेज़, हल्का विकल्प।

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

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

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 प्लगइन और Preact एकीकरण जोड़ें।

   astro.config.ts

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

   कोड कॉपी करें

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

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

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

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

4. 4

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

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

   src/app.content.tsx

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

   कोड कॉपी करें

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

   import { h } from "preact";
   import { t, type Dictionary } from "intlayer";
   import type { ComponentChildren } from "preact";
   
   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}) से मेल खाती हों।

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

   यदि आपकी सामग्री फ़ाइलों में TSX कोड शामिल है, तो आपको import { h } from "preact"; आयात करने की आवश्यकता हो सकती है या यह सुनिश्चित करना होगा कि आपका JSX प्रैग्मा (pragma) Preact के लिए सही ढंग से कॉन्फ़िगर किया गया है।

5. 5

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

   आप सीधे अपने .astro फ़ाइलों में intlayer से निर्यात किए गए मुख्य सहायकों का उपयोग करके शब्दकोशों का उपयोग कर सकते हैं। आपको हर पृष्ठ पर SEO मेटाडेटा (जैसे hreflang और कैनोनिकल लिंक) भी जोड़ना चाहिए और इंटरैक्टिव क्लाइंट-साइड सामग्री के लिए एक Preact island पेश करना चाहिए।

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

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

   कोड कॉपी करें

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

   ---
   import {
     getIntlayer,
     getLocaleFromPath,
     getLocalizedUrl,
     getHTMLTextDir,
     getPrefix,
     localeMap,
     defaultLocale,
     type LocalesValues,
   } from "intlayer";
   import { PreactIsland } from "../../components/preact/ReactIsland";
   
   export const getStaticPaths = () => {
     return localeMap(({ locale }) => ({
       params: { locale: getPrefix(locale).localePrefix },
     }));
   };
   
   const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;
   const { title } = 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>{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>
       <!-- Preact island भाषा स्विचर सहित सभी इंटरैक्टिव सामग्री को रेंडर करता है -->
       <PreactIsland locale={locale} client:only="preact" />
     </body>
   </html>
   

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

   html

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

   कोड कॉपी करें

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

   <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

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

   एक island घटक बनाएँ जो आपके Preact एप्लिकेशन को लपेटता है और सर्वर-संसूचित लोकेल प्राप्त करता है:

   src/components/preact/PreactIsland.tsx

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

   कोड कॉपी करें

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

   /** @jsxImportSource preact */
   import { IntlayerProvider, useIntlayer } from "preact-intlayer";
   import { type LocalesValues } from "intlayer";
   import type { FunctionalComponent } from "preact";
   import { LocaleSwitcher } from "./LocaleSwitcher";
   
   const App: FunctionalComponent = () => {
     const { title } = useIntlayer("app");
   
     return (
       <div>
         <h1>{title}</h1>
         <LocaleSwitcher />
       </div>
     );
   };
   
   export const PreactIsland: FunctionalComponent<{ locale: LocalesValues }> = ({
     locale,
   }) => (
     <IntlayerProvider locale={locale}>
       <App />
     </IntlayerProvider>
   );
   

   locale प्रॉप को Astro पृष्ठ (सर्वर पहचान) से IntlayerProvider को पारित किया जाता है, जिससे यह पेड़ के भीतर सभी Preact हुक के लिए प्रारंभिक भाषा बन जाती है।

   नोट: Preact में, className के बजाय HTML class प्रॉपर्टी का उपयोग किया जाता है।

7. 7

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

   एक Preact LocaleSwitcher घटक बनाएँ जो उपलब्ध भाषाओं को पढ़ता है और जब उपयोगकर्ता एक नई भाषा चुनता है तो स्थानीयकृत URL पर नेविगेट करता है:

   src/components/preact/LocaleSwitcher.tsx

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

   कोड कॉपी करें

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

   /** @jsxImportSource preact */
   import { useLocale } from "preact-intlayer";
   import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";
   import type { FunctionalComponent } from "preact";
   
   export const LocaleSwitcher: FunctionalComponent = () => {
     const { locale, availableLocales, setLocale } = useLocale({
       onLocaleChange: (newLocale: LocalesValues) => {
         // भाषा परिवर्तन पर स्थानीयकृत URL पर नेविगेट करें
         window.location.href = getLocalizedUrl(
           window.location.pathname,
           newLocale
         );
       },
     });
   
     return (
       <div class="locale-switcher">
         <span class="switcher-label">भाषा बदलें:</span>
         <div class="locale-buttons">
           {availableLocales.map((localeItem) => (
             <button
               key={localeItem}
               onClick={() => setLocale(localeItem)}
               class={`locale-btn ${localeItem === locale ? "active" : ""}`}
               disabled={localeItem === locale}
             >
               <span class="ls-own-name">{getLocaleName(localeItem)}</span>
               <span class="ls-current-name">
                 {getLocaleName(localeItem, locale)}
               </span>
               <span class="ls-code">{localeItem.toUpperCase()}</span>
             </button>
           ))}
         </div>
       </div>
     );
   };
   

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

   LocaleSwitcher को IntlayerProvider के भीतर रेंडर किया जाना चाहिए - इसे अपने island घटक में उपयोग करें (जैसा कि चरण 6 में दिखाया गया है)।

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 },
   ];
   
   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" },
     });
   };
   

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
   

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

   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 module augmentation का उपयोग करके TypeScript के लाभों को प्राप्त करता है और आपके codebase को मजबूत बनाता है।

Intlayer अपने कोडबेस को अधिक मजबूत बनाने के लिए TypeScript का लाभ उठाने के लिए मॉड्यूल ऑगमेंटेशन (module augmentation) का उपयोग करता है। सुनिश्चित करें कि आपके TypeScript कॉन्फ़िगरेशन में स्वतः उत्पन्न प्रकार शामिल हैं और Preact के लिए कॉन्फ़िगर किया गया है:

{
  compilerOptions: {
    // ...
    jsx: "react-jsx",
    jsxImportSource: "preact", // Preact 10+ के लिए अनुशंसित
  },
  "include": [
    // ... आपका मौजूदा TypeScript कॉन्फ़िगरेशन
    ".intlayer/**/*.ts", // स्वतः उत्पन्न प्रकारों को शामिल करें
  ],
}

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

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

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

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

VS Code एक्सटेंशन

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

VS Code Marketplace से इंस्टॉलेशन

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

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

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

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

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