Intlayer का उपयोग करके अपनी Vite और Lit वेबसाइट का अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

विषय सूची

Intlayer क्या है?

Intlayer एक अभिनव, ओपन-सोर्स अंतर्राष्ट्रीयकरण (i18n) लाइब्रेरी है जिसे आधुनिक वेब अनुप्रयोगों में बहुभाषी समर्थन को सरल बनाने के लिए डिज़ाइन किया गया है।

Intlayer के साथ, आप निम्न कर सकते हैं:

• घटक स्तर पर घोषणात्मक शब्दकोशों का उपयोग करके अनुवादों को आसानी से प्रबंधित करें।
• मेटाडेटा, रूट और सामग्री को गतिशील रूप से स्थानीयकृत करें।
• स्वतः जनित प्रकारों के साथ TypeScript समर्थन सुनिश्चित करें, जिससे ऑटो-पूर्णता और त्रुटि पहचान में सुधार होता है।
• उन्नत सुविधाओं का लाभ उठाएं, जैसे गतिशील स्थान (locale) पहचान और स्विचिंग।

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

चरण 1: निर्भरताएँ स्थापित करें (Install Dependencies)

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

npm install intlayer lit-intlayernpm install vite-intlayer --save-devnpx intlayer init

• intlayer

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

• lit-intlayer वह पैकेज जो Intlayer को Lit अनुप्रयोगों के साथ एकीकृत करता है। यह ReactiveController-आधारित हुक (useIntlayer, useLocale, आदि) प्रदान करता है ताकि स्थान बदलने पर LitElement स्वचालित रूप से पुनः रेंडर हो सकें।

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

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

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

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [
      Locales.ENGLISH,
      Locales.FRENCH,
      Locales.SPANISH,
      // आपके अन्य स्थान (locales)
    ],
    defaultLocale: Locales.ENGLISH,
  },
};

export default config;

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

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

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

import { defineConfig } from "vite";
import { intlayer } from "vite-intlayer";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [intlayer()],
});

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

चरण 4: अपने प्रवेश बिंदु (Entry Point) में Intlayer बूटस्ट्रैप करें

किसी भी कस्टम घटकों के पंजीकृत होने से पहले installIntlayer() को कॉल करें ताकि पहला घटक कनेक्ट होने पर वैश्विक स्थान सिंगलटन तैयार हो।

import { installIntlayer } from "lit-intlayer";// किसी भी LitElement के DOM से जुड़ने से पहले कॉल किया जाना चाहिए।installIntlayer();// अपने कस्टम कंपोनेंट्स को इम्पोर्ट और रजिस्टर करें।import "./my-element.js";

यदि आप md() सामग्री घोषणाओं (Markdown) का भी उपयोग करते हैं, तो मार्कडाउन रेंडरर भी स्थापित करें:

import { installIntlayer, installIntlayerMarkdown } from "lit-intlayer";installIntlayer();installIntlayerMarkdown();import "./my-element.js";

चरण 5: अपनी सामग्री घोषित करें (Declare Your Content)

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

import { t, type Dictionary } from "intlayer";

const appContent = {
  key: "app",
  content: {
    title: "Vite + Lit",

    viteLogo: t({
      en: "Vite logo",
      fr: "Logo Vite",
      es: "Logo Vite",
    }),
    litLogo: t({
      en: "Lit logo",
      fr: "Logo Lit",
      es: "Logo Lit",
    }),

    count: t({
      en: "count is {{count}}",
      fr: "le compte est {{count}}",
      es: "el recuento es {{count}}",
    }),

    readTheDocs: t({
      en: "Click on the Vite and Lit logos to learn more",
      fr: "Cliquez sur les logos Vite et Lit pour en savoir plus",
      es: "Haga clic en los logotipos de Vite y Lit para obtener más información",
    }),
  },
} satisfies Dictionary;

export default appContent;

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

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

चरण 6: अपने LitElement में Intlayer का उपयोग करें

LitElement के अंदर useIntlayer का उपयोग करें। यह एक ReactiveController प्रॉक्सी देता है जो सक्रिय स्थान बदलने पर स्वचालित रूप से पुनः रेंडरिंग ट्रिगर करता है - किसी अतिरिक्त सेटअप की आवश्यकता नहीं है।

import { LitElement, html } from "lit";import { customElement, property } from "lit/decorators.js";import { useIntlayer } from "lit-intlayer";@customElement("my-element")export class MyElement extends LitElement {  @property({ type: Number })  count = 0;  // useIntlayer खुद को ReactiveController के रूप में पंजीकृत करता है।  // स्थान बदलने पर घटक स्वचालित रूप से पुनः रेंडर होता है।  private content = useIntlayer(this, "app");  override render() {    const { content } = this;    return html`      <h1>${content.title}</h1>      <img src="/vite.svg" alt=${content.viteLogo.value} />      <img src="/lit.svg" alt=${content.litLogo.value} />      <button @click=${() => this.count++}>        ${content.count({ count: this.count })}      </button>      <p>${content.readTheDocs}</p>    `;  }}

जब आपको नेटिव HTML एट्रिब्यूट (जैसे alt, aria-label, title) में अनुवादित स्ट्रिंग की आवश्यकता हो, तो लीफ नोड पर .value कॉल करें:

typescript

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

कोड कॉपी करें

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

html`<img alt=${content.viteLogo.value} />`;html`<img alt=${content.viteLogo.toString()} />`;html`<img alt=${String(content.viteLogo)} />`;

(वैकल्पिक) चरण 7: अपनी सामग्री की भाषा बदलें

अपनी सामग्री की भाषा बदलने के लिए, useLocale कंट्रोलर द्वारा प्रदान की गई setLocale विधि का उपयोग करें।

import { LitElement, html } from "lit";import { customElement } from "lit/decorators.js";import { getLocaleName } from "intlayer";import { useLocale } from "lit-intlayer";@customElement("locale-switcher")export class LocaleSwitcher extends LitElement {  private locale = useLocale(this);  private _onChange(e: Event) {    const select = e.target as HTMLSelectElement;    this.locale.setLocale(select.value as any);  }  override render() {    return html`      <select @change=${this._onChange}>        ${this.locale.availableLocales.map(          (loc) => html`            <option value=${loc} ?selected=${loc === this.locale.locale}>              ${getLocaleName(loc)}            </option>          `        )}      </select>    `;  }}

(वैकल्पिक) चरण 8: मार्कडाउन और HTML सामग्री रेंडर करें

Intlayer md() और html() सामग्री घोषणाओं का समर्थन करता है। लिट में, संकलित आउटपुट को unsafeHTML निर्देश के माध्यम से कच्चे HTML के रूप में इंजेक्ट किया जाता है।

अपने घटक में संकलित HTML रेंडर करें:

import { LitElement, html } from "lit";import { customElement } from "lit/decorators.js";import { unsafeHTML } from "lit/directives/unsafe-html.js";import { useIntlayer } from "lit-intlayer";import { compileMarkdown } from "lit-intlayer/markdown";@customElement("my-element")export class MyElement extends LitElement {  private content = useIntlayer(this, "app");  override render() {    return html`      <div class="edit-note">        ${unsafeHTML(compileMarkdown(String(this.content.editNote)))}      </div>    `;  }}

TIP

String(content.editNote) IntlayerNode पर toString() कॉल करता है, जो कच्चा मार्कडाउन स्ट्रिंग देता है। HTML स्ट्रिंग प्राप्त करने के लिए इसे compileMarkdown पर पास करें, फिर इसे लिट के unsafeHTML निर्देश के साथ रेंडर करें।

(वैकल्पिक) चरण 9: अपने एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ें

प्रत्येक भाषा के लिए अद्वितीय रूट बनाने के लिए (SEO के लिए उपयोगी), आप Intlayer के localeMap / localeFlatMap सहायकों के साथ क्लाइंट-साइड राउटर का उपयोग कर सकते हैं, और सर्वर-साइड स्थान पहचान के लिए intlayerProxy Vite प्लगइन का उपयोग कर सकते हैं।

सबसे पहले, अपने Vite कॉन्फ़िगरेशन में intlayerProxy जोड़ें:

ध्यान दें कि उत्पादन में intlayerProxy का उपयोग करने के लिए, आपको vite-intlayer को devDependencies से dependencies में ले जाने की आवश्यकता है।

import { defineConfig } from "vite";
import { intlayer, intlayerProxy } from "vite-intlayer";

export default defineConfig({
  plugins: [intlayer(), intlayerProxy()],
});

(वैकल्पिक) चरण 10: स्थान बदलने पर URL बदलें

स्थान बदलने पर ब्राउज़र URL अपडेट करने के लिए, स्थान स्विचर के साथ useRewriteURL का उपयोग करें:

import { LitElement, html } from "lit";import { customElement } from "lit/decorators.js";import { getLocaleName, getLocalizedUrl } from "intlayer";import { useLocale, useRewriteURL } from "lit-intlayer";@customElement("locale-switcher")export class LocaleSwitcher extends LitElement {  private locale = useLocale(this);  // स्थान बदलने पर स्वचालित रूप से वर्तमान URL को फिर से लिखता है।  private _rewriteURL = useRewriteURL(this);  private _onChange(e: Event) {    const select = e.target as HTMLSelectElement;    this.locale.setLocale(select.value as any);  }  override render() {    return html`      <select @change=${this._onChange}>        ${this.locale.availableLocales.map(          (loc) => html`            <option value=${loc} ?selected=${loc === this.locale.locale}>              ${getLocaleName(loc)}            </option>          `        )}      </select>    `;  }}

(वैकल्पिक) चरण 11: HTML भाषा और दिशा विशेषताओं को स्विच करें

अभिगम्यता और SEO के लिए वर्तमान स्थान से मिलान करने के लिए <html> टैग के lang और dir विशेषताओं को अपडेट करें।

import { LitElement, html } from "lit";import { customElement } from "lit/decorators.js";import { getHTMLTextDir } from "intlayer";import { useLocale } from "lit-intlayer";@customElement("my-element")export class MyElement extends LitElement {  private locale = useLocale(this, {    onLocaleChange: (loc) => {      document.documentElement.lang = loc;      document.documentElement.dir = getHTMLTextDir(loc);    },  });  override render() {    return html`<!-- आपकी सामग्री -->`;  }}

(वैकल्पिक) चरण 12: अपने कंपोनेंट्स की सामग्री निकालें (Extract content)

यदि आपके पास मौजूदा कोडबेस है, तो हजारों फ़ाइलों को बदलना समय लेने वाला हो सकता है।

इस प्रक्रिया को आसान बनाने के लिए, Intlayer आपके घटकों को बदलने और सामग्री निकालने के लिए एक कंपाइलर / एक्सट्रैक्टर का प्रस्ताव करता है।

इसे सेट करने के लिए, आप अपनी intlayer.config.ts फ़ाइल में एक compiler अनुभाग जोड़ सकते हैं:

import { type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... आपके कॉन्फ़िगरेशन का शेष भाग  compiler: {    /**     * इंगित करता है कि क्या कंपाइलर सक्षम होना चाहिए।     */    enabled: true,    /**     * आउटपुट फ़ाइलों का पथ परिभाषित करता है     */    output: ({ fileName, extension }) => `./${fileName}${extension}`,    /**     * इंगित करता है कि क्या घटकों को बदलने के बाद सहेजा जाना चाहिए।     * इस तरह, कंपाइलर को ऐप को बदलने के लिए केवल एक बार चलाया जा सकता है, और फिर इसे हटाया जा सकता है।     */    saveComponents: false,    /**     * शब्दकोश कुंजी उपसर्ग (Dictionary key prefix)     */    dictionaryKeyPrefix: "",  },};export default config;

(वैकल्पिक) साइटमैप और robots.txt (बिल्ड-टाइम जनरेशन)

Intlayer generateSitemap और getMultilingualUrls उपलब्ध कराता है ताकि आप क्रॉलर-तैयार बहुभाषी sitemap.xml और robots.txt बनाकर public/ में स्वचालित लिख सकें। आमतौर पर Vite से पहले छोटा Node स्क्रिप्ट चलाएँ (जैसे npm predev / prebuild)।

साइटमैप

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

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

{  "compilerOptions": {    // ...    "experimentalDecorators": true,    "useDefineForClassFields": false,  },  "include": ["src", ".intlayer/**/*.ts"],}

experimentalDecorators और useDefineForClassFields: false डेकोरेटर समर्थन के लिए लिट द्वारा आवश्यक हैं।

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

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

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

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

VS Code एक्सटेंशन

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

VS Code मार्केटप्लेस से स्थापित करें

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

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

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

और आगे बढ़ें

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