\n\n\n

{$content.title}

Name: Intlayer
Author: Intlayer

\n\n

{@const Title = $content.title}</h1>\n\n<div aria-label={$content.title.value}></div>\n<div aria-label={$content.title.toString()}></div>\n<div aria-label={String($content.title)}></div>\n```\n\n### (Opcjonalny) Krok 6: Skonfiguruj routing\n\nPoniższe kroki pokazują, jak skonfigurować routing oparty na lokalizacji w SvelteKit. Pozwala to na dodanie prefiksu lokalizacji do adresów URL (np. `/en/about`, `/fr/about`) dla lepszego SEO i doświadczenia użytkownika.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Definiuje typ lokalizacji\n ├── hooks.server.ts # Zarządza routingiem lokalizacji\n ├── lib\n │ └── getLocale.ts # Sprawdza lokalizację z nagłówka, ciasteczek\n ├── params\n │ └── locale.ts # Definiuje parametr lokalizacji\n └── routes\n ├── [[locale=locale]] # Opakowuje w grupę tras, aby ustawić lokalizację\n │ ├── +layout.svelte # Lokalny layout dla trasy\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Główny layout dla fontów i stylów globalnych\n```\n\n### Krok 7: Obsługa wykrywania lokalizacji po stronie serwera (Hooks)\n\nW SvelteKit serwer musi znać lokalizację użytkownika, aby wyrenderować odpowiednią zawartość podczas SSR. Używamy `hooks.server.ts` do wykrywania lokalizacji z URL lub ciasteczek.\n\nUtwórz lub zmodyfikuj plik `src/hooks.server.ts`:\n\n```typescript fileName=\"src/hooks.server.ts\"\nimport type { Handle } from \"@sveltejs/kit\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { getLocale } from \"$lib/getLocale\";\n\nexport const handle: Handle = async ({ event, resolve }) => {\n const detectedLocale = getLocale(event);\n\n // Sprawdź, czy bieżąca ścieżka już zaczyna się od lokalizacji (np. /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Jeśli w URL nie ma lokalizacji (np. użytkownik odwiedza \"/\"), przekieruj go\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Tymczasowe przekierowanie\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nNastępnie utwórz pomocnika do pobierania lokalizacji użytkownika z eventu żądania:\n\n```typescript fileName=\"src/lib/getLocale.ts\"\nimport {\n configuration,\n getLocaleFromStorage,\n localeDetector,\n type Locale,\n} from \"intlayer\";\nimport type { RequestEvent } from \"@sveltejs/kit\";\n\n/**\n * Pobierz lokalizację użytkownika z eventu żądania.\n * Ta funkcja jest używana w hooku `handle` w `src/hooks.server.ts`.\n *\n * Najpierw próbuje pobrać lokalizację z magazynu Intlayer (ciasteczka lub niestandardowe nagłówki).\n * Jeśli lokalizacja nie zostanie znaleziona, następuje odwołanie do negocjacji \"Accept-Language\" przeglądarki.\n *\n * @param event - Event żądania z SvelteKit\n * @returns Lokalizacja użytkownika\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Próba pobrania lokalizacji z magazynu Intlayer (ciasteczka lub nagłówki)\n const storedLocale = getLocaleFromStorage({\n // Dostęp do ciasteczek SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Dostęp do nagłówków SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Powrót do negocjacji \"Accept-Language\" przeglądarki\n const negotiatorHeaders: Record<string, string> = {};\n\n // Konwersja obiektu Headers SvelteKit na zwykły Record<string, string>\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Sprawdzenie lokalizacji z nagłówka `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Zwróć domyślną lokalizację, jeśli nie znaleziono dopasowania\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` sprawdzi lokalizację na podstawie nagłówka lub ciasteczka w zależności od Twojej konfiguracji. Zobacz [Konfiguracja](https://intlayer.org/doc/configuration) po więcej szczegółów.\n\n> Funkcja `localeDetector` przetworzy nagłówek `Accept-Language` i zwróci najlepsze dopasowanie.\n\nJeśli lokalizacja nie jest skonfigurowana, chcemy zwrócić błąd 404. Aby to ułatwić, możemy stworzyć funkcję `match`, która sprawdzi, czy lokalizacja jest poprawna:\n\n```ts fileName=\"/src/params/locale.ts\"import { defaultLocale, locales, type Locale } from \"intlayer\";\nexport const match = (param: Locale = defaultLocale): boolean =>\n locales.includes(param);\n```\n\n> **Uwaga:** Upewnij się, że Twój plik `src/app.d.ts` zawiera definicję lokalizacji:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nDla pliku `+layout.svelte` możemy usunąć wszystko, aby zachować tylko statyczną zawartość, niezwiązaną z i18n:\n\n```svelte fileName=\"src/+layout.svelte\"\n<script lang=\"ts\">\n\t import './layout.css';\n\n let { children } = $props();\n</script>\n\n<div class=\"app\">\n\t{@render children()}\n</div>\n\n<style>\n\t.app {\n /* */\n\t}\n</style>\n```\n\nNastępnie utwórz nową stronę i layout w grupie `[[locale=locale]]`:\n\n```ts fileName=\"src/routes/[[locale=locale]]/+layout.ts\"\nimport type { Load } from \"@sveltejs/kit\";\nimport { defaultLocale, type Locale } from \"intlayer\";\n\nexport const prerender = true;\n\n// Użyj generycznego typu Load\nexport const load: Load = ({ params }) => {\n const locale: Locale = (params.locale as Locale) ?? defaultLocale;\n\n return {\n locale,\n };\n};\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+layout.svelte\"\n<script lang=\"ts\">\n\timport type { Snippet } from 'svelte';\n\timport { useIntlayer, setupIntlayer } from \"svelte-intlayer\";\n\timport Header from './Header.svelte';\n\timport type { LayoutData } from './$types';\n\n\tlet { children, data }: { children: Snippet, data: LayoutData } = $props();\n\n\t// Inicjalizuj Intlayer z lokalizacją z trasy\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Użyj słownika zawartości layoutu\n\tconst layoutContent = useIntlayer('layout');\n</script>\n\n<Header />\n\n<main>\n\t{@render children()}\n</main>\n\n<footer>\n\t<p>\n\t\t{$layoutContent.footer.prefix.value}{' '}\n\t\t<a href=\"https://svelte.dev/docs/kit\">{$layoutContent.footer.linkLabel.value}</a>{' '}\n\t\t{$layoutContent.footer.suffix.value}\n\t</p>\n</footer>\n\n<style>\n /* */\n</style>\n```\n\n```ts fileName=\"src/routes/[[locale=locale]]/+page.ts\"\nexport const prerender = true;\n```\n\n```svelte fileName=\"src/routes/[[locale=locale]]/+page.svelte\"\n<script lang=\"ts\">\n\timport { useIntlayer } from \"svelte-intlayer\";\n\n\t// Użyj słownika treści strony głównej\n\tconst homeContent = useIntlayer('home');\n</script>\n\n<svelte:head>\n\t<title>{$homeContent.title.value}\n\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n\n\n```\n\n### (Opcjonalny) Krok 8: Linki z internacjonalizacją\n\nDla SEO zaleca się poprzedzanie swoich ścieżek lokalizacją (np. `/en/about`, `/fr/about`). Ten komponent automatycznie dodaje prefiks lokalizacji do każdego linku.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nJeśli używasz `goto` z SvelteKit, możesz zastosować tę samą logikę z `getLocalizedUrl`, aby nawigować do zlokalizowanego URL:\n\n```typescript\nimport { goto } from \"$app/navigation\";\nimport { getLocalizedUrl } from \"intlayer\";\nimport { useLocale } from \"svelte-intlayer\";\n\nconst { locale } = useLocale();\nconst localizedPath = getLocalizedUrl(\"/about\", $locale);\ngoto(localizedPath); // Nawiguje do /en/about lub /fr/about w zależności od lokalizacji\n```\n\n### (Opcjonalny) Krok 9: Przełącznik języka\n\nAby umożliwić użytkownikom zmianę języka, zaktualizuj URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Ustawi locale w store i wywoła onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Opcjonalny) Krok 10: Dodaj backend proxy\n\nAby dodać backend proxy do swojej aplikacji SvelteKit, możesz użyć funkcji `intlayerProxy` dostarczonej przez wtyczkę `vite-intlayer`. Ta wtyczka automatycznie wykryje najlepszy locale dla użytkownika na podstawie URL, ciasteczek i preferencji językowych przeglądarki.\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerProxy } from \"vite-intlayer\";\nimport { sveltekit } from \"@sveltejs/kit/vite\";\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [\n intlayerProxy(), // should be placed first\n intlayer(),\n sveltekit(),\n ],],\n});\n```\n\n### (Opcjonalny) Krok 11: Konfiguracja edytora intlayer / CMS\n\nAby skonfigurować edytor intlayer, należy postępować zgodnie z [dokumentacją edytora intlayer](/pl/doc/concept/editor).\n\nAby skonfigurować CMS intlayer, należy postępować zgodnie z [dokumentacją CMS intlayer](/pl/doc/concept/cms).\n\nAby móc wizualizować selektor edytora intlayer, musisz użyć składni komponentu w swojej zawartości intlayer.\n\n```svelte fileName=\"Component.svelte\"\n\n\n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

\n```\n\n### Konfiguracja Git\n\nZaleca się ignorowanie plików generowanych przez Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Ignoruj pliki generowane przez Intlayer\n.intlayer\n```\n\n---\n\n### (Opcjonalnie) Krok 12 : Wyodrębnij zawartość swoich komponentów\n\nJeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.\n\nAby ułatwić ten proces, Intlayer proponuje [kompilator](/pl/doc/compiler) / [ekstraktor](/pl/doc/concept/cli/extract), aby przetransformować komponenty i wyodrębnić zawartość.\n\nAby go skonfigurować, możesz dodać sekcję `compiler` w pliku `intlayer.config.ts`:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Reszta Twojej konfiguracji\n compiler: {\n /**\n * Wskazuje, czy kompilator powinien być włączony.\n */\n enabled: true,\n\n /**\n * Definiuje ścieżkę plików wyjściowych\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.\n */\n saveComponents: false,\n\n /**\n * Prefiks klucza słownika\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nUruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość\n\n```bash packageManager=\"npm\"\nnpx intlayer extract\n```\n\n```bash packageManager=\"pnpm\"\npnpm intlayer extract\n```\n\n```bash packageManager=\"yarn\"\nyarn intlayer extract\n```\n\n```bash packageManager=\"bun\"\nbun x intlayer extract\n```\n\n \n \n\nZaktualizuj `vite.config.ts`, aby dołączyć wtyczkę `intlayerCompiler`:\n\n```ts fileName=\"vite.config.ts\"\nimport { defineConfig } from \"vite\";\nimport { intlayer, intlayerCompiler } from \"vite-intlayer\";\n\nexport default defineConfig({\n plugins: [\n intlayer(),\n intlayerCompiler(), // Dodaje wtyczkę kompilatora\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Lub npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Or pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Or yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Idź dalej\n\n- **Edytor wizualny**: Zintegruj [Intlayer Visual Editor](/pl/doc/concept/editor), aby edytować tłumaczenia bezpośrednio z interfejsu użytkownika.\n- **CMS**: Zewnętrz zarządzanie treścią, korzystając z [Intlayer CMS](/pl/doc/concept/cms).\n","about":"Dowiedz się, jak uczynić swoją stronę SvelteKit wielojęzyczną. Postępuj zgodnie z dokumentacją, aby zinternacjonalizować (i18n) i przetłumaczyć ją za pomocą Server-Side Rendering (SSR).","url":"https://intlayer.org/pl/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internacjonalizacja, Dokumentacja, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Programiści, Menedżerowie treści"}}

Data utworzenia:2025-11-20Ostatnia aktualizacja:2026-05-06

Zobacz szablon aplikacji na GitHubie

Na tej stronie dostępny jest szablon aplikacji.

Zobacz aplikację pokazową

Ta strona prowadzi do działającej demonstracji szablonu.

Prześlij ten dokument do swojego ulubionego asystenta AI

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Zadaj pytanie i otrzymaj streszczenie dokumentu, odwołując się do tej strony i wybranego dostawcy AI

Historia wersji

"Aktualizacja użycia API useIntlayer w Solid do bezpośredniego dostępu do właściwości"
v8.9.04.05.2026
"Dodaj polecenie init"
v7.5.930.12.2025
"Inicjalizacja historii"
v7.1.1020.11.2025

Treść tej strony została przetłumaczona przy użyciu sztucznej inteligencji.

Zobacz ostatnią wersję oryginalnej treści w języku angielskim

Edytuj tę dokumentację

Jeśli masz pomysł na ulepszenie tej dokumentacji, zachęcamy do przesłania pull requesta na GitHubie.

Link do dokumentacji na GitHubie

Kopiuj

Kopiuj dokument Markdown do schowka

Przetłumacz swoją stronę SvelteKit za pomocą Intlayer | Internacjonalizacja (i18n)

ide.intlayer.org

Spis treści

Czym jest Intlayer?

Intlayer to innowacyjna, open-source'owa biblioteka do internacjonalizacji (i18n), zaprojektowana, aby uprościć wsparcie wielojęzyczne w nowoczesnych aplikacjach webowych. Działa bezproblemowo z możliwościami Server-Side Rendering (SSR) w SvelteKit.

Dzięki Intlayer możesz:

Łatwo zarządzać tłumaczeniami za pomocą deklaratywnych słowników na poziomie komponentów.
Dynamicznie lokalizować metadane, ścieżki i zawartość.
Zapewnić wsparcie TypeScript dzięki automatycznie generowanym typom.
Wykorzystać SSR SvelteKit dla SEO-przyjaznej internacjonalizacji.

Przewodnik krok po kroku: konfiguracja Intlayer w aplikacji SvelteKit

Aby rozpocząć, utwórz nowy projekt SvelteKit. Oto końcowa struktura, którą stworzymy:

bash

Kopiuj kod

Skopiuj kod do schowka

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Krok 1: Instalacja zależności

Zainstaluj niezbędne pakiety za pomocą npm:

bash

Kopiuj kod

Skopiuj kod do schowka

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Podstawowy pakiet i18n.
svelte-intlayer: Zapewnia dostawców kontekstu i sklepy dla Svelte/SvelteKit.
vite-intlayer: Wtyczka Vite do integracji deklaracji treści z procesem budowania.

Krok 2: Konfiguracja projektu

Utwórz plik konfiguracyjny w katalogu głównym projektu:

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Krok 3: Integracja Intlayer w konfiguracji Vite

Zaktualizuj swój plik vite.config.ts, aby uwzględnić wtyczkę Intlayer. Ta wtyczka obsługuje transpileację Twoich plików z treścią.

vite.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // kolejność ma znaczenie, Intlayer powinien być umieszczony przed SvelteKit});

Krok 4: Zadeklaruj swoją treść

Utwórz pliki deklaracji treści w dowolnym miejscu w folderze src (np. src/lib/content lub obok swoich komponentów). Pliki te definiują tłumaczoną treść dla Twojej aplikacji, używając funkcji t() dla każdego języka.

Krok 5: Wykorzystaj Intlayer w swoich komponentach

Teraz możesz użyć funkcji useIntlayer w dowolnym komponencie Svelte. Zwraca ona reaktywny store, który automatycznie aktualizuje się, gdy zmienia się lokalizacja. Funkcja automatycznie uwzględnia aktualną lokalizację (zarówno podczas SSR, jak i nawigacji po stronie klienta).

Uwaga: useIntlayer zwraca store Svelte, więc musisz użyć prefiksu `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Jak przetłumaczyć swoją aplikację SvelteKit – przewodnik i18n 2026 description: Dowiedz się, jak uczynić swoją stronę SvelteKit wielojęzyczną. Postępuj zgodnie z dokumentacją, aby zinternacjonalizować (i18n) i przetłumaczyć ją za pomocą Server-Side Rendering (SSR). keywords:

Internacjonalizacja
Dokumentacja
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Inicjalizacja historii

Przetłumacz swoją stronę SvelteKit za pomocą Intlayer | Internacjonalizacja (i18n)

Spis treści

Czym jest Intlayer?

Dzięki Intlayer możesz:

Łatwo zarządzać tłumaczeniami za pomocą deklaratywnych słowników na poziomie komponentów.
Dynamicznie lokalizować metadane, ścieżki i zawartość.
Zapewnić wsparcie TypeScript dzięki automatycznie generowanym typom.
Wykorzystać SSR SvelteKit dla SEO-przyjaznej internacjonalizacji.

Przewodnik krok po kroku: konfiguracja Intlayer w aplikacji SvelteKit

Aby rozpocząć, utwórz nowy projekt SvelteKit. Oto końcowa struktura, którą stworzymy:

bash

Kopiuj kod

Skopiuj kod do schowka

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Krok 1: Instalacja zależności

Zainstaluj niezbędne pakiety za pomocą npm:

bash

Kopiuj kod

Skopiuj kod do schowka

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Podstawowy pakiet i18n.
svelte-intlayer: Zapewnia dostawców kontekstu i sklepy dla Svelte/SvelteKit.
vite-intlayer: Wtyczka Vite do integracji deklaracji treści z procesem budowania.

Krok 2: Konfiguracja projektu

Utwórz plik konfiguracyjny w katalogu głównym projektu:

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Krok 3: Integracja Intlayer w konfiguracji Vite

Zaktualizuj swój plik vite.config.ts, aby uwzględnić wtyczkę Intlayer. Ta wtyczka obsługuje transpileację Twoich plików z treścią.

vite.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // kolejność ma znaczenie, Intlayer powinien być umieszczony przed SvelteKit});

Krok 4: Zadeklaruj swoją treść

Krok 5: Wykorzystaj Intlayer w swoich komponentach

, aby uzyskać dostęp do jego reaktywnej wartości (np. $content.title).

src/lib/components/Component.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" odpowiada kluczowi zdefiniowanemu w Kroku 4  const content = useIntlayer("hero-section");</script><!-- Renderuj treść jako prostą zawartość --><h1>{$content.title}</h1><!-- Aby renderować treść edytowalną za pomocą edytora --><h1>{@const Title = $content.title}<Title /></h1><!-- Aby wyrenderować zawartość jako ciąg znaków --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opcjonalny) Krok 6: Skonfiguruj routing

Poniższe kroki pokazują, jak skonfigurować routing oparty na lokalizacji w SvelteKit. Pozwala to na dodanie prefiksu lokalizacji do adresów URL (np. /en/about, /fr/about) dla lepszego SEO i doświadczenia użytkownika.

bash

Kopiuj kod

Skopiuj kod do schowka

.└─── src    ├── app.d.ts                  # Definiuje typ lokalizacji    ├── hooks.server.ts           # Zarządza routingiem lokalizacji    ├── lib    │   └── getLocale.ts          # Sprawdza lokalizację z nagłówka, ciasteczek    ├── params    │   └── locale.ts             # Definiuje parametr lokalizacji    └── routes        ├── [[locale=locale]]     # Opakowuje w grupę tras, aby ustawić lokalizację        │   ├── +layout.svelte    # Lokalny layout dla trasy        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Główny layout dla fontów i stylów globalnych

Krok 7: Obsługa wykrywania lokalizacji po stronie serwera (Hooks)

W SvelteKit serwer musi znać lokalizację użytkownika, aby wyrenderować odpowiednią zawartość podczas SSR. Używamy hooks.server.ts do wykrywania lokalizacji z URL lub ciasteczek.

Utwórz lub zmodyfikuj plik src/hooks.server.ts:

src/hooks.server.ts

Kopiuj kod

Skopiuj kod do schowka

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Sprawdź, czy bieżąca ścieżka już zaczyna się od lokalizacji (np. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Jeśli w URL nie ma lokalizacji (np. użytkownik odwiedza "/"), przekieruj go  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Tymczasowe przekierowanie    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Następnie utwórz pomocnika do pobierania lokalizacji użytkownika z eventu żądania:

src/lib/getLocale.ts

Kopiuj kod

Skopiuj kod do schowka

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Pobierz lokalizację użytkownika z eventu żądania. * Ta funkcja jest używana w hooku `handle` w `src/hooks.server.ts`. * * Najpierw próbuje pobrać lokalizację z magazynu Intlayer (ciasteczka lub niestandardowe nagłówki). * Jeśli lokalizacja nie zostanie znaleziona, następuje odwołanie do negocjacji "Accept-Language" przeglądarki. * * @param event - Event żądania z SvelteKit * @returns Lokalizacja użytkownika */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Próba pobrania lokalizacji z magazynu Intlayer (ciasteczka lub nagłówki)  const storedLocale = getLocaleFromStorage({    // Dostęp do ciasteczek SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Dostęp do nagłówków SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Powrót do negocjacji "Accept-Language" przeglądarki  const negotiatorHeaders: Record<string, string> = {};  // Konwersja obiektu Headers SvelteKit na zwykły Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Sprawdzenie lokalizacji z nagłówka `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Zwróć domyślną lokalizację, jeśli nie znaleziono dopasowania  return defaultLocale;};

getLocaleFromStorage sprawdzi lokalizację na podstawie nagłówka lub ciasteczka w zależności od Twojej konfiguracji. Zobacz Konfiguracja po więcej szczegółów.

Funkcja localeDetector przetworzy nagłówek Accept-Language i zwróci najlepsze dopasowanie.

Jeśli lokalizacja nie jest skonfigurowana, chcemy zwrócić błąd 404. Aby to ułatwić, możemy stworzyć funkcję match, która sprawdzi, czy lokalizacja jest poprawna:

/src/params/locale.ts

Kopiuj kod

Skopiuj kod do schowka

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Uwaga: Upewnij się, że Twój plik src/app.d.ts zawiera definicję lokalizacji:
typescript
Kopiuj kod
Skopiuj kod do schowka
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Dla pliku +layout.svelte możemy usunąć wszystko, aby zachować tylko statyczną zawartość, niezwiązaną z i18n:

src/+layout.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Następnie utwórz nową stronę i layout w grupie [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Kopiuj kod

Skopiuj kod do schowka

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Użyj generycznego typu Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicjalizuj Intlayer z lokalizacją z trasy  $effect(() => {      setupIntlayer(data.locale);  });    // Użyj słownika zawartości layoutu    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Kopiuj kod

Skopiuj kod do schowka

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Użyj słownika treści strony głównej    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opcjonalny) Krok 8: Linki z internacjonalizacją

Dla SEO zaleca się poprzedzanie swoich ścieżek lokalizacją (np. /en/about, /fr/about). Ten komponent automatycznie dodaje prefiks lokalizacji do każdego linku.

src/lib/components/LocalizedLink.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Pomocnik do dodawania prefiksu lokalizacji do URL  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Jeśli używasz goto z SvelteKit, możesz zastosować tę samą logikę z getLocalizedUrl, aby nawigować do zlokalizowanego URL:

typescript

Kopiuj kod

Skopiuj kod do schowka

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Nawiguje do /en/about lub /fr/about w zależności od lokalizacji

(Opcjonalny) Krok 9: Przełącznik języka

Aby umożliwić użytkownikom zmianę języka, zaktualizuj URL.

src/lib/components/LanguageSwitcher.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Ustawi locale w store i wywoła onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opcjonalny) Krok 10: Dodaj backend proxy

Aby dodać backend proxy do swojej aplikacji SvelteKit, możesz użyć funkcji intlayerProxy dostarczonej przez wtyczkę vite-intlayer. Ta wtyczka automatycznie wykryje najlepszy locale dla użytkownika na podstawie URL, ciasteczek i preferencji językowych przeglądarki.

vite.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Opcjonalny) Krok 11: Konfiguracja edytora intlayer / CMS

Aby skonfigurować edytor intlayer, należy postępować zgodnie z dokumentacją edytora intlayer.

Aby skonfigurować CMS intlayer, należy postępować zgodnie z dokumentacją CMS intlayer.

Aby móc wizualizować selektor edytora intlayer, musisz użyć składni komponentu w swojej zawartości intlayer.

Component.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderuj zawartość jako prostą zawartość -->  <h1>{$content.title}</h1>  <!-- Renderuj zawartość jako komponent (wymagane przez edytor) -->  {@const Component = $content.component}<Component /></div>

Konfiguracja Git

Zaleca się ignorowanie plików generowanych przez Intlayer.

.gitignore

Kopiuj kod

Skopiuj kod do schowka

# Ignoruj pliki generowane przez Intlayer.intlayer

(Opcjonalnie) Krok 12 : Wyodrębnij zawartość swoich komponentów

Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.

Aby ułatwić ten proces, Intlayer proponuje kompilator / ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość.

Aby go skonfigurować, możesz dodać sekcję compiler w pliku intlayer.config.ts:

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Reszta Twojej konfiguracji
  compiler: {
    /**
     * Wskazuje, czy kompilator powinien być włączony.
     */
    enabled: true,

    /**
     * Definiuje ścieżkę plików wyjściowych
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
     */
    saveComponents: false,

    /**
     * Prefiks klucza słownika
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość

bash

Kopiuj kod

Skopiuj kod do schowka

npx intlayer extract

Zaktualizuj vite.config.ts, aby dołączyć wtyczkę intlayerCompiler:

vite.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Dodaje wtyczkę kompilatora ],});

bash

Kopiuj kod

Skopiuj kod do schowka

npm run build # Lub npm run dev

Idź dalej

Edytor wizualny: Zintegruj Intlayer Visual Editor, aby edytować tłumaczenia bezpośrednio z interfejsu użytkownika.
CMS: Zewnętrz zarządzanie treścią, korzystając z Intlayer CMS.

Vite dan Svelte

Vite dan Preact

\n\n\n

{$content.title}

\n\n

\n\t

\n\t\t{$homeContent.title}\n\t

\n {\n e.preventDefault();\n setLocale(localeEl); // Ustawi locale w store i wywoła onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n \n

{$content.title}

\n\n \n {@const Component = $content.component}\n

Data utworzenia:2025-11-20Ostatnia aktualizacja:2026-05-06

Zobacz szablon aplikacji na GitHubie

Na tej stronie dostępny jest szablon aplikacji.

Zobacz aplikację pokazową

Ta strona prowadzi do działającej demonstracji szablonu.

Prześlij ten dokument do swojego ulubionego asystenta AI

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Zadaj pytanie i otrzymaj streszczenie dokumentu, odwołując się do tej strony i wybranego dostawcy AI

Historia wersji

"Aktualizacja użycia API useIntlayer w Solid do bezpośredniego dostępu do właściwości"
v8.9.04.05.2026
"Dodaj polecenie init"
v7.5.930.12.2025
"Inicjalizacja historii"
v7.1.1020.11.2025

Treść tej strony została przetłumaczona przy użyciu sztucznej inteligencji.

Zobacz ostatnią wersję oryginalnej treści w języku angielskim

Edytuj tę dokumentację

Jeśli masz pomysł na ulepszenie tej dokumentacji, zachęcamy do przesłania pull requesta na GitHubie.

Link do dokumentacji na GitHubie

Kopiuj

Kopiuj dokument Markdown do schowka

Przetłumacz swoją stronę SvelteKit za pomocą Intlayer | Internacjonalizacja (i18n)

ide.intlayer.org

Spis treści

Czym jest Intlayer?

Dzięki Intlayer możesz:

Łatwo zarządzać tłumaczeniami za pomocą deklaratywnych słowników na poziomie komponentów.
Dynamicznie lokalizować metadane, ścieżki i zawartość.
Zapewnić wsparcie TypeScript dzięki automatycznie generowanym typom.
Wykorzystać SSR SvelteKit dla SEO-przyjaznej internacjonalizacji.

Przewodnik krok po kroku: konfiguracja Intlayer w aplikacji SvelteKit

Aby rozpocząć, utwórz nowy projekt SvelteKit. Oto końcowa struktura, którą stworzymy:

bash

Kopiuj kod

Skopiuj kod do schowka

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Krok 1: Instalacja zależności

Zainstaluj niezbędne pakiety za pomocą npm:

bash

Kopiuj kod

Skopiuj kod do schowka

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Podstawowy pakiet i18n.
svelte-intlayer: Zapewnia dostawców kontekstu i sklepy dla Svelte/SvelteKit.
vite-intlayer: Wtyczka Vite do integracji deklaracji treści z procesem budowania.

Krok 2: Konfiguracja projektu

Utwórz plik konfiguracyjny w katalogu głównym projektu:

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Krok 3: Integracja Intlayer w konfiguracji Vite

Zaktualizuj swój plik vite.config.ts, aby uwzględnić wtyczkę Intlayer. Ta wtyczka obsługuje transpileację Twoich plików z treścią.

vite.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // kolejność ma znaczenie, Intlayer powinien być umieszczony przed SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // kolejność ma znaczenie, Intlayer powinien być umieszczony przed SvelteKit});

Krok 4: Zadeklaruj swoją treść

Krok 5: Wykorzystaj Intlayer w swoich komponentach

Uwaga: useIntlayer zwraca store Svelte, więc musisz użyć prefiksu `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Jak przetłumaczyć swoją aplikację SvelteKit – przewodnik i18n 2026 description: Dowiedz się, jak uczynić swoją stronę SvelteKit wielojęzyczną. Postępuj zgodnie z dokumentacją, aby zinternacjonalizować (i18n) i przetłumaczyć ją za pomocą Server-Side Rendering (SSR). keywords:

Internacjonalizacja
Dokumentacja
Intlayer
SvelteKit
JavaScript
SSR slugs:
doc
environment
sveltekit applicationTemplate: https://github.com/aymericzip/intlayer-sveltekit-template history:
version: 7.1.10 date: 2025-11-20 changes: Inicjalizacja historii

Przetłumacz swoją stronę SvelteKit za pomocą Intlayer | Internacjonalizacja (i18n)

Spis treści

Czym jest Intlayer?

Dzięki Intlayer możesz:

Łatwo zarządzać tłumaczeniami za pomocą deklaratywnych słowników na poziomie komponentów.
Dynamicznie lokalizować metadane, ścieżki i zawartość.
Zapewnić wsparcie TypeScript dzięki automatycznie generowanym typom.
Wykorzystać SSR SvelteKit dla SEO-przyjaznej internacjonalizacji.

Przewodnik krok po kroku: konfiguracja Intlayer w aplikacji SvelteKit

Aby rozpocząć, utwórz nowy projekt SvelteKit. Oto końcowa struktura, którą stworzymy:

bash

Kopiuj kod

Skopiuj kod do schowka

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

.├── intlayer.config.ts├── package.json├── src│   ├── app.d.ts│   ├── app.html│   ├── hooks.server.ts│   ├── lib│   │   ├── getLocale.ts│   │   ├── LocaleSwitcher.svelte│   │   └── LocalizedLink.svelte│   ├── params│   │   └── locale.ts│   └── routes│       ├── [[locale=locale]]│       │   ├── +layout.svelte│       │   ├── +layout.ts│       │   ├── +page.svelte│       │   ├── +page.ts│       │   ├── about│       │   │   ├── +page.svelte│       │   │   ├── +page.ts│       │   │   └── page.content.ts│       │   ├── Counter.content.ts│       │   ├── Counter.svelte│       │   ├── Header.content.ts│       │   ├── Header.svelte│       │   ├── home.content.ts│       │   └── layout.content.ts│       ├── +layout.svelte│       └── layout.css├── static│   ├── favicon.svg│   └── robots.txt├── svelte.config.js├── tsconfig.json└── vite.config.ts

Krok 1: Instalacja zależności

Zainstaluj niezbędne pakiety za pomocą npm:

bash

Kopiuj kod

Skopiuj kod do schowka

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

npm install intlayer svelte-intlayernpm install vite-intlayer --save-devnpx intlayer init

intlayer: Podstawowy pakiet i18n.
svelte-intlayer: Zapewnia dostawców kontekstu i sklepy dla Svelte/SvelteKit.
vite-intlayer: Wtyczka Vite do integracji deklaracji treści z procesem budowania.

Krok 2: Konfiguracja projektu

Utwórz plik konfiguracyjny w katalogu głównym projektu:

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ENGLISH,  },};export default config;

Krok 3: Integracja Intlayer w konfiguracji Vite

Zaktualizuj swój plik vite.config.ts, aby uwzględnić wtyczkę Intlayer. Ta wtyczka obsługuje transpileację Twoich plików z treścią.

vite.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // kolejność ma znaczenie, Intlayer powinien być umieszczony przed SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // kolejność ma znaczenie, Intlayer powinien być umieszczony przed SvelteKit});

Krok 4: Zadeklaruj swoją treść

Krok 5: Wykorzystaj Intlayer w swoich komponentach

, aby uzyskać dostęp do jego reaktywnej wartości (np. $content.title).

src/lib/components/Component.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" odpowiada kluczowi zdefiniowanemu w Kroku 4  const content = useIntlayer("hero-section");</script><!-- Renderuj treść jako prostą zawartość --><h1>{$content.title}</h1><!-- Aby renderować treść edytowalną za pomocą edytora --><h1>{@const Title = $content.title}<Title /></h1><!-- Aby wyrenderować zawartość jako ciąg znaków --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" odpowiada kluczowi zdefiniowanemu w Kroku 4  const content = useIntlayer("hero-section");</script><!-- Renderuj treść jako prostą zawartość --><h1>{$content.title}</h1><!-- Aby renderować treść edytowalną za pomocą edytora --><h1>{@const Title = $content.title}<Title /></h1><!-- Aby wyrenderować zawartość jako ciąg znaków --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Opcjonalny) Krok 6: Skonfiguruj routing

bash

Kopiuj kod

Skopiuj kod do schowka

.└─── src    ├── app.d.ts                  # Definiuje typ lokalizacji    ├── hooks.server.ts           # Zarządza routingiem lokalizacji    ├── lib    │   └── getLocale.ts          # Sprawdza lokalizację z nagłówka, ciasteczek    ├── params    │   └── locale.ts             # Definiuje parametr lokalizacji    └── routes        ├── [[locale=locale]]     # Opakowuje w grupę tras, aby ustawić lokalizację        │   ├── +layout.svelte    # Lokalny layout dla trasy        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Główny layout dla fontów i stylów globalnych

.└─── src    ├── app.d.ts                  # Definiuje typ lokalizacji    ├── hooks.server.ts           # Zarządza routingiem lokalizacji    ├── lib    │   └── getLocale.ts          # Sprawdza lokalizację z nagłówka, ciasteczek    ├── params    │   └── locale.ts             # Definiuje parametr lokalizacji    └── routes        ├── [[locale=locale]]     # Opakowuje w grupę tras, aby ustawić lokalizację        │   ├── +layout.svelte    # Lokalny layout dla trasy        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Główny layout dla fontów i stylów globalnych

Krok 7: Obsługa wykrywania lokalizacji po stronie serwera (Hooks)

W SvelteKit serwer musi znać lokalizację użytkownika, aby wyrenderować odpowiednią zawartość podczas SSR. Używamy hooks.server.ts do wykrywania lokalizacji z URL lub ciasteczek.

Utwórz lub zmodyfikuj plik src/hooks.server.ts:

src/hooks.server.ts

Kopiuj kod

Skopiuj kod do schowka

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Sprawdź, czy bieżąca ścieżka już zaczyna się od lokalizacji (np. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Jeśli w URL nie ma lokalizacji (np. użytkownik odwiedza "/"), przekieruj go  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Tymczasowe przekierowanie    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

import type { Handle } from "@sveltejs/kit";import { getLocalizedUrl } from "intlayer";import { getLocale } from "$lib/getLocale";export const handle: Handle = async ({ event, resolve }) => {  const detectedLocale = getLocale(event);  // Sprawdź, czy bieżąca ścieżka już zaczyna się od lokalizacji (np. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Jeśli w URL nie ma lokalizacji (np. użytkownik odwiedza "/"), przekieruj go  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Tymczasowe przekierowanie    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Następnie utwórz pomocnika do pobierania lokalizacji użytkownika z eventu żądania:

src/lib/getLocale.ts

Kopiuj kod

Skopiuj kod do schowka

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Pobierz lokalizację użytkownika z eventu żądania. * Ta funkcja jest używana w hooku `handle` w `src/hooks.server.ts`. * * Najpierw próbuje pobrać lokalizację z magazynu Intlayer (ciasteczka lub niestandardowe nagłówki). * Jeśli lokalizacja nie zostanie znaleziona, następuje odwołanie do negocjacji "Accept-Language" przeglądarki. * * @param event - Event żądania z SvelteKit * @returns Lokalizacja użytkownika */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Próba pobrania lokalizacji z magazynu Intlayer (ciasteczka lub nagłówki)  const storedLocale = getLocaleFromStorage({    // Dostęp do ciasteczek SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Dostęp do nagłówków SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Powrót do negocjacji "Accept-Language" przeglądarki  const negotiatorHeaders: Record<string, string> = {};  // Konwersja obiektu Headers SvelteKit na zwykły Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Sprawdzenie lokalizacji z nagłówka `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Zwróć domyślną lokalizację, jeśli nie znaleziono dopasowania  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Pobierz lokalizację użytkownika z eventu żądania. * Ta funkcja jest używana w hooku `handle` w `src/hooks.server.ts`. * * Najpierw próbuje pobrać lokalizację z magazynu Intlayer (ciasteczka lub niestandardowe nagłówki). * Jeśli lokalizacja nie zostanie znaleziona, następuje odwołanie do negocjacji "Accept-Language" przeglądarki. * * @param event - Event żądania z SvelteKit * @returns Lokalizacja użytkownika */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Próba pobrania lokalizacji z magazynu Intlayer (ciasteczka lub nagłówki)  const storedLocale = getLocaleFromStorage({    // Dostęp do ciasteczek SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Dostęp do nagłówków SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Powrót do negocjacji "Accept-Language" przeglądarki  const negotiatorHeaders: Record<string, string> = {};  // Konwersja obiektu Headers SvelteKit na zwykły Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Sprawdzenie lokalizacji z nagłówka `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Zwróć domyślną lokalizację, jeśli nie znaleziono dopasowania  return defaultLocale;};

getLocaleFromStorage sprawdzi lokalizację na podstawie nagłówka lub ciasteczka w zależności od Twojej konfiguracji. Zobacz Konfiguracja po więcej szczegółów.

Funkcja localeDetector przetworzy nagłówek Accept-Language i zwróci najlepsze dopasowanie.

Jeśli lokalizacja nie jest skonfigurowana, chcemy zwrócić błąd 404. Aby to ułatwić, możemy stworzyć funkcję match, która sprawdzi, czy lokalizacja jest poprawna:

/src/params/locale.ts

Kopiuj kod

Skopiuj kod do schowka

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

export const match = (param: Locale = defaultLocale): boolean =>  locales.includes(param);

Uwaga: Upewnij się, że Twój plik src/app.d.ts zawiera definicję lokalizacji:
typescript
Kopiuj kod
Skopiuj kod do schowka
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Dla pliku +layout.svelte możemy usunąć wszystko, aby zachować tylko statyczną zawartość, niezwiązaną z i18n:

src/+layout.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

<script lang="ts">     import './layout.css';    let { children } = $props();</script><div class="app">    {@render children()}</div><style>    .app {    /*  */    }</style>

Następnie utwórz nową stronę i layout w grupie [[locale=locale]]:

src/routes/[[locale=locale]]/+layout.ts

Kopiuj kod

Skopiuj kod do schowka

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Użyj generycznego typu Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Użyj generycznego typu Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

src/routes/[[locale=locale]]/+layout.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicjalizuj Intlayer z lokalizacją z trasy  $effect(() => {      setupIntlayer(data.locale);  });    // Użyj słownika zawartości layoutu    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

<script lang="ts">    import type { Snippet } from 'svelte';    import { useIntlayer, setupIntlayer } from "svelte-intlayer";    import Header from './Header.svelte';    import type { LayoutData } from './$types';    let { children, data }: { children: Snippet, data: LayoutData } = $props();    // Inicjalizuj Intlayer z lokalizacją z trasy  $effect(() => {      setupIntlayer(data.locale);  });    // Użyj słownika zawartości layoutu    const layoutContent = useIntlayer('layout');</script><Header /><main>    {@render children()}</main><footer>    <p>        {$layoutContent.footer.prefix.value}{' '}        <a href="https://svelte.dev/docs/kit">{$layoutContent.footer.linkLabel.value}</a>{' '}        {$layoutContent.footer.suffix.value}    </p></footer><style>  /*  */</style>

src/routes/[[locale=locale]]/+page.ts

Kopiuj kod

Skopiuj kod do schowka

export const prerender = true;

export const prerender = true;

src/routes/[[locale=locale]]/+page.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Użyj słownika treści strony głównej    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Użyj słownika treści strony głównej    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Opcjonalny) Krok 8: Linki z internacjonalizacją

Dla SEO zaleca się poprzedzanie swoich ścieżek lokalizacją (np. /en/about, /fr/about). Ten komponent automatycznie dodaje prefiks lokalizacji do każdego linku.

src/lib/components/LocalizedLink.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Pomocnik do dodawania prefiksu lokalizacji do URL  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Pomocnik do dodawania prefiksu lokalizacji do URL  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Jeśli używasz goto z SvelteKit, możesz zastosować tę samą logikę z getLocalizedUrl, aby nawigować do zlokalizowanego URL:

typescript

Kopiuj kod

Skopiuj kod do schowka

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Nawiguje do /en/about lub /fr/about w zależności od lokalizacji

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Nawiguje do /en/about lub /fr/about w zależności od lokalizacji

(Opcjonalny) Krok 9: Przełącznik języka

Aby umożliwić użytkownikom zmianę języka, zaktualizuj URL.

src/lib/components/LanguageSwitcher.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Ustawi locale w store i wywoła onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

<script lang="ts">  import { getLocalizedUrl, getLocaleName } from 'intlayer';  import { useLocale } from "svelte-intlayer";  import { page } from '$app/stores';  import { goto } from '$app/navigation';  const { locale, setLocale, availableLocales } = useLocale({    onLocaleChange: (newLocale) => {      const localizedPath = getLocalizedUrl($page.url.pathname, newLocale);      goto(localizedPath);    },  });</script><ul class="locale-list">  {#each availableLocales as localeEl}    <li>      <a        href={getLocalizedUrl($page.url.pathname, localeEl)}        onclick={(e) => {          e.preventDefault();          setLocale(localeEl); // Ustawi locale w store i wywoła onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Opcjonalny) Krok 10: Dodaj backend proxy

vite.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

import { defineConfig } from "vite";import { intlayer, intlayerProxy } from "vite-intlayer";import { sveltekit } from "@sveltejs/kit/vite";// https://vitejs.dev/config/export default defineConfig({  plugins: [    intlayerProxy(), // should be placed first    intlayer(),    sveltekit(),  ],],});

(Opcjonalny) Krok 11: Konfiguracja edytora intlayer / CMS

Aby skonfigurować edytor intlayer, należy postępować zgodnie z dokumentacją edytora intlayer.

Aby skonfigurować CMS intlayer, należy postępować zgodnie z dokumentacją CMS intlayer.

Aby móc wizualizować selektor edytora intlayer, musisz użyć składni komponentu w swojej zawartości intlayer.

Component.svelte

Kopiuj kod

Skopiuj kod do schowka

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderuj zawartość jako prostą zawartość -->  <h1>{$content.title}</h1>  <!-- Renderuj zawartość jako komponent (wymagane przez edytor) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Renderuj zawartość jako prostą zawartość -->  <h1>{$content.title}</h1>  <!-- Renderuj zawartość jako komponent (wymagane przez edytor) -->  {@const Component = $content.component}<Component /></div>

Konfiguracja Git

Zaleca się ignorowanie plików generowanych przez Intlayer.

.gitignore

Kopiuj kod

Skopiuj kod do schowka

# Ignoruj pliki generowane przez Intlayer.intlayer

# Ignoruj pliki generowane przez Intlayer.intlayer

(Opcjonalnie) Krok 12 : Wyodrębnij zawartość swoich komponentów

Jeśli masz istniejącą bazę kodu, transformacja tysięcy plików może być czasochłonna.

Aby ułatwić ten proces, Intlayer proponuje kompilator / ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość.

Aby go skonfigurować, możesz dodać sekcję compiler w pliku intlayer.config.ts:

intlayer.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Reszta Twojej konfiguracji
  compiler: {
    /**
     * Wskazuje, czy kompilator powinien być włączony.
     */
    enabled: true,

    /**
     * Definiuje ścieżkę plików wyjściowych
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Wskazuje, czy komponenty powinny zostać zapisane po transformacji. W ten sposób kompilator można uruchomić tylko raz, aby przetransformować aplikację, a następnie go usunąć.
     */
    saveComponents: false,

    /**
     * Prefiks klucza słownika
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Uruchom ekstraktor, aby przetransformować komponenty i wyodrębnić zawartość

bash

Kopiuj kod

Skopiuj kod do schowka

npx intlayer extract

npx intlayer extract

Zaktualizuj vite.config.ts, aby dołączyć wtyczkę intlayerCompiler:

vite.config.ts

Kopiuj kod

Skopiuj kod do schowka

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Dodaje wtyczkę kompilatora ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Dodaje wtyczkę kompilatora ],});

bash

Kopiuj kod

Skopiuj kod do schowka

npm run build # Lub npm run dev

npm run build # Lub npm run dev

Idź dalej

Edytor wizualny: Zintegruj Intlayer Visual Editor, aby edytować tłumaczenia bezpośrednio z interfejsu użytkownika.
CMS: Zewnętrz zarządzanie treścią, korzystając z Intlayer CMS.

Vite dan Svelte

Vite dan Preact