Intlayer का उपयोग करके अपनी Vite और Vue वेबसाइट का अनुवाद करें | Internationalization (i18n)

विषय-सूची

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

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

पूर्ण व्यू कवरेज

</AccordionGroup>

Vite और Vue एप्लिकेशन में Intlayer सेटअप करने के लिए चरण-दर-चरण मार्गदर्शिका

वीडियोकोडडेमो

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-vite-vue-template.vercel.app

Open embedded page in fullscreen

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

1. 1

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

   npm का उपयोग करके आवश्यक पैकेज स्थापित करें:

   bash

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

   कोड कॉपी करें

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

   npx intlayer init --interactive
   

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

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

   bash

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

   कोड कॉपी करें

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

   npm install intlayer vue-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer

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

   • vue-intlayer वह पैकेज जो Intlayer को Vue एप्लिकेशन के साथ एकीकृत करता है। यह Vue अंतरराष्ट्रीयकरण के लिए संदर्भ प्रदाता और कॉम्पोज़ेबल्स प्रदान करता है।

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

2. 2

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

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

   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;
   

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

3. 3

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

   अपने कॉन्फ़िगरेशन में intlayer प्लगइन जोड़ें।

   vite.config.ts

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

   कोड कॉपी करें

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

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [vue(), intlayer()],
   });
   

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

4. 4

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

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

   src/helloWorld.content.ts

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

   कोड कॉपी करें

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

   import { t, type Dictionary } from "intlayer";
   
   const helloWorldContent = {
     key: "helloworld",
     content: {
       count: t({ en: "count is ", fr: "le compte est ", es: "el recuento es " }),
       edit: t({
         en: "Edit <code>components/HelloWorld.vue</code> and save to test HMR",
         fr: "Éditez <code>components/HelloWorld.vue</code> et enregistrez pour tester HMR",
         es: "Edita <code>components/HelloWorld.vue</code> y guarda para probar HMR",
       }),
       checkOut: t({ en: "जांचें ", fr: "Vérifiez ", es: "Compruebe " }),
       officialStarter: t({
         en: ", आधिकारिक Vue + Vite स्टार्टर",
         fr: ", le starter officiel Vue + Vite",
         es: ", el starter oficial Vue + Vite",
       }),
       learnMore: t({
         en: "Vue के लिए IDE समर्थन के बारे में अधिक जानें ",
         fr: "En savoir plus sur le support IDE pour Vue dans le ",
         es: "Aprenda más sobre el soporte IDE para Vue en el ",
       }),
       vueDocs: t({
         en: "Vue दस्तावेज़ स्केलिंग अप गाइड",
         fr: "Vue Docs Scaling up Guide",
         es: "Vue Docs Scaling up Guide",
       }),
       readTheDocs: t({
         en: "Vite और Vue लोगो पर क्लिक करके अधिक जानें",
         fr: "Cliquez sur les logos Vite et Vue pour en savoir plus",
         es: "Haga clic en los logotipos de Vite y Vue para obtener más información",
       }),
     },
   } satisfies Dictionary;
   
   export default helloWorldContent;
   

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

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

5. 5

   अपने कोड में Intlayer का उपयोग करें

   अपने Vue एप्लिकेशन में Intlayer के अंतरराष्ट्रीयकरण फीचर्स का उपयोग करने के लिए, आपको सबसे पहले अपने मुख्य फ़ाइल में Intlayer सिंगलटन इंस्टेंस को रजिस्टर करना होगा। यह चरण महत्वपूर्ण है क्योंकि यह आपके एप्लिकेशन के सभी कंपोनेंट्स को अंतरराष्ट्रीयकरण संदर्भ प्रदान करता है, जिससे अनुवाद आपके कंपोनेंट ट्री में कहीं भी सुलभ हो जाते हैं।

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

   कोड कॉपी करें

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

   import { createApp } from "vue";
   import { intlayer } from "vue-intlayer";
   import App from "./App.vue";
   import "./style.css";
   
   const app = createApp(App);
   
   // शीर्ष स्तर पर प्रदाता को इंजेक्ट करें
   app.use(intlayer);
   
   // एप्लिकेशन को माउंट करें
   app.mount("#app");
   

   अपने एप्लिकेशन में कंटेंट डिक्शनरीज़ तक पहुंचने के लिए एक मुख्य Vue कंपोनेंट बनाएं और useIntlayer कॉम्पोज़ेबल्स का उपयोग करें:

   अपने एप्लिकेशन भर में अपने कंटेंट डिक्शनरीज़ को एक्सेस करें एक मुख्य Vue कंपोनेंट बनाकर और useIntlayer composables का उपयोग करके:

   src/HelloWord.vue

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

   कोड कॉपी करें

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

   <script setup lang="ts">
   import { ref } from "vue";
   import { useIntlayer } from "vue-intlayer";
   
   defineProps({
     msg: String,
   });
   
   const {
     count,
     edit,
     checkOut,
     officialStarter,
     learnMore,
     vueDocs,
     readTheDocs,
   } = useIntlayer("helloworld");
   const countRef = ref(0);
   </script>
   
   <template>
     <h1>{{ msg }}</h1>
   
     <div class="card">
       <button type="button" @click="countRef++">
         <count />
         {{ countRef }}
       </button>
       <p v-html="edit"></p>
     </div>
   
     <p>
       <checkOut />
       <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
         >create-vue</a
       >, <officialStarter />
     </p>
     <p>
       <learnMore />
       <a
         href="https://vuejs.org/guide/scaling-up/tooling.html#ide-support"
         target="_blank"
         ><vueDocs /></a
       >.
     </p>
     <p class="read-the-docs"><readTheDocs /></p>
     <p class="read-the-docs">{{ readTheDocs }}</p>
   </template>
   

   यदि आपका ऐप पहले से मौजूद है, तो आप Intlayer Compiler का उपयोग कर सकते हैं, साथ ही extract command का भी उपयोग कर सकते हैं, हजारों components को एक सेकंड में बदलने के लिए।

   Intlayer में कंटेंट तक पहुंचना

   Intlayer आपकी सामग्री तक पहुंचने के लिए विभिन्न API प्रदान करता है:

   • कंपोनेंट-आधारित सिंटैक्स (अनुशंसित): कंटेंट को Intlayer नोड के रूप में रेंडर करने के लिए <myContent /> या <Component :is="myContent" /> सिंटैक्स का उपयोग करें। यह विज़ुअल एडिटर और CMS के साथ सहजता से एकीकृत होता है।

   • स्ट्रिंग-आधारित सिंटैक्स: कंटेंट को प्लेन टेक्स्ट के रूप में रेंडर करने के लिए {{ myContent }} का उपयोग करें, बिना विज़ुअल एडिटर सपोर्ट के।

   • रॉ HTML सिंटैक्स: <div v-html="myContent" /> का उपयोग बिना विज़ुअल एडिटर समर्थन के सामग्री को कच्चे HTML के रूप में रेंडर करने के लिए करें।

   • डिस्ट्रक्चरिंग सिंटैक्स: useIntlayer कॉम्पोज़ेबल सामग्री के साथ एक प्रॉक्सी लौटाता है। इस प्रॉक्सी को डिस्ट्रक्चर करके सामग्री तक पहुंचा जा सकता है जबकि प्रतिक्रियाशीलता बनी रहती है।

     • const content = useIntlayer("myContent"); का उपयोग करें और {{ content.myContent }} / <content.myContent />।
     • या const { myContent } = useIntlayer("myContent"); का उपयोग करें और {{ myContent}} / <myContent/> से सामग्री को डिस्ट्रक्चर करें।
6. 6

   अपनी सामग्री की भाषा बदलें

   वैकल्पिक

   अपनी सामग्री की भाषा बदलने के लिए, आप useLocale कॉम्पोज़ेबल द्वारा प्रदान किया गया setLocale फ़ंक्शन उपयोग कर सकते हैं। यह फ़ंक्शन एप्लिकेशन की लोकल सेट करने और सामग्री को तदनुसार अपडेट करने की अनुमति देता है।

   भाषाओं के बीच स्विच करने के लिए एक कंपोनेंट बनाएं:

   src/components/LocaleSwitcher.vue

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

   कोड कॉपी करें

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

   <template>
     <div class="locale-switcher">
       <select v-model="selectedLocale" @change="changeLocale">
         <option v-for="loc in availableLocales" :key="loc" :value="loc">
           {{ getLocaleName(loc) }}
         </option>
       </select>
     </div>
   </template>
   
   <script setup lang="ts">
   import { ref, watch } from "vue";
   import { getLocaleName } from "intlayer";
   import { useLocale } from "vue-intlayer";
   
   // लोकल जानकारी और setLocale फ़ंक्शन प्राप्त करें
   const { locale, availableLocales, setLocale } = useLocale();
   
   // चयनित लोकल को ref के साथ ट्रैक करें
   const selectedLocale = ref(locale.value);
   
   // चयन बदलने पर लोकल अपडेट करें
   const changeLocale = () => setLocale(selectedLocale.value);
   
   // selectedLocale को वैश्विक locale के साथ सिंक में रखें
   watch(
     () => locale.value,
     (newLocale) => {
       selectedLocale.value = newLocale;
     }
   );
   </script>
   

   फिर, इस कॉम्पोनेंट का उपयोग अपने App.vue में करें:

   src/App.vue

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

   कोड कॉपी करें

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

   <script setup lang="ts">
   import { useIntlayer } from "vue-intlayer";
   import HelloWorld from "@components/HelloWorld.vue";
   import LocaleSwitcher from "@components/LocaleSwitcher.vue";
   import { ref, watch } from "vue";
   
   const content = useIntlayer("app"); // संबंधित intlayer घोषणा फ़ाइल बनाएं
   </script>
   
   <template>
     <div>
       <LocaleSwitcher />
       <a href="https://vite.dev" target="_blank">
         <img src="/vite.svg" class="logo" :alt="content.viteLogo" />
       </a>
       <a href="https://vuejs.org/" target="_blank">
         <img src="./assets/vue.svg" class="logo vue" :alt="content.vueLogo" />
       </a>
     </div>
     <HelloWorld :msg="content.title" />
   </template>
   

7. 7

   अपने एप्लिकेशन में स्थानीयकृत राउटिंग जोड़ें

   वैकल्पिक

   Vue एप्लिकेशन में स्थानीयकृत राउटिंग जोड़ना आमतौर पर Vue Router का उपयोग करके लोकल प्रीफिक्स के साथ किया जाता है। यह प्रत्येक भाषा के लिए अद्वितीय रूट बनाता है, जो SEO और SEO-अनुकूल URL के लिए उपयोगी है।

   उदाहरण:

   plaintext

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

   कोड कॉपी करें

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

   - https://example.com/about
   - https://example.com/es/about
   - https://example.com/fr/about
   

   सबसे पहले, Vue Router इंस्टॉल करें:

   bash

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

   कोड कॉपी करें

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

   npm install vue-router
   npx intlayer init
   

   फिर, एक राउटर कॉन्फ़िगरेशन बनाएं जो स्थानीय-आधारित रूटिंग को संभालता है:

   src/router/index.ts

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

   कोड कॉपी करें

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

   import {
     localeFlatMap,
     type Locale,
   } from 'intlayer';
   import { createIntlayerClient } from "vue-intlayer";
   import { createRouter, createWebHistory } from 'vue-router';
   import HomeView from './views/home/HomeView.vue';
   import RootView from './views/root/Root.vue';
   
   /**
    * स्थानीय-विशिष्ट पथ और मेटाडेटा के साथ रूट्स घोषित करें।
    */
   const routes = localeFlatMap(({ urlPrefix, locale }) => [
     {
       path: `${urlPrefix}/`,
       name: `Root-${locale}`,
       component: RootView,
       meta: {
         locale,
       },
     },
     {
       path: `${urlPrefix}/home`,
       name: `Home-${locale}`,
       component: HomeView,
       meta: {
         locale,
       },
     },
   ]);
   
   // राउटर इंस्टेंस बनाएं
   export const router = createRouter({
     history: createWebHistory(),
     routes,
   });
   
   // स्थानीयता हैंडलिंग के लिए नेविगेशन गार्ड जोड़ें
   router.beforeEach((to, _from, next) => {
     const client = createIntlayerClient();
   
     const metaLocale = to.meta.locale as Locale;
   
     // रूट मेटा में परिभाषित स्थानीयता का पुन: उपयोग करें
     client.setLocale(metaLocale);
     next();
   });
   

   राउटर में रूट की पहचान करने के लिए नाम का उपयोग किया जाता है। यह सभी रूट्स में अद्वितीय होना चाहिए ताकि संघर्ष से बचा जा सके और उचित नेविगेशन और लिंकिंग सुनिश्चित हो सके।

   फिर, अपने main.js फ़ाइल में राउटर को पंजीकृत करें:

   src/main.ts

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

   कोड कॉपी करें

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

   import { createApp } from "vue";
   import App from "./App.vue";
   import { router } from "./router";
   import "./style.css";
   
   const app = createApp(App);
   
   // ऐप में राउटर जोड़ें
   app.use(router);
   
   // ऐप को माउंट करें
   app.mount("#app");
   

   फिर अपने App.vue फ़ाइल को अपडेट करें ताकि RouterView कॉम्पोनेंट को रेंडर किया जा सके। यह कॉम्पोनेंट वर्तमान रूट के लिए मेल खाने वाले कॉम्पोनेंट को प्रदर्शित करेगा।

   src/App.vue

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

   कोड कॉपी करें

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

   <script setup lang="ts">
   import LocaleSwitcher from "@components/LocaleSwitcher.vue";
   </script>
   
   <template>
     <nav>
       <LocaleSwitcher />
     </nav>
     <RouterView />
   </template>
   

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

   ध्यान दें कि production में intlayerProxy का उपयोग करने के लिए, आपको vite-intlayer package को devDependencies से dependencies में स्थानांतरित करना होगा।

   Intlayer v9 के बाद से, intlayerProxy() को सीधे intlayer() प्लगइन में बंडल किया गया है और routing.enableProxy विकल्प के माध्यम से डिफ़ॉल्ट रूप से सक्षम किया गया है (डिफ़ॉल्ट रूप से true)। इसे अलग से रजिस्टर करना जैसा कि नीचे दिखाया गया है अब वैकल्पिक है — इसे पिछड़े संगतता के लिए और उन सेटअप के लिए रखा गया है जिन्हें प्लगइन ऑर्डर को नियंत्रित करने की आवश्यकता है। routing.enableProxy: false सेट करके ऑप्ट आउट करें। v9 रिलीज़ नोट्स देखें।

   vite.config.ts

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

   कोड कॉपी करें

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

   import { defineConfig } from "vite";
   import vue from "@vitejs/plugin-vue";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [
       vue(),
       intlayer({
         proxy: {
           ignore: (req) => req.url?.startsWith("/api"),
         },
       }),
     ],
   });
   

8. 8

   जब स्थानीयता बदलती है तो URL बदलें

   वैकल्पिक

   जब उपयोगकर्ता भाषा बदलता है तो URL को स्वचालित रूप से अपडेट करने के लिए, आप LocaleSwitcher घटक को Vue Router का उपयोग करने के लिए संशोधित कर सकते हैं:

   src/components/LocaleSwitcher.vue

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

   कोड कॉपी करें

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

   <template>
     <div class="locale-switcher">
       <select v-model="selectedLocale" @change="changeLocale">
         <option v-for="loc in availableLocales" :key="loc" :value="loc">
           {{ getLocaleName(loc) }}
         </option>
       </select>
     </div>
   </template>
   
   <script setup lang="ts">
   import { ref, watch } from "vue";
   import { useRouter } from "vue-router";
   import { Locales, getLocaleName, getLocalizedUrl } from "intlayer";
   import { useLocale } from "vue-intlayer";
   
   // Vue Router प्राप्त करें
   const router = useRouter();
   
   // लोकल जानकारी और setLocale फ़ंक्शन प्राप्त करें
   const { locale, availableLocales, setLocale } = useLocale({
     onLocaleChange: (newLocale) => {
       // वर्तमान रूट प्राप्त करें और एक स्थानीयकृत URL बनाएं
       const currentPath = router.currentRoute.value.fullPath;
       const localizedPath = getLocalizedUrl(currentPath, newLocale);
   
       // पेज को रीलोड किए बिना स्थानीयकृत रूट पर नेविगेट करें
       router.push(localizedPath);
     },
   });
   
   // चयनित लोकल को ref के साथ ट्रैक करें
   const selectedLocale = ref(locale.value);
   
   // चयन बदलने पर स्थानीयता अपडेट करें
   const changeLocale = () => {
     setLocale(selectedLocale.value);
   };
   
   // selectedLocale को वैश्विक स्थानीयता के साथ सिंक में रखें
   watch(
     () => locale.value,
     (newLocale) => {
       selectedLocale.value = newLocale;
     }
   );
   </script>
   

   टिप: बेहतर SEO और पहुँच के लिए, स्थानीयकृत पृष्ठों से लिंक करने के लिए <a href="/fr/home" hreflang="fr"> जैसे टैग का उपयोग करें, जैसा कि चरण 10 में दिखाया गया है। इससे खोज इंजन भाषा-विशिष्ट URL को सही ढंग से खोज और अनुक्रमित कर सकते हैं। SPA व्यवहार बनाए रखने के लिए, आप @click.prevent के साथ डिफ़ॉल्ट नेविगेशन को रोक सकते हैं, useLocale का उपयोग करके स्थानीयता बदल सकते हैं, और Vue Router का उपयोग करके प्रोग्रामेटिक रूप से नेविगेट कर सकते हैं।

   html

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

   कोड कॉपी करें

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

   <ol>
     <li>
       <a
         hreflang="x-default"
         aria-label="अंग्रेज़ी में स्विच करें"
         target="_self"
         aria-current="page"
         href="/doc/get-started"
       >
         <div>
           <span dir="ltr" lang="en">English</span>
           <span>अंग्रेज़ी</span>
           <span>EN</span>
         </div>
       </a>
     </li>
     <li>
       <a
         hreflang="es"
         aria-label="स्पेनिश में स्विच करें"
         target="_self"
         href="/es/doc/get-started"
       >
         <div>
           <span dir="ltr" lang="es">Español</span>
           <span>स्पेनिश</span>
           <span>ES</span>
         </div>
       </a>
     </li>
   </ol>
   

9. 9

   HTML भाषा और दिशा विशेषताओं को स्विच करें

   वैकल्पिक

   जब आपका एप्लिकेशन कई भाषाओं का समर्थन करता है, तो वर्तमान लोकल के अनुसार <html> टैग के lang और dir विशेषताओं को अपडेट करना महत्वपूर्ण होता है। ऐसा करने से सुनिश्चित होता है कि:

   • पहुँच: स्क्रीन रीडर और सहायक तकनीकें सही lang एट्रिब्यूट पर निर्भर करती हैं ताकि सामग्री को सही ढंग से उच्चारित और व्याख्यायित किया जा सके।
   • पाठ रेंडरिंग: dir (दिशा) एट्रिब्यूट सुनिश्चित करता है कि पाठ सही क्रम में प्रदर्शित हो (जैसे, अंग्रेज़ी के लिए बाएं से दाएं, अरबी या हिब्रू के लिए दाएं से बाएं), जो पठनीयता के लिए आवश्यक है।
   • एसईओ: सर्च इंजन lang एट्रिब्यूट का उपयोग आपके पृष्ठ की भाषा निर्धारित करने के लिए करते हैं, जिससे खोज परिणामों में सही स्थानीयकृत सामग्री प्रदर्शित हो सके।

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

   src/composables/useI18nHTMLAttributes.ts

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

   कोड कॉपी करें

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

   import { watch } from "vue";
   import { useLocale } from "vue-intlayer";
   import { getHTMLTextDir } from "intlayer";
   
   /**
    * एक कॉम्पोजेबल जो वर्तमान लोकल के आधार पर HTML <html> एलिमेंट के `lang` और `dir` एट्रिब्यूट्स को अपडेट करता है।
    *
    * @example
    * // अपने App.vue या किसी ग्लोबल कॉम्पोनेंट में
    * import { useI18nHTMLAttributes } from './composables/useI18nHTMLAttributes'
    *
    * useI18nHTMLAttributes()
    */
   export const useI18nHTMLAttributes = () => {
     const { locale } = useLocale();
   
     // जब भी लोकल बदलता है, HTML एट्रिब्यूट्स को अपडेट करें
     watch(
       () => locale.value,
       (newLocale) => {
         if (!newLocale) return;
   
         // भाषा एट्रिब्यूट को अपडेट करें
         document.documentElement.lang = newLocale;
   
         // टेक्स्ट दिशा सेट करें (अधिकांश भाषाओं के लिए ltr, अरबी, हिब्रू आदि के लिए rtl)
         document.documentElement.dir = getHTMLTextDir(newLocale);
       },
       { immediate: true }
     );
   };
   

   अपने App.vue या किसी वैश्विक कॉम्पोनेंट में इस कॉम्पोज़ेबल का उपयोग करें:

   src/App.vue

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

   कोड कॉपी करें

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

   <script setup lang="ts">
   import { useI18nHTMLAttributes } from "@composables/useI18nHTMLAttributes";
   
   // वर्तमान लोकल के आधार पर HTML विशेषताओं को लागू करें
   useI18nHTMLAttributes();
   </script>
   
   <template>
     <!-- आपका ऐप टेम्पलेट -->
   </template>
   

10. 10

    एक स्थानीयकृत लिंक कॉम्पोनेंट बनाना

    वैकल्पिक

    यह सुनिश्चित करने के लिए कि आपके एप्लिकेशन की नेविगेशन वर्तमान लोकल का सम्मान करती है, आप एक कस्टम Link कॉम्पोनेंट बना सकते हैं। यह कॉम्पोनेंट स्वचालित रूप से आंतरिक URL को वर्तमान भाषा के साथ प्रीफिक्स करता है। उदाहरण के लिए, जब एक फ्रेंच-भाषी उपयोगकर्ता "About" पेज के लिंक पर क्लिक करता है, तो वे /about के बजाय /fr/about पर पुनः निर्देशित होते हैं।

    यह व्यवहार कई कारणों से उपयोगी है:

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

    src/components/Link.vue

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

    कोड कॉपी करें

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

    <template>
      <a :href="localizedHref" v-bind="$attrs">
        <slot />
      </a>
    </template>
    
    <script setup lang="ts">
    import { computed } from "vue";
    import { getLocalizedUrl } from "intlayer";
    import { useLocale } from "vue-intlayer";
    
    const props = defineProps({
      href: {
        type: String,
        required: true,
      },
    });
    
    const { locale } = useLocale();
    
    // जांचें कि लिंक बाहरी है या नहीं
    const isExternalLink = computed(() => /^https?:\/\//.test(props.href || ""));
    
    // आंतरिक लिंक के लिए स्थानीयकृत href बनाएं
    const localizedHref = computed(() =>
      isExternalLink.value ? props.href : getLocalizedUrl(props.href, locale.value)
    );
    </script>
    

    Vue Router के साथ उपयोग के लिए, एक राउटर-विशिष्ट संस्करण बनाएं:

    src/components/RouterLink.vue

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

    कोड कॉपी करें

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

    <template>
      <router-link :to="localizedTo" v-bind="$attrs">
        <slot />
      </router-link>
    </template>
    
    <script setup lang="ts">
    import { computed } from "vue";
    import { getLocalizedUrl } from "intlayer";
    import { useLocale } from "vue-intlayer";
    
    const props = defineProps({
      to: {
        type: [String, Object],
        required: true,
      },
    });
    
    const { locale } = useLocale();
    
    // router-link के लिए localized to-prop बनाएं
    const localizedTo = computed(() => {
      if (typeof props.to === "string") {
        return getLocalizedUrl(props.to, locale.value);
      } else {
        // यदि 'to' एक ऑब्जेक्ट है, तो path प्रॉपर्टी को स्थानीयकृत करें
        return {
          ...props.to,
          path: getLocalizedUrl(props.to.path ?? "/", locale.value),
        };
      }
    });
    </script>
    

    अपने एप्लिकेशन में इन कॉम्पोनेंट्स का उपयोग करें:

    src/App.vue

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

    कोड कॉपी करें

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

    <template>
      <div>
        <!-- Vue राउटर  -->
        <RouterLink to="/">रूट</RouterLink>
        <RouterLink to="/home">होम</RouterLink>
        <!-- अन्य -->
        <Link href="/">रूट</Link>
        <Link href="/home">होम</Link>
      </div>
    </template>
    
    <script setup lang="ts">
    import Link from "@components/Link.vue";
    import RouterLink from "@components/RouterLink.vue";
    </script>
    

11. 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 में शामिल किया गया है। इसलिए आपको इसे manually add करने की आवश्यकता नहीं है।

    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 कॉन्फ़िगरेशन

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

साइटमैप

Intlayer का साइटमैप जनरेटर आपकी लोकेल सेटिंग का सम्मान करता है और क्रॉलर के लिए मेटाडेटा जोड़ता है।

जनरेट साइटमैप xhtml:link (hreflang) नेमस्पेस को सपोर्ट करता है। सपाट URL सूची के बजाय Intlayer हर पृष्ठ के सभी भाषा संस्करणों को दोतरफा जोड़ता है (जैसे /about, /fr/about, या /about?lang=fr - रूटिंग मोड पर निर्भर)।

Robots.txt

getMultilingualUrls का उपयोग करें ताकि Disallow नियम संवेदनशील पथों के सभी बहुभाषी रूपों को कवर करें।

1. प्रोजेक्ट रूट में generate-seo.mjs जोड़ें

import fs from "fs";
import path from "path";
import { fileURLToPath } from "url";
import { generateSitemap, getMultilingualUrls } from "intlayer";

const __dirname = path.dirname(fileURLToPath(import.meta.url));

const SITE_URL = (process.env.SITE_URL || "http://localhost:5173").replace(
  /\/$/,
  ""
);

const pathList = [
  { path: "/", changefreq: "daily", priority: 1.0 },
  { path: "/about", changefreq: "monthly", priority: 0.7 },
];

const sitemapXml = generateSitemap(pathList, { siteUrl: SITE_URL });
fs.writeFileSync(path.join(__dirname, "public", "sitemap.xml"), sitemapXml);

const getAllMultilingualUrls = (urls) =>
  urls.flatMap((url) => Object.values(getMultilingualUrls(url)));

const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);

const robotsTxt = [
  "User-agent: *",
  "Allow: /",
  ...disallowedPaths.map((path) => `Disallow: ${path}`),
  "",
  `Sitemap: ${SITE_URL}/sitemap.xml`,
].join("\n");

fs.writeFileSync(path.join(__dirname, "public", "robots.txt"), robotsTxt);

console.log("SEO files generated successfully.");

स्क्रिप्ट को intlayer इम्पोर्ट करने के लिए पैकेज इंस्टॉल होना चाहिए। प्रोडक्शन में SITE_URL सेट करें (जैसे CI में)।

Node ESM के लिए generate-seo.mjs पसंद करें। generate-seo.js के लिए package.json में "type": "module" या अन्य ESM सेटअप करें।

2. Vite से पहले स्क्रिप्ट चलाएँ

{
  "scripts": {
    "dev": "vite",
    "prebuild": "node generate-seo.mjs",
    "build": "vite build",
    "preview": "vite preview"
  }
}

pnpm या yarn हो तो कमांड अनुकूलित करें। CI से भी कॉल कर सकते हैं।

TypeScript को कॉन्फ़िगर करें

Intlayer module augmentation का उपयोग करता है ताकि TypeScript के लाभ प्राप्त कर सकें और अपने codebase को मजबूत बना सकें।

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

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

Git Configuration

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

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

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

VS Code Extension

Intlayer के साथ अपने development experience को improve करने के लिए, आप official Intlayer VS Code Extension install कर सकते हैं।

VS Code Marketplace से Install करें

यह extension निम्नलिखित प्रदान करता है:

• Autocompletion translation keys के लिए।
• Real-time error detection missing translations के लिए।
• Inline previews translated content के।
• Quick actions translations को easily create और update करने के लिए।

Extension के उपयोग के बारे में अधिक विवरण के लिए, Intlayer VS Code Extension documentation को देखें।

आगे बढ़ें

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