यदि आप इस लेख को अंग्रेजी में पढ़ना चाहते हैं तो यहां जाएं

मैंने हाल ही में डैशबोर्ड-शैली प्रोजेक्ट बनाने के लिए एस्ट्रो सीखना शुरू किया है।

मैं वास्तव में इस परियोजना में अंतर्राष्ट्रीयकरण (i18n) लागू करना चाहता हूं-लक्ष्य यह है कि कोई भी इसका उपयोग कर सकता है, भाषा की परवाह किए बिना।

संकट

एस्ट्रो पर I18n समर्थन बहुत अच्छा है। यह फ़ाइल/फ़ोल्डर संरचना के आधार पर रूटिंग के साथ Next.js या किसी अन्य फ्रेमवर्क के समान काम करता है।

इसलिए, यदि हम एक पेज अंग्रेजी में और वही पेज पुर्तगाली में चाहते हैं, तो हम अपनी फाइलों को इस तरह व्यवस्थित कर सकते हैं:

.
└── src/
    └── pages/
        ├── en/
        │   ├── login.astro
        │   └── dashboard.astro
        └── pt-br/
            ├── login.astro
            └── dashboard.astro

और प्रत्येक पृष्ठ की अपनी i18n स्ट्रिंग्स हैं—अच्छा!

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

मुझे /[any-भाषा-ध्वज]/सभी-मेरे-मार्गों जैसा कुछ चाहिए।

आप पूछ सकते हैं, "React-intl जैसी किसी चीज़ का उपयोग क्यों न करें?" मेरा उत्तर यह है कि मैं एस्ट्रो इंजन का पूरा लाभ लेना चाहता हूं, विशेष रूप से एसएसजी/एसएसआर के लिए, और किसी भी क्लाइंट-साइड घटक से बचना चाहता हूं। आम तौर पर, ये फ्रेमवर्क रिएक्ट कॉन्टेक्स्ट का उपयोग करते हैं, जो केवल क्लाइंट साइड पर प्रस्तुत किया जाता है।

प्रयास और असफलता

सबसे पहले, मैंने i18n के बारे में एस्ट्रो की रेसिपी पढ़ी और इस समस्या को हल करने के लिए कुछ सामुदायिक पुस्तकालयों की जाँच की।

मैंने जो पहली लाइब्रेरी आज़माई वह एस्ट्रो-आई18नेक्स्ट थी, और यह बिल्कुल वैसी ही लग रही थी जैसी मुझे चाहिए थी!

कॉन्फ़िगरेशन फ़ाइल में एक सरणी के आधार पर, एस्ट्रो-आई18नेक्स्ट बिल्ड समय पर मेरे i18n पेज बनाता है, इसलिए मुझे केवल एक बार कोड करने की ज़रूरत है और क्लोनिंग पेजों के बारे में चिंता करने की ज़रूरत नहीं है।

समस्या यह है कि एस्ट्रो-आई18नेक्स्ट संग्रहीत या अब अनुरक्षित नहीं प्रतीत होता है। बहुत सारी समस्याएं हैं और आखिरी प्रतिबद्धता एक साल पहले खत्म हो गई थी।

समाधान

अन्य पुस्तकालयों (एस्ट्रो-आई18एन के लिए सम्मानजनक उल्लेख) की कोशिश करने के बाद, मुझे पैराग्लाइड मिला, और यह मेरे प्रोजेक्ट के लिए गेम चेंजर था।

मैंने पैराग्लाइड को चुना क्योंकि:

• यह टाइप-सुरक्षित है, इसलिए मैं इसे टाइपस्क्रिप्ट के साथ उपयोग कर सकता हूं और स्वत: पूर्ण का लाभ उठा सकता हूं।
• यह i18n स्ट्रिंग्स को फ़ंक्शंस में परिवर्तित करता है, इसलिए यदि कोई स्ट्रिंग कुंजी बदलती है, तो मेरा निर्माण विफल हो जाएगा, त्रुटियों को जल्दी पकड़ लेगा।
• i18n फ़ंक्शंस का उपयोग बेहतर ट्री शेकिंग, अप्रयुक्त फ़ंक्शंस को हटाने की अनुमति देता है।
• एक वीएस कोड एक्सटेंशन है जो विकास अनुभव को बेहतर बनाता है।

नोट: आप पैराग्लाइड का उपयोग JS प्रोजेक्ट में भी कर सकते हैं, और यह Next.js को भी सपोर्ट करता है।

इंस्टॉलेशन और कॉन्फ़िगरेशन के बाद, मैंने अपने संदेशों का उपयोग इस तरह किया:

---
import * as m from "../paraglide/messages.js";
---

{m.hello({ name: "Alan" })}

हालाँकि, इससे मेरी रूटिंग समस्या का समाधान नहीं हुआ—मैं अभी भी उस प्रत्येक भाषा के लिए अपने पृष्ठों की क्लोनिंग कर रहा था जिसे मैं जोड़ना चाहता था।

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

मेरी फ़ोल्डर संरचना इस तरह दिखती थी:

.
└── src/
    └── pages/
        └── [lang]/
            ├── login.astro
            └── dashboard.astro

इस परिवर्तन के बाद, पैराग्लाइड स्वचालित रूप से रूट पैरामीटर भाषा प्राप्त कर सकता है:

• http://localhost:4321/en/लॉगिन
• http://localhost:4321/pt-br/login

अब मैं astro.config.ts में इसे कॉन्फ़िगर करके और अपनी स्ट्रिंग फ़ाइल का अनुवाद करके एक नई भाषा जोड़ सकता हूं।

लेकिन मुझे अभी भी दो समस्याओं का समाधान करना है:

1. जब उपयोगकर्ता पहली बार भाषा ध्वज के बिना http://localhost:4321/ तक पहुंचता है।
2. यदि उपयोगकर्ता किसी विशिष्ट रूट पर भाषा बदलता है, तो मुझे उसे उसी रूट पर रखना होगा (उदाहरण के लिए /en/create-account को /pt-br/create-account या /pt-br/criar- अकाउंट पर रीडायरेक्ट करना चाहिए) ).

भाषा पुनर्निर्देशन के लिए मिडलवेयर

पहली भाषा पुनर्निर्देशन समस्या को हल करने के लिए, मैंने एस्ट्रो मिडलवेयर का उपयोग किया।

src/middleware/index.ts में, मैंने यह कोड जोड़ा:

import { defineMiddleware } from 'astro:middleware';
import {
  languageTag,
  setLanguageTag,
  type AvailableLanguageTag,
} from '../paraglide/runtime';

export const onRequest = defineMiddleware((context, next) => {
  // Obter o idioma do parâmetro da URL
  const lang = context.params.lang;

  // Se mudou
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirecionar para o idioma alterado ou padrão (en)
    return context.redirect(`/${lang ?? 'en'}`);
  }

  return next();
});

वर्तमान रूट के साथ भाषा चयनकर्ता

भाषाएं बदलते समय उपयोगकर्ता को उसी मार्ग पर रखने के लिए, मैंने यह घटक जोड़ा:

---
import { languageTag } from '../paraglide/runtime';

const pathName = Astro.url.pathname.replace(`/${languageTag()}/`, '');
---

• Ir para Português
• Go to English

इसके अतिरिक्त, हम पैराग्लाइड के संदेश फ़ंक्शन में दूसरे पैरामीटर का उपयोग करके, इन संदेशों का अनुवाद भी कर सकते हैं:

• {m.goToLanguage(undefined, { languageTag: 'pt-br' })}
• {m.goToLanguage(undefined, { languageTag: 'en' })}

विचार

मैं अपने समाधान को सर्वश्रेष्ठ नहीं मानता, खासकर जब से मैं अभी भी एस्ट्रो सीख रहा हूं, इसलिए अन्य समाधान भी हो सकते हैं। यदि आप किसी के बारे में जानते हैं, तो कृपया टिप्पणी करें, और मैं कोशिश करूंगा :)

इस आलेख को पढ़ने के लिए धन्यवाद! यदि आपके कोई प्रश्न हैं, तो टिप्पणी करें, मुझे उत्तर देने में खुशी होगी।