Angular Academy · درس

استخراج الرسائل وترجمتها

أنشئ ملفات الترجمة واملأها

استخراج الرسائل وترجمتها درس مجاني في Angular Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Angular Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Angular Academy 4 دروس في المجموع.

من النص المحدد إلى ملفات الترجمة

بعد تحديد النص بالسمة i18n، يستطيع Angular جمع كل رسالة في ملف مصدر للترجمة. يملأ المترجمون كل لغة مستهدفة، ثم يدمج البناء تلك الترجمات مجددًا. يغطي هذا الدرس عملية الاستخراج وتنسيق الملف.

تشغيل ng extract-i18n

يفحص أمر CLI ng extract-i18n تطبيقك بحثًا عن الرسائل المحددة، ويكتب ملف مصدر للترجمة، ويكون messages.xlf هو الملف الافتراضي.

ng extract-i18n
# generates messages.xlf in the project root

اختيار تنسيق الإخراج ومساره

يمكنك اختيار التنسيق والوجهة. يُعد XLIFF (xlf) هو التنسيق الافتراضي، كما يتوفر XLIFF 2 والتنسيق arb المستند إلى JSON.

ng extract-i18n --format=xlf2 --output-path=src/locale

بنية ملف XLF

تصبح كل رسالة محددة عنصر trans-unit يحتوي على source، وهو النص الأصلي، وtarget فارغًا يملؤه المترجم.

<trans-unit id="homeTitle" datatype="html">
  <source>Welcome to our store</source>
  <target></target>
</trans-unit>

إنشاء ملفات لكل إعداد محلي

انسخ messages.xlf إلى ملف لكل إعداد محلي مستهدف، وسمِّه باستخدام رمز الإعداد المحلي، ثم ترجم الأهداف.

src/locale/messages.xlf       # source
src/locale/messages.fr.xlf    # French
src/locale/messages.es.xlf    # Spanish

إدخال الترجمات

يستبدل المترجم كل target فارغ بالنص المترجم محليًا، مع الإبقاء على id نفسه حتى يعرف Angular النص المصدر المطابق له.

<trans-unit id="homeTitle">
  <source>Welcome to our store</source>
  <target>Bienvenue dans notre boutique</target>
</trans-unit>

يجب الحفاظ على العناصر النائبة

تظهر الاستبدالات على شكل علامات عناصر نائبة <x>. يجب على المترجمين الإبقاء عليها، لكن يمكنهم إعادة ترتيبها بما يلائم قواعد اللغة المستهدفة.

<source>Hello, <x id="INTERPOLATION" equiv-text="{{name}}"/>!</source>
<target>Bonjour, <x id="INTERPOLATION"/> !</target>

إعادة الاستخراج بعد التغييرات

عند إضافة نص محدد أو تغييره، أعد تشغيل ng extract-i18n. تحافظ المعرّفات المخصصة @@ على الترجمات الحالية؛ أما المعرّفات المُنشأة تلقائيًا فقد تتغير وتحتاج إلى إعادة الترجمة.

إعداد الإعدادات المحلية في angular.json

سجّل كل إعداد محلي وملف ترجمته ضمن إعداد i18n في المشروع حتى يعرف البناء مكان العثور عليها.

"i18n": {
  "sourceLocale": "en",
  "locales": {
    "fr": "src/locale/messages.fr.xlf",
    "es": "src/locale/messages.es.xlf"
  }
}

التعامل مع الترجمات المفقودة

يمكنك تحديد كيفية تعامل البناء مع الرسائل غير المترجمة: يفشل error عملية البناء، ويسجل warning تحذيرًا ويستخدم النص المصدر، بينما يظل ignore صامتًا. استخدم error في CI لاكتشاف الفجوات.

"options": { "i18nMissingTranslation": "error" }

العمل باستخدام أدوات الترجمة

يُعد XLIFF معيارًا صناعيًا، لذلك يمكن لمنصات الترجمة الاحترافية، وأدوات مثل Crowdin أو Lokalise، استيراد الملف المستخرج وتصدير الترجمات المكتملة مجددًا بالتنسيق نفسه.

تحقق سريع

ماذا ينتج الأمر ng extract-i18n؟

مراجعة

شغّل ng extract-i18n لجمع النص المحدد في ملف مصدر XLIFF مكوّن من عناصر trans-unit. انسخه لكل إعداد محلي، واملأ عناصر target مع الحفاظ على العناصر النائبة، وسجّل الإعدادات المحلية في angular.json، واضبط i18nMissingTranslation لاكتشاف الفجوات. تحمي المعرّفات الثابتة @@ الترجمات عند إجراء التعديلات.

الأسئلة الشائعة

هل درس «استخراج الرسائل وترجمتها» مجاني؟

نعم — نص درس «استخراج الرسائل وترجمتها» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Angular Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Angular Academy 4 دروس في المجموع.

ماذا ستتعلم في «استخراج الرسائل وترجمتها»؟

أنشئ ملفات الترجمة واملأها تتمرن على Angular Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Angular Academy؟

لا تُشترط خبرة سابقة. Angular Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «استخراج الرسائل وترجمتها»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Angular Academy هذا؟

نعم. كل درس في Angular Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Angular Academy