localize.dev

الوثائق / Svelte and SvelteKit

ترجمة Svelte و SvelteKit تلقائيًا

قم بترجمة تطبيقات Svelte و SvelteKit باستخدام svelte-i18n: يصبح الترميز استدعاءات $_()، وتتحول الجمع إلى رسائل ICU، وتعرض صفحات SvelteKit بلغة الزائر على الخادم.

كيف يعمل

يصبح الترميز {$_('key')}، والسمات مثل title="Hello {name}" تصبح رسالة واحدة، ويتم ترجمة التنبيهات في <script> أيضًا. الثوابت التي يظهرها الترميز ({title}, {#each tabs as tab}{tab.label}) تصبح مفاتيح تُقرأ عبر $_().

جملة حول رابط أو نص غامق تبقى رسالة واحدة: يتم توليد <I18nT>، مع تمرير كل عنصر كمقتطف (Svelte 5) أو اختياره في مكانه (Svelte 3 و 4)، بحيث يمكن للمترجمين نقل الرابط ليتناسب مع القواعد النحوية.

في SvelteKit، يختار hooks.server اللغة من ملف تعريف الارتباط أو Accept-Language، بحيث يتم عرض الصفحات باللغة الصحيحة بدون وميض.

قبل وبعد

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

src/routes/cart/+page.svelte · قبل
<script>
  export let data;
</script>

<h1>Your cart</h1>
<p>You have {data.count} items ready to ship.</p>
<p>Read our <a href="/returns">returns policy</a> before you order.</p>
<img src="/box.png" alt="Box for {data.name}" />
src/routes/cart/+page.svelte · بعد
<script>
  import { _ } from 'svelte-i18n';
  import I18nT from '$lib/I18nT.svelte';
  export let data;
</script>

<h1>{$_('page.your_cart')}</h1>
<p>{$_('page.you_have_items_ready_to', { values: { count: data.count } })}</p>
<p><I18nT key="page.read_our_before_you_order">{#snippet a()}<a href="/returns">{$_('page.returns_policy')}</a>{/snippet}</I18nT></p>
<img src="/box.png" alt={$_('page.box_for', { values: { name: data.name } })} />
locales/en.json
{
  "page": {
    "your_cart": "Your cart",
    "you_have_items_ready_to": "You have {count} items ready to ship.",
    "returns_policy": "returns policy",
    "read_our_before_you_order": "Read our {a} before you order.",
    "box_for": "Box for {name}"
  }
}

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

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

  • svelte-i18n
  • src/lib/i18n (أو src/i18n)، مستورد من +layout أو main
  • hooks.server لـ SvelteKit

قم بتشغيله

يتطلب 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 واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.