إذا كنت تريد قراءة هذه المقالة باللغة الإنجليزية اذهب هنا

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

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

مشكلة

دعم I18n على Astro جيد جدًا. إنه يعمل بشكل مشابه لـ 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- account ).

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

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

في 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

بالإضافة إلى ذلك، يمكننا ترجمة هذه الرسائل أيضًا، باستخدام المعلمة الثانية في وظيفة رسالة Paraglide:

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

اعتبارات

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

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