SvelteKit i18n: przewodnik po konfiguracji internacjonalizacji
Od zera do wielu języków: skonfiguruj svelte-i18n w aplikacji SvelteKit z formatem wiadomości ICU, trasami zależnymi od języka i inteligentnymi łańcuchami rezerwowymi.
Zainstaluj svelte-i18n
svelte-i18n to standardowa biblioteka internacjonalizacyjna dla Svelte i SvelteKit. Zapewnia reaktywne magazyny, obsługę ICU MessageFormat oraz gotowe leniwe wczytywanie języków.
npm install svelte-i18nSkonfiguruj svelte-i18n
Utwórz plik konfiguracji i18n, który rejestruje języki za pomocą leniwie wczytywanych funkcji importu. svelte-i18n pobierze wiadomości danego języka dopiero po jego aktywowaniu.
// src/lib/i18n.ts
import { register, init, getLocaleFromNavigator } from 'svelte-i18n';
// Register locale loaders (lazy-loaded)
register('en', () => import('../locales/en.json'));
register('de', () => import('../locales/de.json'));
register('ja', () => import('../locales/ja.json'));
register('es', () => import('../locales/es.json'));
init({
fallbackLocale: 'en',
initialLocale: getLocaleFromNavigator(), // Auto-detect browser language
});Integracja z układem SvelteKit
Zaimportuj konfigurację i18n w głównym układzie i uzależnij renderowanie od magazynu $isLoading. Zapobiega to mignięciu nieprzetłumaczonych kluczy podczas asynchronicznego wczytywania danych językowych.
<!-- src/routes/+layout.svelte -->
<script>
// Import i18n config — must run before any component renders
import '../lib/i18n';
import { isLoading } from 'svelte-i18n';
</script>
{#if $isLoading}
<p>Loading translations...</p>
{:else}
<slot />
{/if}Trasy zależne od języka w SvelteKit
Aby uzyskać przyjazne dla SEO adresy takie jak /en/about i /de/about, użyj parametru trasy [lang]. Ustaw język svelte-i18n w funkcji load układu na podstawie parametru adresu URL.
// src/routes/[lang]/+layout.ts
import { locale } from 'svelte-i18n';
export function load({ params }) {
// Set the active locale from the URL parameter
locale.set(params.lang);
return {};
}
// src/routes/[lang]/+layout.svelte
<script>
import '../../lib/i18n';
import { isLoading } from 'svelte-i18n';
</script>
{#if $isLoading}
<p>Loading...</p>
{:else}
<slot />
{/if}Format pliku tłumaczeń
Utwórz po jednym pliku JSON dla każdego języka. svelte-i18n obsługuje zagnieżdżone klucze oraz składnię ICU MessageFormat do liczby mnogiej, zmiennych i wyrażeń select.
// src/locales/en.json
{
"nav": {
"home": "Home",
"about": "About",
"settings": "Settings"
},
"greeting": "Hello, {name}!",
"cart": {
"itemCount": "{count, plural, one {# item} other {# items}}"
}
}
// src/locales/de.json
{
"nav": {
"home": "Startseite",
"about": "Uber uns",
"settings": "Einstellungen"
},
"greeting": "Hallo, {name}!",
"cart": {
"itemCount": "{count, plural, one {# Artikel} other {# Artikel}}"
}
}Używaj tłumaczeń w komponentach
Zaimportuj magazyn $_ (lub $format) z svelte-i18n i używaj go w szablonach Svelte. Magazyn jest reaktywny — po zmianie języka wszystkie przetłumaczone teksty aktualizują się automatycznie.
<script>
import { _ } from 'svelte-i18n';
</script>
<h1>{$_('greeting', { values: { name: 'World' } })}</h1>
<nav>
<a href="/">{$_('nav.home')}</a>
<a href="/about">{$_('nav.about')}</a>
</nav><script>
import { _, date, number, time } from 'svelte-i18n';
</script>
<!-- Simple string -->
<p>{$_('greeting', { values: { name: userName } })}</p>
<!-- ICU plurals — handled automatically -->
<p>{$_('cart.itemCount', { values: { count: 3 } })}</p>
<!-- Date formatting -->
<p>{$date(new Date(), { format: 'long' })}</p>
<!-- Number formatting -->
<p>{$number(1999.99, { style: 'currency', currency: 'USD' })}</p>Zmiana języka
Utwórz selektor języka powiązany z magazynem $locale. Po zmianie wartości svelte-i18n wczytuje wiadomości nowego języka i reaktywnie aktualizuje wszystkie przetłumaczone teksty.
<script>
import { locale, locales } from 'svelte-i18n';
const LANGUAGE_NAMES = {
en: 'English',
de: 'Deutsch',
ja: '日本語',
es: 'Espanol',
};
</script>
<select bind:value={$locale}>
{#each $locales as loc}
<option value={loc}>{LANGUAGE_NAMES[loc] ?? loc}</option>
{/each}
</select>Obsłuż liczbę mnogą za pomocą ICU MessageFormat
svelte-i18n używa ICU MessageFormat do liczby mnogiej — międzynarodowego standardu obsługującego wszystkie kategorie CLDR. Arabski ma 6 form, rosyjski 4, a japoński 1. Zdefiniuj formy potrzebne językom docelowym, a svelte-i18n automatycznie wybierze właściwą.
// svelte-i18n uses ICU MessageFormat for plurals
// English:
{
"items": "{count, plural, one {# item} other {# items}}"
}
// Arabic (6 forms):
{
"items": "{count, plural, zero {no items} one {item} two {two items} few {# items} many {# items} other {# items}}"
}
// Japanese (1 form):
{
"items": "{count, plural, other {#個のアイテム}}"
}Inteligentne języki rezerwowe z svelte-i18n-locale-chain
Gdy brakuje klucza, svelte-i18n przechodzi bezpośrednio do fallbackLocale — bez etapu pośredniego. Użytkownik pt-BR widzi angielski zamiast w pełni poprawnych tłumaczeń pt-PT. svelte-i18n-locale-chain rozwiązuje ten problem za pomocą inteligentnych łańcuchów rezerwowych, które głęboko scalają wiadomości z wariantów regionalnych.
npm install svelte-i18n-locale-chain svelte-i18n// src/lib/i18n.ts
import { initLocaleChain, setLocale } from 'svelte-i18n-locale-chain';
// Replace svelte-i18n's init + register with initLocaleChain
await initLocaleChain({
loadMessages: (locale) =>
import(`../locales/${locale}.json`).then(m => m.default),
defaultLocale: 'en',
initialLocale: 'pt-BR',
});
// Later, to change locale:
await setLocale('fr-CA');
// fr-CA user sees: fr-CA messages -> fr messages -> en messages
// No missing keys — deep-merged automaticallyZautomatyzuj tłumaczenia
Po skonfigurowaniu i18n tłumacz pliki językowe za pomocą AI. Poproś asystenta AI w środowisku programistycznym o przetłumaczenie pliku źródłowego albo użyj CLI i18n Agent w pipeline CI/CD.
# In your IDE, ask your AI assistant:
> Translate src/locales/en.json to German, Japanese, and Spanish
✓ de.json created (1.2s)
✓ ja.json created (1.5s)
✓ es.json created (1.1s)
# Or use the CLI in CI/CD:
npx i18n-agent translate src/locales/en.json --lang de,ja,esZautomatyzuj kontrolę jakości tłumaczeń
Typowe pułapki
Przenikanie języka między żądaniami SSR w SvelteKit
Używanie register() z svelte-i18n-locale-chain
Błędy składni ICU nie zgłaszają problemu
Mignięcie nieprzetłumaczonej treści
Zalecana struktura plików
my-sveltekit-app/
├── src/
│ ├── lib/
│ │ └── i18n.ts # i18n configuration
│ ├── locales/
│ │ ├── en.json # Source language
│ │ ├── de.json # German
│ │ ├── ja.json # Japanese
│ │ └── es.json # Spanish
│ └── routes/
│ ├── +layout.svelte # Import i18n, guard isLoading
│ ├── +page.svelte
│ └── [lang]/ # Optional: locale-based routing
│ ├── +layout.ts # Set locale from URL param
│ ├── +layout.svelte
│ └── +page.svelte
├── svelte.config.js
└── package.jsonPrzetłumacz również:
Wypróbuj i18n Agent
Upuść tutaj plik tłumaczenia
JSON, YAML, PO, XML, CSV, Markdown, Properties
lub kliknij, aby go wybrać
Języki docelowe
Rezerwowe ustawienia regionalne z svelte-i18n-locale-chain
Gdy brakuje klucza tłumaczenia w regionalnym wariancie języka, takim jak pt-BR, svelte-i18n przechodzi bezpośrednio do języka domyślnego, zamiast najpierw sprawdzić język nadrzędny pt.
npm install svelte-i18n-locale-chainimport { initLocaleChain } from 'svelte-i18n-locale-chain';
initLocaleChain({
fallbacks: {
'pt-BR': ['pt', 'en'],
'zh-Hant-HK': ['zh-Hant', 'zh', 'en'],
},
defaultLocale: 'en',
});Zobacz nasz przewodnik po rezerwowych ustawieniach regionalnych, aby poznać pełną listę obsługiwanych frameworków i 75 wbudowanych łańcuchów. Learn more →