Intlayer के साथ अपना Vite and Solid अनुवाद करें | अंतर्राष्ट्रीयकरण (i18n)

VideoCodeDemo

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-vite-solid.vercel.app

Open embedded page in fullscreen

Table of Contents

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

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

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

Table of Contents

1. 1

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

   npm का उपयोग करके आवश्यक पैकेज इंस्टॉल करें:

   bash

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

   कोड कॉपी करें

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

   npx intlayer init --interactive
   

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

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

   bash

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

   कोड कॉपी करें

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

   npm install intlayer solid-intlayer
   npm install vite-intlayer --save-dev
   

   • intlayer

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

   • solid-intlayer वह पैकेज जो Intlayer को Solid एप्लिकेशन के साथ एकीकृत करता है। यह Solid अंतरराष्ट्रीयकरण के लिए संदर्भ प्रदाता और हुक प्रदान करता है।

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

2. 2

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

   आर्किटेक्चर

   इस आर्किटेक्चर में, solid-intlayer Solid ट्री को रैप करने के लिए index.tsx में माउंटेड IntlayerProvider प्रदान करता है। सामग्री घोषणाएं src/ में घटकों के साथ रहती हैं।

   bash

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

   कोड कॉपी करें

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

   .
   ├── src
   │   ├── app.content.ts
   │   ├── App.css
   │   ├── App.tsx                       # Main Solid component
   │   ├── index.css
   │   ├── index.tsx                     # Entry point with IntlayerProvider
   │   └── vite-env.d.ts
   ├── index.html
   ├── intlayer.config.ts
   ├── package.json
   ├── tsconfig.json
   └── vite.config.ts
   

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

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

   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 react from "@vitejs/plugin-react-swc";
   import { intlayer } from "vite-intlayer";
   
   // https://vitejs.dev/config/
   export default defineConfig({
     plugins: [react(), intlayer()],
   });
   

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

4. 4

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

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

   src/app.content.tsx

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

   कोड कॉपी करें

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

   import { t, type Dictionary } from "intlayer";
   
   const appContent = {
     key: "app",
     content: {},
   } satisfies Dictionary;
   
   export default appContent;
   

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

5. 5

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

   अपने एप्लिकेशन में सामग्री शब्दकोशों तक पहुंचें:

   src/App.tsx

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

   कोड कॉपी करें

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

   import { createSignal, type Component } from "solid-js";
   import solidLogo from "./assets/solid.svg";
   import viteLogo from "/vite.svg";
   import "./App.css";
   import { IntlayerProvider, useIntlayer } from "solid-intlayer";
   
   const AppContent: Component = () => {
     const [count, setCount] = createSignal(0);
     const content = useIntlayer("app");
   
     return (
       <>
         <div>
           <a href="https://vitejs.dev" target="_blank">
             <img src={viteLogo} class="logo" alt={content.viteLogo.value} />
           </a>
           <a href="https://www.solidjs.com/" target="_blank">
             <img
               src={solidLogo}
               class="logo solid"
               alt={content.solidLogo.value}
             />
           </a>
         </div>
         <h1>{content.title}</h1>
         <div class="card">
           <button onClick={() => setCount((count) => count + 1)}>
             {content.count({ count: count() })}
           </button>
           <p>{content.edit}</p>
         </div>
         <p class="read-the-docs">{content.readTheDocs}</p>
       </>
     );
   };
   
   const App: Component = () => (
     <IntlayerProvider>
       <AppContent />
     </IntlayerProvider>
   );
   
   export default App;
   

   Solid में, useIntlayer एक accessor फ़ंक्शन (उदाहरण: `content.) लौटाता है। आपको रिएक्टिव सामग्री तक पहुंचने के लिए इस फ़ंक्शन को कॉल करना होगा।

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

   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)}" />
   

6. 6

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

   वैकल्पिक

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

   src/components/LocaleSwitcher.tsx

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

   कोड कॉपी करें

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

   import { type Component, For } from "solid-js";
   import { Locales } from "intlayer";
   import { useLocale } from "solid-intlayer";
   
   const LocaleSwitcher: Component = () => {
     const { locale, setLocale, availableLocales } = useLocale();
   
     return (
       <select
         value={locale()}
         onChange={(e) => setLocale(e.currentTarget.value as Locales)}
       >
         <For each={availableLocales}>
           {(loc) => (
             <option value={loc} selected={loc === locale()}>
               {loc}
             </option>
           )}
         </For>
       </select>
     );
   };
   

7. 7

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

   वैकल्पिक

   इस चरण का उद्देश्य प्रत्येक भाषा के लिए अद्वितीय रूट बनाना है। यह SEO और SEO-अनुकूल URL के लिए उपयोगी है। उदाहरण:

   plaintext

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

   कोड कॉपी करें

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

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

   अपनी एप्लिकेशन में स्थानीयकृत रूटिंग जोड़ने के लिए, आप @solidjs/router का उपयोग कर सकते हैं।

   पहले, आवश्यक निर्भरताएं स्थापित करें:

   bash

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

   कोड कॉपी करें

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

   npm install @solidjs/router
   

   फिर, अपने एप्लिकेशन को Router से लपेटें और localeMap का उपयोग करके अपने रूट परिभाषित करें:

   src/index.tsx

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

   कोड कॉपी करें

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

   import { render } from "solid-js/web";
   import { Router } from "@solidjs/router";
   import App from "./App";
   
   const root = document.getElementById("root");
   
   render(
     () => (
       <Router>
         <App />
       </Router>
     ),
     root!
   );
   

   src/App.tsx

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

   कोड कॉपी करें

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

   import { type Component } from "solid-js";
   import { Route } from "@solidjs/router";
   import { localeMap } from "intlayer";
   import { IntlayerProvider } from "solid-intlayer";
   import Home from "./pages/Home";
   import About from "./pages/About";
   
   const App: Component = () => (
     <IntlayerProvider>
       {localeMap(({ locale, urlPrefix }) => (
         <Route
           path={urlPrefix || "/"}
           component={(props: any) => (
             <IntlayerProvider locale={locale}>{props.children}</IntlayerProvider>
           )}
         >
           <Route path="/" component={Home} />
           <Route path="/about" component={About} />
         </Route>
       ))}
     </IntlayerProvider>
   );
   
   export default App;
   

8. 8

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

   वैकल्पिक

   लोकेल बदलने पर URL बदलने के लिए, आप useLocale हुक द्वारा प्रदान किए गए onLocaleChange prop का उपयोग कर सकते हैं। आप URL पथ अपडेट करने के लिए @solidjs/router से useNavigate और useLocation हुक का उपयोग कर सकते हैं।

   src/components/LocaleSwitcher.tsx

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

   कोड कॉपी करें

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

   import { type Component, For } from "solid-js";
   import { useLocation, useNavigate } from "@solidjs/router";
   import { getLocalizedUrl } from "intlayer";
   import { useLocale } from "solid-intlayer";
   
   const LocaleSwitcher: Component = () => {
     const location = useLocation();
     const navigate = useNavigate();
     const { locale, setLocale, availableLocales } = useLocale({
       onLocaleChange: (loc) => {
         const pathWithLocale = getLocalizedUrl(location.pathname, loc);
         navigate(pathWithLocale);
       },
     });
   
     return (
       <select
         value={locale()}
         onChange={(e) => setLocale(e.currentTarget.value as any)}
       >
         <For each={availableLocales}>
           {(loc) => (
             <option value={loc} selected={loc === locale()}>
               {loc}
             </option>
           )}
         </For>
       </select>
     );
   };
   

9. 9

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

   वैकल्पिक

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

   src/App.tsx

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

   कोड कॉपी करें

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

   import { createEffect, type Component } from "solid-js";
   import { useLocale } from "solid-intlayer";
   import { getHTMLTextDir } from "intlayer";
   
   const AppContent: Component = () => {
     const { locale } = useLocale();
   
     createEffect(() => {
       document.documentElement.lang = locale();
       document.documentElement.dir = getHTMLTextDir(locale());
     });
   
     return (
       // ... आपकी एप्लिकेशन सामग्री
     );
   };
   

10. 10

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

    वैकल्पिक

    एक कस्टम Link कॉम्पोनेंट बनाएं जो आंतरिक URL को वर्तमान भाषा के साथ स्वचालित रूप से उपसर्ग करता है।

    src/components/Link.tsx

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

    कोड कॉपी करें

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

    import { type ParentComponent } from "solid-js";
    import { A, type AnchorProps } from "@solidjs/router";
    import { getLocalizedUrl } from "intlayer";
    import { useLocale } from "solid-intlayer";
    
    export const Link: ParentComponent<AnchorProps> = (props) => {
      const { locale } = useLocale();
    
      const isExternal = () => props.href.startsWith("http");
      const localizedHref = () =>
        isExternal() ? props.href : getLocalizedUrl(props.href, locale());
    
      return <A {...props} href={localizedHref()} />;
    };
    

11. 11

    Markdown रेंडर करें

    वैकल्पिक

    Intlayer अपने स्वयं के आंतरिक पार्सर का उपयोग करके आपके Solid एप्लिकेशन में Markdown सामग्री को सीधे रेंडर करने का समर्थन करता है। डिफ़ॉल्ट रूप से, Markdown को सादे पाठ के रूप में माना जाता है। इसे समृद्ध HTML के रूप में रेंडर करने के लिए, अपने एप्लिकेशन को MarkdownProvider से लपेटें।

    फिर आप इसे अपने घटकों में उपयोग कर सकते हैं:

    tsx

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

    कोड कॉपी करें

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

    import { useIntlayer } from "solid-intlayer";
    
    const MyComponent = () => {
      const content = useIntlayer("my-content");
    
      return (
        <div>
          {/* MarkdownProvider के माध्यम से HTML के रूप में रेंडर किया गया */}
          {content.markdownContent}
        </div>
      );
    };
    

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

(वैकल्पिक) साइटमैप और 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 कॉन्फ़िगरेशन autogenerated types शामिल करती है।

{
  "compilerOptions": {
    // ...
  },
  "include": ["src", ".intlayer/**/*.ts"],
}

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

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

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

# Ignore the files generated by Intlayer
.intlayer

VS Code Extension

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

VS Code Marketplace से Install करें

आगे बढ़ें

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

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