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

विषय-सूची

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

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

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

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

1. 1

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

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

   bash

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

   कोड कॉपी करें

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

   npx intlayer init --interactive
   

   --interactive ध्वज (flag) वैकल्पिक है। यदि आप एक AI एजेंट हैं तो intlayer-cli init का उपयोग करें।

   यह कमांड आपके एनवायरनमेंट को डिटेक्ट करेगी और आवश्यक पैकेज इंस्टॉल करेगी। उदाहरण के लिए:

   bash

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

   कोड कॉपी करें

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

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

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

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

   • vue मुख्य Vue पैकेज।

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

   • @astrojs/vue आधिकारिक Astro एकीकरण जो Vue घटक 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 प्लगइन और Vue एकीकरण जोड़ें।

   astro.config.ts

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

   कोड कॉपी करें

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

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

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

   vue() एकीकरण client:only="vue" के माध्यम से Vue घटक 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 से निर्यात किए गए मुख्य सहायकों का उपयोग करके शब्दकोशों का उपयोग कर सकते हैं। आपको हर पृष्ठ पर SEO मेटाडेटा (जैसे hreflang और कैनोनिकल लिंक) भी जोड़ना चाहिए और इंटरैक्टिव क्लाइंट-साइड सामग्री के लिए एक Vue island पेश करना चाहिए।

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

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

   कोड कॉपी करें

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

   ---
   import {
     getIntlayer,
     getLocaleFromPath,
     getLocalizedUrl,
     getHTMLTextDir,
     getPrefix,
     localeMap,
     defaultLocale,
     type LocalesValues,
   } from "intlayer";
   import VueIsland from "../../components/vue/VueIsland.vue";
   
   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>
       <!-- Vue island भाषा स्विचर सहित सभी इंटरैक्टिव सामग्री को रेंडर करता है -->
       <VueIsland locale={locale} client:only="vue" />
     </body>
   </html>
   

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

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

6. 6

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

   एक island घटक बनाएँ जो आपके Vue एप्लिकेशन को लपेटता है और सर्वर-संसूचित लोकेल प्राप्त करता है। आपको किसी भी कंपोजेबल्स का उपयोग करने से पहले installIntlayer को कॉल करके अपने Vue इंस्टेंस में Intlayer प्लगइन पंजीकृत करना होगा।

   src/components/vue/VueIsland.vue

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

   कोड कॉपी करें

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

   <script setup lang="ts">
   import { ref, getCurrentInstance } from "vue";
   import { useIntlayer, useLocale, installIntlayer } from "vue-intlayer";
   import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";
   
   const props = defineProps<{ locale: LocalesValues }>();
   
   const app = getCurrentInstance()?.appContext.app;
   if (app) {
     installIntlayer(app, { locale: props.locale });
   }
   
   const {
     locale: currentLocale,
     availableLocales,
     setLocale,
   } = useLocale({
     onLocaleChange: (newLocale: LocalesValues) => {
       window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
     },
   });
   
   const count = ref(0);
   const { title } = useIntlayer("app");
   </script>
   
   <template>
     <div>
       <h1>{{ title }}</h1>
       <!-- भाषा स्विचर सीधे island टेम्पलेट के भीतर रेंडर किया गया है -->
       <div class="locale-switcher">
         <span class="switcher-label">भाषा बदलें:</span>
         <div class="locale-buttons">
           <button
             v-for="localeItem in availableLocales"
             :key="localeItem"
             :class="['locale-btn', { active: localeItem === currentLocale }]"
             :disabled="localeItem === currentLocale"
             @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>
         </div>
       </div>
     </div>
   </template>
   

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

7. 7

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

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

   src/components/vue/VueIsland.vue

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

   कोड कॉपी करें

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

   <script setup lang="ts">
   import { useLocale } from "vue-intlayer";
   import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";
   
   // चरण 6 से समान प्रॉप/सेटअप ऐप लॉजिक का पुन: उपयोग करें...
   
   const {
     locale: currentLocale,
     availableLocales,
     setLocale,
   } = useLocale({
     onLocaleChange: (newLocale: LocalesValues) => {
       // भाषा परिवर्तन पर स्थानीयकृत URL पर नेविगेट करें
       window.location.href = getLocalizedUrl(window.location.pathname, newLocale);
     },
   });
   </script>
   
   <template>
     <div class="locale-switcher">
       <span class="switcher-label">भाषा बदलें:</span>
       <div class="locale-buttons">
         <button
           v-for="localeItem in availableLocales"
           :key="localeItem"
           :class="['locale-btn', { active: localeItem === currentLocale }]"
           :disabled="localeItem === currentLocale"
           @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>
       </div>
     </div>
   </template>
   

   निरंतरता पर नोट: 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 },
   ];
   
   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 प्लगइन में शामिल किया गया है। इसलिए आपको इसे मैन्युअली जोड़ने की आवश्यकता नहीं है।

   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 का उपयोग कर सकते हैं।

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