localize.dev

الوثائق / Ember

تعديل Ember (i18n) باستخدام ember-intl، تلقائيًا

تعديل تطبيق Ember: يتم تحويل نماذج Glimmer (.hbs, .gjs, .gts) إلى استدعاءات ember-intl {{t}} مع تعدد الأشكال، وورقة تطبيق تختار اللغة.

كيف يعمل

النص في قالب يصبح `{{t "key" name=this.user.name}}، والمواصفات placeholder={{t "key"}}، و {{if (eq n 1) "item" "items"}}` في جملة رسالة تعدد.

قبل وبعد

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

app/templates/cart.hbs · قبل
<h1>Your basket</h1>
<p>Hi {{this.user.name}}, you have {{@count}} new messages.</p>
<p>See the <a href="/faq">FAQ</a> before you order.</p>
<input placeholder="Search products" />
app/templates/cart.hbs · بعد
<h1>{{t "cart.your_basket"}}</h1>
<p>{{t "cart.hi_you_have_new_messages" name=this.user.name count=@count}}</p>
<p><I18nT @key="cart.see_the_before_you_order" @slots="a" as |is|>{{#if is.a}}<a href="/faq">{{t "cart.faq"}}</a>{{/if}}</I18nT></p>
<input placeholder={{t "cart.search_products"}} />
translations/en.json
{
  "cart": {
    "your_basket": "Your basket",
    "hi_you_have_new_messages": "Hi {name}, you have {count} new messages.",
    "faq": "FAQ",
    "see_the_before_you_order": "See the {a} before you order.",
    "search_products": "Search products"
  }
}

ما يضيفه الإعداد

الإعداد الأول يقوم بإعداد ember-intl إذا لم يكن المشروع يحتوي عليه بعد:

  • ember-intl مع الرسائل في translations/<locale>.json
  • مسار تطبيق يختار اللغة ويضع `<html lang dir>

قم بتشغيله

يتطلب CLI إصدار Node.js 22 أو أحدث.

npm install --save-dev localize-dev
npx localize-dev login

# Preview, then write the changes
npx localize-dev run --dry-run -l es,fr,de
npx localize-dev run -l es,fr,de

# Or open a pull request instead
npx localize-dev pr -l es,fr,de

أو أضف إجراء GitHub واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.