Angular Academy · درس

وضع علامات على النصوص لترجمتها

استخدم سمات i18n لوضع علامات على النصوص القابلة للترجمة

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

ما الذي تحلّه Internationalization

تعني Internationalization (i18n) إعداد تطبيقك بحيث يمكن ترجمة نصوصه إلى لغات أخرى من دون تغيير الشيفرة. يحتوي Angular على نظام i18n مدمج يعتمد على تحديد النصوص القابلة للترجمة في القوالب باستخدام السمة i18n.

السمة i18n

أضف السمة i18n إلى أي عنصر يُراد ترجمة نصه. يجمع Angular هذه العناصر في وقت البناء ويستبدل المحتوى وفقًا للإعداد المحلي.

<h1 i18n>Welcome to our store</h1>
<p i18n>Choose a product to begin.</p>

ترجمة السمات

لترجمة سمة HTML، مثل title أو placeholder، أضف السابقة i18n- إليها.

<input placeholder="Search" i18n-placeholder />
<img src="logo.png" alt="Company logo" i18n-alt />

المعنى والوصف

يمكنك تزويد المترجمين بسياق باستخدام الصيغة i18n="meaning|description". يجمع المعنى العبارات المتطابقة التي ينبغي أن تشترك في ترجمة واحدة، بينما يوضّح الوصف كيفية الاستخدام.

<button i18n="cta|The main call to action on the home page">Get started</button>

المعرّفات المخصصة

أضف معرّفًا مخصصًا ثابتًا بعد @@ حتى تبقى الترجمة محفوظة عند تعديل النص. من دون ذلك، يؤدي تغيير النص المصدر إلى إنشاء معرّف جديد وفقدان الترجمة الحالية.

<h1 i18n="@@homeTitle">Welcome to our store</h1>

الاستبدالات داخل النص المترجم

تتحول الارتباطات داخل النص المترجم إلى عناصر نائبة. ويرى المترجمون رمزًا مسمىً يمكنهم تغيير موضعه بما يناسب لغتهم.

<p i18n>Hello, {{ name }}! You have {{ count }} new messages.</p>

تحديد النصوص في المكوّنات باستخدام $localize

بالنسبة إلى السلاسل النصية في TypeScript، وليس القوالب، ضع وسم $localize عليها. فهو يحدد السلسلة للاستخراج، تمامًا كما تفعل السمة i18n مع القوالب.

const greeting = $localize('Welcome back'); // tagged-template form, marked for extraction

لماذا لا نكتفي بضم السلاسل النصية

يؤدي ترميز النص وضمّه ('You have ' + n + ' items') إلى إفساد الترجمة: يختلف ترتيب الكلمات من لغة إلى أخرى، كما تختلف قواعد الجمع. ويؤدي تحديد العبارات كاملةً باستخدام i18n إلى الحفاظ على سلامة القواعد للمترجمين.

ترجمة الترميز المتداخل

عندما يحتوي النص القابل للترجمة على عناصر فرعية، يحافظ Angular عليها بوصفها عناصر نائبة حتى لا يحذف المترجمون الترميز عن طريق الخطأ.

<p i18n>Read our <a href="/terms">terms of service</a> before continuing.</p>

الحفاظ على نظافة النص المصدر

حدّد النص في أصغر وحدة منطقية، وعادةً ما تكون جملة كاملة أو تسمية. تجنّب تقسيم جملة واحدة بين عدة كتل i18n، لأن كل جزء سيصبح سلسلة منفصلة أصعب في الترجمة.

ما يحدث في وقت البناء

لا تفرض السمة i18n نفسها أي تكلفة أثناء التشغيل: إذ يستبدل Angular النص المحدد أثناء التجميع لكل إعداد محلي، وينشئ حزمة محسّنة منفصلة. سنستخرج هذه السلاسل ونترجمها في الدروس التالية.

تحقق سريع

كيف تترجم سمة placeholder؟

مراجعة

حدّد نصوص القوالب بالسمة i18n، والسمات باستخدام i18n-attr. أضف meaning|description لتوفير السياق، و@@customId للحصول على معرّفات ثابتة. تتحول الارتباطات إلى عناصر نائبة، وتستخدم سلاسل TypeScript الرمز $localize. ولا تفرض عملية التحديد أي تكلفة أثناء التشغيل.

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

هل درس «وضع علامات على النصوص لترجمتها» مجاني؟

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

ماذا ستتعلم في «وضع علامات على النصوص لترجمتها»؟

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

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

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

كم من الوقت يستغرق درس «وضع علامات على النصوص لترجمتها»؟

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

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

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

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

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