الوثائق / 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، بحيث يتم عرض الصفحات باللغة الصحيحة بدون وميض.
قبل وبعد
المخرجات الحقيقية للمحرك لهذا الملف. في تشغيل حقيقي، يقوم النموذج المستضاف بتسمية المفاتيح من السياق.
<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}" /><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 } })} />{
"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-i18nsrc/lib/i18n(أوsrc/i18n)، مستورد من+layoutأوmainhooks.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 واحصل على طلب سحب عند كل دفعة. جربه على الكود الخاص بك أولاً في ملعب.