إذا كنت تريد هذا الفن باللغة البرتغالية، انقر هنا

بدأت مؤخرًا في تعلم Astro لإنشاء مشروع يشبه لوحة القيادة.

أريد حقًا تنفيذ التدويل (i18n) في هذا المشروع - الفكرة هي أن الجميع يجب أن يكونوا قادرين على استخدامه، بغض النظر عن لغتهم.

مشكلة

دعم Astro i18n جيد جدًا. إنه يعمل بشكل مشابه لـ Next.js أو أي إطار عمل آخر يعتمد التوجيه على بنية الملف/المجلد.

لذلك، إذا أردنا أن تكون لدينا صفحة باللغة الإنجليزية ونفس الصفحة باللغة البرتغالية، فيمكننا تنظيم ملفاتنا مثل هذا:

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

وكل صفحة لها سلاسل i18n الخاصة بها - لطيفة!

ولكن هنا تبدأ مشكلتي: لا أريد استنساخ جميع صفحاتي؛ أريد فقط تغيير السلاسل الموجودة في تلك الصفحات.

أحتاج إلى شيء مثل /[any-language-flag]/all-my-routes.

قد تتساءل: "لماذا لا تستخدم شيئًا مثل رد الفعل؟" إجابتي هي أنني أريد الاستفادة الكاملة من محرك Astro، خاصة بالنسبة لـ SSG/SSR، وتجنب أي مكونات تابعة للعميل. بشكل عام، تستخدم هذه الأطر سياق التفاعل، والذي يتم تقديمه فقط من جانب العميل.

المحاولة والفشل

أولاً، قرأت وصفة Astro حول i18n وراجعت بعض مكتبات المجتمع لحل هذه المشكلة.

المكتبة الأولى التي قمت باختبارها كانت astro-i18next، وكانت تبدو مثل ما أحتاجه بالضبط!

استنادًا إلى مصفوفة في ملف التكوين، يقوم astro-i18next بإنشاء صفحات i18n الخاصة بي في وقت الإنشاء، لذلك أحتاج فقط إلى البرمجة مرة واحدة ولا داعي للقلق بشأن استنساخ الصفحات.

المشكلة هي أنه يبدو أن astro-i18next تمت أرشفته أو لم تعد تتم صيانته. هناك الكثير من المشكلات، وآخر التزام كان منذ أكثر من عام.

حل

بعد تجربة مكتبات أخرى (إشارة مشرفة إلى astro-i18n)، وجدت Paraglide، وكان بمثابة تغيير في قواعد اللعبة لمشروعي.

اخترت الطيران المظلي للأسباب التالية:

• إنه آمن للكتابة، لذا يمكنني استخدامه مع TypeScript والاستفادة من الإكمال التلقائي.
• يقوم بتحويل سلاسل i18n إلى وظائف، لذلك إذا تغير مفتاح السلسلة، فسوف يفشل البناء الخاص بي، مما يؤدي إلى اكتشاف الأخطاء مبكرًا.
• يسمح استخدام وظائف i18n بهز الشجرة بشكل أفضل، وإزالة الوظائف غير المستخدمة.
• يوجد ملحق VS Code يعمل على تحسين تجربة التطوير.

ملاحظة: يمكنك استخدام Paraglide في مشروع JS أيضًا، كما أنه يدعم Next.js.

بعد التثبيت والتهيئة، استخدمت رسائلي كالتالي:

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

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

ومع ذلك، لم يحل هذا مشكلة التوجيه الخاصة بي — كنت لا أزال أقوم باستنساخ صفحاتي لكل لغة أرغب في إضافتها.

لحل هذه المشكلة، قمت بتغيير مشروعي لاستخدام المسارات الديناميكية في المسار الجذر، لذا تبدأ جميع مساراتي الآن بعلامة اللغة.

تحولت بنية المجلد الخاص بي إلى هذا:

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

بعد هذا التغيير، يمكن لـ Paraglide الحصول تلقائيًا على اللغة من معلمة المسار:

• http://localhost:4321/en/login
• http://localhost:4321/pt-br/login

الآن، يمكنني إضافة لغة جديدة فقط عن طريق تعيينها في astro.config.ts وترجمة ملف السلسلة الخاص بي.

ولكن لا يزال لدي مشكلتان أخريان لحلهما:

1. عندما يصل المستخدم لأول مرة إلى http://localhost:4321/ بدون علامة لغة.
2. إذا قام المستخدم بتغيير اللغة على مسار معين، فأنا بحاجة إلى إبقائه على نفس المسار (على سبيل المثال، /en/create-account يجب إعادة التوجيه إلى /pt-br/create-account أو /pt-br/criar -كونتا).

الوسيطة لإعادة توجيه اللغة

لحل المشكلة الأولى لإعادة توجيه اللغة، استخدمت برنامج Astro الوسيط.

في src/middleware/index.ts، أضفت هذا الكود:

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

export const onRequest = defineMiddleware((context, next) => {
  // Get lang from url param
  const lang = context.params.lang;

  // If changed
  if (lang !== languageTag()) {
    setLanguageTag(lang as AvailableLanguageTag);
    // Redirect to lang changed or default (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' })}

اعتبارات

لا أعتبر الحل الذي قدمته هو الأفضل، خاصة وأنني لا أزال أتعلم استرو، لذا قد تكون هناك حلول أخرى. إذا كنت تعرف أي شيء، يرجى التعليق، وسأحاول تجربته :)

شكرا لقراءة هذا المقال! إذا كان لديك أي أسئلة، يرجى التعليق، ويسعدني الرد.