\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### (Optional) Schritt 6: Routing einrichten\n\nDie folgenden Schritte zeigen, wie man lokalisierungsbasiertes Routing in SvelteKit einrichtet. Dadurch können Ihre URLs das Locale-Präfix enthalten (z. B. `/en/about`, `/fr/about`) für bessere SEO und Benutzererfahrung.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Definiert den Locale-Typ\n ├── hooks.server.ts # Verwalten des Locale-Routings\n ├── lib\n │ └── getLocale.ts # Prüft die Locale aus Header, Cookies\n ├── params\n │ └── locale.ts # Definiert den Locale-Parameter\n └── routes\n ├── [[locale=locale]] # In einer Routengruppe einwickeln, um die Locale zu setzen\n │ ├── +layout.svelte # Lokales Layout für die Route\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Root-Layout für Schriftarten und globale Styles\n```\n\n### Schritt 7: Serverseitige Lokalerkennung (Hooks) verwalten\n\nIn SvelteKit muss der Server die Locale des Benutzers kennen, um während des SSR den korrekten Inhalt zu rendern. Wir verwenden `hooks.server.ts`, um die Locale aus der URL oder Cookies zu erkennen.\n\nErstellen oder ändern Sie `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 // Prüfen, ob der aktuelle Pfad bereits mit einer Locale beginnt (z.B. /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Wenn KEINE Locale in der URL vorhanden ist (z.B. Benutzer besucht \"/\"), weiterleiten\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Temporäre Weiterleitung\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nErstellen Sie dann einen Helfer, um die Locale des Benutzers aus dem Request-Event zu erhalten:\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 * Ermittelt die Locale des Benutzers aus dem Request-Event.\n * Diese Funktion wird im `handle` Hook in `src/hooks.server.ts` verwendet.\n *\n * Zuerst wird versucht, die Locale aus dem Intlayer-Speicher (Cookies oder benutzerdefinierte Header) zu erhalten.\n * Falls keine Locale gefunden wird, erfolgt ein Fallback auf die Browser-\"Accept-Language\" Verhandlung.\n *\n * @param event - Das Request-Event von SvelteKit\n * @returns Die Locale des Benutzers\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Versuche, die Locale aus dem Intlayer-Speicher (Cookies oder Header) zu erhalten\n const storedLocale = getLocaleFromStorage({\n // Zugriff auf SvelteKit-Cookies\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Zugriff auf SvelteKit-Header\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Fallback auf Browser-\"Accept-Language\"-Verhandlung\n const negotiatorHeaders: Record<string, string> = {};\n\n // Konvertiere SvelteKit Headers-Objekt in ein einfaches Record<string, string>\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Prüfe die Locale aus dem `Accept-Language`-Header\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Rückgabe der Standard-Locale, falls keine Übereinstimmung gefunden wurde\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` überprüft die Locale aus dem Header oder Cookie, abhängig von Ihrer Konfiguration. Weitere Details finden Sie unter [Configuration](https://intlayer.org/doc/configuration).\n\n> Die Funktion `localeDetector` verarbeitet den `Accept-Language`-Header und gibt die beste Übereinstimmung zurück.\n\nWenn die Locale nicht konfiguriert ist, möchten wir einen 404-Fehler zurückgeben. Um dies zu erleichtern, können wir eine `match`-Funktion erstellen, um zu überprüfen, ob die Locale gültig ist:\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> **Hinweis:** Stellen Sie sicher, dass Ihre `src/app.d.ts` die Locale-Definition enthält:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nFür die Datei `+layout.svelte` können wir alles entfernen, um nur statischen Inhalt zu behalten, der nicht mit i18n zusammenhängt:\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\nErstellen Sie dann eine neue Seite und ein Layout unter der Gruppe `[[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// Verwenden Sie den generischen Load-Typ\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// Initialisiere Intlayer mit der Locale aus der Route\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Verwende das Layout-Inhaltsverzeichnis\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// Verwenden Sie das Inhaltswörterbuch für die Startseite\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### (Optional) Schritt 8: Internationalisierte Links\n\nFür SEO wird empfohlen, Ihre Routen mit dem Locale zu versehen (z. B. `/en/about`, `/fr/about`). Diese Komponente fügt automatisch jedem Link das aktuelle Locale als Präfix hinzu.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nWenn Sie `goto` von SvelteKit verwenden, können Sie dieselbe Logik mit `getLocalizedUrl` verwenden, um zur lokalisierten URL zu navigieren:\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); // Navigiert zu /en/about oder /fr/about je nach Locale\n```\n\n### (Optional) Schritt 9: Sprachumschalter\n\nUm den Benutzern das Wechseln der Sprache zu ermöglichen, aktualisieren Sie die URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Setzt die Locale im Store und löst onLocaleChange aus\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Optional) Schritt 10: Backend-Proxy hinzufügen\n\nUm einen Backend-Proxy zu deiner SvelteKit-Anwendung hinzuzufügen, kannst du die Funktion `intlayerProxy` verwenden, die vom `vite-intlayer` Plugin bereitgestellt wird. Dieses Plugin erkennt automatisch die beste Locale für den Benutzer basierend auf der URL, Cookies und den Spracheinstellungen des Browsers.\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### (Optional) Schritt 11: Einrichtung des intlayer Editors / CMS\n\nUm den intlayer Editor einzurichten, müssen Sie der [intlayer Editor Dokumentation](/de/doc/concept/editor) folgen.\n\nUm das intlayer CMS einzurichten, müssen Sie der [intlayer CMS Dokumentation](/de/doc/concept/cms) folgen.\n\nUm den Intlayer-Editor-Selektor visualisieren zu können, müssen Sie die Komponentensyntax in Ihrem Intlayer-Inhalt verwenden.\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### Git-Konfiguration\n\nEs wird empfohlen, die von Intlayer generierten Dateien zu ignorieren.\n\n```plaintext fileName=\".gitignore\"\n# Ignoriere die von Intlayer generierten Dateien\n.intlayer\n```\n\n---\n\n### (Optional) Schritt 12 : Inhalt Ihrer Komponenten extrahieren\n\nWenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.\n\nUm diesen Prozess zu erleichtern, bietet Intlayer einen [Compiler](/de/doc/compiler) / [Extractor](/de/doc/concept/cli/extract) an, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren.\n\nUm es einzurichten, können Sie einen `compiler`-Abschnitt in Ihrer `intlayer.config.ts`-Datei hinzufügen:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Rest Ihrer Konfiguration\n compiler: {\n /**\n * Gibt an, ob der Compiler aktiviert sein soll.\n */\n enabled: true,\n\n /**\n * Definiert den Pfad der Ausgabedateien\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Gibt an, ob die Komponenten nach der Transformation gespeichert werden sollen. Auf diese Weise kann der Compiler nur einmal ausgeführt werden, um die App zu transformieren, und dann entfernt werden.\n */\n saveComponents: false,\n\n /**\n * Präfix für Wörterbuchschlüssel\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nFühren Sie den Extractor aus, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren\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\nAktualisieren Sie Ihre `vite.config.ts`, um das `intlayerCompiler`-Plugin aufzunehmen:\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(), // Fügt das Compiler-Plugin hinzu\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Oder npm run dev\n```\n\n```bash packageManager=\"pnpm\"\npnpm run build # Oder pnpm run dev\n```\n\n```bash packageManager=\"yarn\"\nyarn build # Oder yarn dev\n```\n\n```bash packageManager=\"bun\"\nbun run build # Or bun run dev\n```\n\n \n\n\n### Weiterführende Informationen\n\n- **Visueller Editor**: Integrieren Sie den [Intlayer Visual Editor](/de/doc/concept/editor), um Übersetzungen direkt über die Benutzeroberfläche zu bearbeiten.\n- **CMS**: Externalisieren Sie Ihr Content-Management mit dem [Intlayer CMS](/de/doc/concept/cms).\n","about":"Entdecken Sie, wie Sie Ihre SvelteKit-Website mehrsprachig gestalten. Folgen Sie der Dokumentation, um sie mit Server-Side Rendering (SSR) zu internationalisieren (i18n) und zu übersetzen.","url":"https://intlayer.org/de/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Internationalisierung, Dokumentation, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Entwickler, Inhaltsmanager"}}

Erstellung:2025-11-20Letzte Aktualisierung:2026-05-06

Anwendungsvorlage auf GitHub ansehen

Für diese Seite ist eine Anwendungsvorlage verfügbar.

Showcase-Anwendung ansehen

Diese Seite verlinkt auf eine Live-Demo der Vorlage.

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-Assistenten

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren

Versionshistorie

"Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
v8.9.04.5.2026
"Init-Befehl hinzufügen"
v7.5.930.12.2025
"Historie initialisiert"
v7.1.1020.11.2025

Der Inhalt dieser Seite wurde mit einer KI übersetzt.

Den englischen Originaltext ansehen

Diese Dokumentation bearbeiten

Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.

GitHub-Link zur Dokumentation

Kopieren

Markdown des Dokuments in die Zwischenablage kopieren

Übersetzen Sie Ihre SvelteKit-Website mit Intlayer | Internationalisierung (i18n)

ide.intlayer.org

Inhaltsverzeichnis

Was ist Intlayer?

Intlayer ist eine innovative, Open-Source-Internationalisierungsbibliothek (i18n), die entwickelt wurde, um die mehrsprachige Unterstützung in modernen Webanwendungen zu vereinfachen. Sie arbeitet nahtlos mit den Server-Side-Rendering (SSR)-Fähigkeiten von SvelteKit zusammen.

Mit Intlayer können Sie:

Übersetzungen einfach verwalten durch deklarative Wörterbücher auf Komponentenebene.
Metadaten, Routen und Inhalte dynamisch lokalisieren.
TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen.
SvelteKits SSR nutzen für SEO-freundliche Internationalisierung.

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer SvelteKit-Anwendung

Um zu beginnen, erstellen Sie ein neues SvelteKit-Projekt. Hier ist die finale Struktur, die wir erstellen werden:

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

.├── 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

Schritt 1: Abhängigkeiten installieren

Installieren Sie die notwendigen Pakete mit npm:

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

intlayer: Das Kernpaket für i18n.
svelte-intlayer: Stellt Context-Provider und Stores für Svelte/SvelteKit bereit.
vite-intlayer: Das Vite-Plugin zur Integration von Inhaltsdeklarationen in den Build-Prozess.

Schritt 2: Konfiguration Ihres Projekts

Erstellen Sie eine Konfigurationsdatei im Stammverzeichnis Ihres Projekts:

intlayer.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Schritt 3: Integrieren Sie Intlayer in Ihre Vite-Konfiguration

Aktualisieren Sie Ihre vite.config.ts, um das Intlayer-Plugin einzubinden. Dieses Plugin übernimmt die Transpilierung Ihrer Inhaltsdateien.

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // Reihenfolge ist wichtig, Intlayer sollte vor SvelteKit stehen});

Schritt 4: Deklarieren Sie Ihren Inhalt

Erstellen Sie Ihre Inhaltsdeklarationsdateien irgendwo in Ihrem src-Ordner (z. B. src/lib/content oder neben Ihren Komponenten). Diese Dateien definieren den übersetzbaren Inhalt für Ihre Anwendung mithilfe der Funktion t() für jede Locale.

Schritt 5: Verwenden Sie Intlayer in Ihren Komponenten

Jetzt können Sie die Funktion useIntlayer in jeder Svelte-Komponente verwenden. Sie gibt einen reaktiven Store zurück, der sich automatisch aktualisiert, wenn sich die Locale ändert. Die Funktion berücksichtigt automatisch die aktuelle Locale (sowohl während SSR als auch bei der clientseitigen Navigation).

Hinweis: useIntlayer gibt einen Svelte-Store zurück, daher müssen Sie das `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: So übersetzen Sie Ihre SvelteKit-App – i18n-Anleitung 2026 description: Entdecken Sie, wie Sie Ihre SvelteKit-Website mehrsprachig gestalten. Folgen Sie der Dokumentation, um sie mit Server-Side Rendering (SSR) zu internationalisieren (i18n) und zu übersetzen. keywords:

Internationalisierung
Dokumentation
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: Historie initialisiert

Übersetzen Sie Ihre SvelteKit-Website mit Intlayer | Internationalisierung (i18n)

Inhaltsverzeichnis

Was ist Intlayer?

Mit Intlayer können Sie:

Übersetzungen einfach verwalten durch deklarative Wörterbücher auf Komponentenebene.
Metadaten, Routen und Inhalte dynamisch lokalisieren.
TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen.
SvelteKits SSR nutzen für SEO-freundliche Internationalisierung.

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer SvelteKit-Anwendung

Um zu beginnen, erstellen Sie ein neues SvelteKit-Projekt. Hier ist die finale Struktur, die wir erstellen werden:

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

.├── 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

Schritt 1: Abhängigkeiten installieren

Installieren Sie die notwendigen Pakete mit npm:

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

intlayer: Das Kernpaket für i18n.
svelte-intlayer: Stellt Context-Provider und Stores für Svelte/SvelteKit bereit.
vite-intlayer: Das Vite-Plugin zur Integration von Inhaltsdeklarationen in den Build-Prozess.

Schritt 2: Konfiguration Ihres Projekts

Erstellen Sie eine Konfigurationsdatei im Stammverzeichnis Ihres Projekts:

intlayer.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Schritt 3: Integrieren Sie Intlayer in Ihre Vite-Konfiguration

Aktualisieren Sie Ihre vite.config.ts, um das Intlayer-Plugin einzubinden. Dieses Plugin übernimmt die Transpilierung Ihrer Inhaltsdateien.

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // Reihenfolge ist wichtig, Intlayer sollte vor SvelteKit stehen});

Schritt 4: Deklarieren Sie Ihren Inhalt

Schritt 5: Verwenden Sie Intlayer in Ihren Komponenten

-Präfix verwenden, um auf den reaktiven Wert zuzugreifen (z. B. $content.title).

src/lib/components/Component.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" entspricht dem in Schritt 4 definierten Schlüssel  const content = useIntlayer("hero-section");</script><!-- Inhalt als einfachen Inhalt rendern --><h1>{$content.title}</h1><!-- Um den Inhalt mit dem Editor bearbeitbar zu rendern --><h1>{@const Title = $content.title}<Title /></h1><!-- Um den Inhalt als String darzustellen --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Optional) Schritt 6: Routing einrichten

Die folgenden Schritte zeigen, wie man lokalisierungsbasiertes Routing in SvelteKit einrichtet. Dadurch können Ihre URLs das Locale-Präfix enthalten (z. B. /en/about, /fr/about) für bessere SEO und Benutzererfahrung.

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

.└─── src    ├── app.d.ts                  # Definiert den Locale-Typ    ├── hooks.server.ts           # Verwalten des Locale-Routings    ├── lib    │   └── getLocale.ts          # Prüft die Locale aus Header, Cookies    ├── params    │   └── locale.ts             # Definiert den Locale-Parameter    └── routes        ├── [[locale=locale]]     # In einer Routengruppe einwickeln, um die Locale zu setzen        │   ├── +layout.svelte    # Lokales Layout für die Route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Root-Layout für Schriftarten und globale Styles

Schritt 7: Serverseitige Lokalerkennung (Hooks) verwalten

In SvelteKit muss der Server die Locale des Benutzers kennen, um während des SSR den korrekten Inhalt zu rendern. Wir verwenden hooks.server.ts, um die Locale aus der URL oder Cookies zu erkennen.

Erstellen oder ändern Sie src/hooks.server.ts:

src/hooks.server.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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);  // Prüfen, ob der aktuelle Pfad bereits mit einer Locale beginnt (z.B. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Wenn KEINE Locale in der URL vorhanden ist (z.B. Benutzer besucht "/"), weiterleiten  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Temporäre Weiterleitung    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Erstellen Sie dann einen Helfer, um die Locale des Benutzers aus dem Request-Event zu erhalten:

src/lib/getLocale.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Ermittelt die Locale des Benutzers aus dem Request-Event. * Diese Funktion wird im `handle` Hook in `src/hooks.server.ts` verwendet. * * Zuerst wird versucht, die Locale aus dem Intlayer-Speicher (Cookies oder benutzerdefinierte Header) zu erhalten. * Falls keine Locale gefunden wird, erfolgt ein Fallback auf die Browser-"Accept-Language" Verhandlung. * * @param event - Das Request-Event von SvelteKit * @returns Die Locale des Benutzers */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Versuche, die Locale aus dem Intlayer-Speicher (Cookies oder Header) zu erhalten  const storedLocale = getLocaleFromStorage({    // Zugriff auf SvelteKit-Cookies    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Zugriff auf SvelteKit-Header    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Fallback auf Browser-"Accept-Language"-Verhandlung  const negotiatorHeaders: Record<string, string> = {};  // Konvertiere SvelteKit Headers-Objekt in ein einfaches Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Prüfe die Locale aus dem `Accept-Language`-Header  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Rückgabe der Standard-Locale, falls keine Übereinstimmung gefunden wurde  return defaultLocale;};

getLocaleFromStorage überprüft die Locale aus dem Header oder Cookie, abhängig von Ihrer Konfiguration. Weitere Details finden Sie unter Configuration.

Die Funktion localeDetector verarbeitet den Accept-Language-Header und gibt die beste Übereinstimmung zurück.

Wenn die Locale nicht konfiguriert ist, möchten wir einen 404-Fehler zurückgeben. Um dies zu erleichtern, können wir eine match-Funktion erstellen, um zu überprüfen, ob die Locale gültig ist:

/src/params/locale.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Hinweis: Stellen Sie sicher, dass Ihre src/app.d.ts die Locale-Definition enthält:
typescript
Code kopieren
Kopieren Sie den Code in die Zwischenablage
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Für die Datei +layout.svelte können wir alles entfernen, um nur statischen Inhalt zu behalten, der nicht mit i18n zusammenhängt:

src/+layout.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

Erstellen Sie dann eine neue Seite und ein Layout unter der Gruppe [[locale=locale]]:

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Verwenden Sie den generischen Load-Typexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<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();    // Initialisiere Intlayer mit der Locale aus der Route  $effect(() => {      setupIntlayer(data.locale);  });    // Verwende das Layout-Inhaltsverzeichnis    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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

export const prerender = true;

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Verwenden Sie das Inhaltswörterbuch für die Startseite    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Optional) Schritt 8: Internationalisierte Links

Für SEO wird empfohlen, Ihre Routen mit dem Locale zu versehen (z. B. /en/about, /fr/about). Diese Komponente fügt automatisch jedem Link das aktuelle Locale als Präfix hinzu.

src/lib/components/LocalizedLink.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Hilfsfunktion, um die URL mit dem aktuellen Locale zu versehen  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Wenn Sie goto von SvelteKit verwenden, können Sie dieselbe Logik mit getLocalizedUrl verwenden, um zur lokalisierten URL zu navigieren:

typescript

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navigiert zu /en/about oder /fr/about je nach Locale

(Optional) Schritt 9: Sprachumschalter

Um den Benutzern das Wechseln der Sprache zu ermöglichen, aktualisieren Sie die URL.

src/lib/components/LanguageSwitcher.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<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); // Setzt die Locale im Store und löst onLocaleChange aus        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Optional) Schritt 10: Backend-Proxy hinzufügen

Um einen Backend-Proxy zu deiner SvelteKit-Anwendung hinzuzufügen, kannst du die Funktion intlayerProxy verwenden, die vom vite-intlayer Plugin bereitgestellt wird. Dieses Plugin erkennt automatisch die beste Locale für den Benutzer basierend auf der URL, Cookies und den Spracheinstellungen des Browsers.

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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(),  ],],});

(Optional) Schritt 11: Einrichtung des intlayer Editors / CMS

Um den intlayer Editor einzurichten, müssen Sie der intlayer Editor Dokumentation folgen.

Um das intlayer CMS einzurichten, müssen Sie der intlayer CMS Dokumentation folgen.

Um den Intlayer-Editor-Selektor visualisieren zu können, müssen Sie die Komponentensyntax in Ihrem Intlayer-Inhalt verwenden.

Component.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Inhalt als einfachen Inhalt rendern -->  <h1>{$content.title}</h1>  <!-- Inhalt als Komponente rendern (vom Editor erforderlich) -->  {@const Component = $content.component}<Component /></div>

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren.

.gitignore

Code kopieren

Kopieren Sie den Code in die Zwischenablage

# Ignoriere die von Intlayer generierten Dateien.intlayer

(Optional) Schritt 12 : Inhalt Ihrer Komponenten extrahieren

Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.

Um diesen Prozess zu erleichtern, bietet Intlayer einen Compiler / Extractor an, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren.

Um es einzurichten, können Sie einen compiler-Abschnitt in Ihrer intlayer.config.ts-Datei hinzufügen:

intlayer.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Rest Ihrer Konfiguration
  compiler: {
    /**
     * Gibt an, ob der Compiler aktiviert sein soll.
     */
    enabled: true,

    /**
     * Definiert den Pfad der Ausgabedateien
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Gibt an, ob die Komponenten nach der Transformation gespeichert werden sollen. Auf diese Weise kann der Compiler nur einmal ausgeführt werden, um die App zu transformieren, und dann entfernt werden.
     */
    saveComponents: false,

    /**
     * Präfix für Wörterbuchschlüssel
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Führen Sie den Extractor aus, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

npx intlayer extract

Aktualisieren Sie Ihre vite.config.ts, um das intlayerCompiler-Plugin aufzunehmen:

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Fügt das Compiler-Plugin hinzu ],});

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

npm run build # Oder npm run dev

Weiterführende Informationen

Visueller Editor: Integrieren Sie den Intlayer Visual Editor, um Übersetzungen direkt über die Benutzeroberfläche zu bearbeiten.
CMS: Externalisieren Sie Ihr Content-Management mit dem Intlayer CMS.

Vite und Svelte

Vite und Preact

\n\n\n

{$content.title}

\n\n

\n\t

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

\n {\n e.preventDefault();\n setLocale(localeEl); // Setzt die Locale im Store und löst onLocaleChange aus\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

Erstellung:2025-11-20Letzte Aktualisierung:2026-05-06

Anwendungsvorlage auf GitHub ansehen

Für diese Seite ist eine Anwendungsvorlage verfügbar.

Showcase-Anwendung ansehen

Diese Seite verlinkt auf eine Live-Demo der Vorlage.

Referenzieren Sie diese Dokumentation mit Ihrem bevorzugten AI-Assistenten

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Stellen Sie Ihre Frage und erhalten Sie einen Resümee des Dokuments, indem Sie diese Seite und den AI-Anbieter Ihrer Wahl referenzieren

Versionshistorie

"Aktualisieren der Solid useIntlayer API-Nutzung auf direkten Eigenschaftszugriff"
v8.9.04.5.2026
"Init-Befehl hinzufügen"
v7.5.930.12.2025
"Historie initialisiert"
v7.1.1020.11.2025

Der Inhalt dieser Seite wurde mit einer KI übersetzt.

Den englischen Originaltext ansehen

Diese Dokumentation bearbeiten

Wenn Sie eine Idee haben, um diese Dokumentation zu verbessern, zögern Sie bitte nicht, durch das Einreichen eines Pull-Requests auf GitHub beizutragen.

GitHub-Link zur Dokumentation

Kopieren

Markdown des Dokuments in die Zwischenablage kopieren

Übersetzen Sie Ihre SvelteKit-Website mit Intlayer | Internationalisierung (i18n)

ide.intlayer.org

Inhaltsverzeichnis

Was ist Intlayer?

Mit Intlayer können Sie:

Übersetzungen einfach verwalten durch deklarative Wörterbücher auf Komponentenebene.
Metadaten, Routen und Inhalte dynamisch lokalisieren.
TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen.
SvelteKits SSR nutzen für SEO-freundliche Internationalisierung.

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer SvelteKit-Anwendung

Um zu beginnen, erstellen Sie ein neues SvelteKit-Projekt. Hier ist die finale Struktur, die wir erstellen werden:

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

.├── 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

Schritt 1: Abhängigkeiten installieren

Installieren Sie die notwendigen Pakete mit npm:

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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: Das Kernpaket für i18n.
svelte-intlayer: Stellt Context-Provider und Stores für Svelte/SvelteKit bereit.
vite-intlayer: Das Vite-Plugin zur Integration von Inhaltsdeklarationen in den Build-Prozess.

Schritt 2: Konfiguration Ihres Projekts

Erstellen Sie eine Konfigurationsdatei im Stammverzeichnis Ihres Projekts:

intlayer.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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;

Schritt 3: Integrieren Sie Intlayer in Ihre Vite-Konfiguration

Aktualisieren Sie Ihre vite.config.ts, um das Intlayer-Plugin einzubinden. Dieses Plugin übernimmt die Transpilierung Ihrer Inhaltsdateien.

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // Reihenfolge ist wichtig, Intlayer sollte vor SvelteKit stehen});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // Reihenfolge ist wichtig, Intlayer sollte vor SvelteKit stehen});

Schritt 4: Deklarieren Sie Ihren Inhalt

Schritt 5: Verwenden Sie Intlayer in Ihren Komponenten

Hinweis: useIntlayer gibt einen Svelte-Store zurück, daher müssen Sie das `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: So übersetzen Sie Ihre SvelteKit-App – i18n-Anleitung 2026 description: Entdecken Sie, wie Sie Ihre SvelteKit-Website mehrsprachig gestalten. Folgen Sie der Dokumentation, um sie mit Server-Side Rendering (SSR) zu internationalisieren (i18n) und zu übersetzen. keywords:

Internationalisierung
Dokumentation
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: Historie initialisiert

Übersetzen Sie Ihre SvelteKit-Website mit Intlayer | Internationalisierung (i18n)

Inhaltsverzeichnis

Was ist Intlayer?

Mit Intlayer können Sie:

Übersetzungen einfach verwalten durch deklarative Wörterbücher auf Komponentenebene.
Metadaten, Routen und Inhalte dynamisch lokalisieren.
TypeScript-Unterstützung sicherstellen mit automatisch generierten Typen.
SvelteKits SSR nutzen für SEO-freundliche Internationalisierung.

Schritt-für-Schritt-Anleitung zur Einrichtung von Intlayer in einer SvelteKit-Anwendung

Um zu beginnen, erstellen Sie ein neues SvelteKit-Projekt. Hier ist die finale Struktur, die wir erstellen werden:

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

.├── 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

Schritt 1: Abhängigkeiten installieren

Installieren Sie die notwendigen Pakete mit npm:

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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: Das Kernpaket für i18n.
svelte-intlayer: Stellt Context-Provider und Stores für Svelte/SvelteKit bereit.
vite-intlayer: Das Vite-Plugin zur Integration von Inhaltsdeklarationen in den Build-Prozess.

Schritt 2: Konfiguration Ihres Projekts

Erstellen Sie eine Konfigurationsdatei im Stammverzeichnis Ihres Projekts:

intlayer.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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;

Schritt 3: Integrieren Sie Intlayer in Ihre Vite-Konfiguration

Aktualisieren Sie Ihre vite.config.ts, um das Intlayer-Plugin einzubinden. Dieses Plugin übernimmt die Transpilierung Ihrer Inhaltsdateien.

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // Reihenfolge ist wichtig, Intlayer sollte vor SvelteKit stehen});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // Reihenfolge ist wichtig, Intlayer sollte vor SvelteKit stehen});

Schritt 4: Deklarieren Sie Ihren Inhalt

Schritt 5: Verwenden Sie Intlayer in Ihren Komponenten

-Präfix verwenden, um auf den reaktiven Wert zuzugreifen (z. B. $content.title).

src/lib/components/Component.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" entspricht dem in Schritt 4 definierten Schlüssel  const content = useIntlayer("hero-section");</script><!-- Inhalt als einfachen Inhalt rendern --><h1>{$content.title}</h1><!-- Um den Inhalt mit dem Editor bearbeitbar zu rendern --><h1>{@const Title = $content.title}<Title /></h1><!-- Um den Inhalt als String darzustellen --><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" entspricht dem in Schritt 4 definierten Schlüssel  const content = useIntlayer("hero-section");</script><!-- Inhalt als einfachen Inhalt rendern --><h1>{$content.title}</h1><!-- Um den Inhalt mit dem Editor bearbeitbar zu rendern --><h1>{@const Title = $content.title}<Title /></h1><!-- Um den Inhalt als String darzustellen --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Optional) Schritt 6: Routing einrichten

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

.└─── src    ├── app.d.ts                  # Definiert den Locale-Typ    ├── hooks.server.ts           # Verwalten des Locale-Routings    ├── lib    │   └── getLocale.ts          # Prüft die Locale aus Header, Cookies    ├── params    │   └── locale.ts             # Definiert den Locale-Parameter    └── routes        ├── [[locale=locale]]     # In einer Routengruppe einwickeln, um die Locale zu setzen        │   ├── +layout.svelte    # Lokales Layout für die Route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Root-Layout für Schriftarten und globale Styles

.└─── src    ├── app.d.ts                  # Definiert den Locale-Typ    ├── hooks.server.ts           # Verwalten des Locale-Routings    ├── lib    │   └── getLocale.ts          # Prüft die Locale aus Header, Cookies    ├── params    │   └── locale.ts             # Definiert den Locale-Parameter    └── routes        ├── [[locale=locale]]     # In einer Routengruppe einwickeln, um die Locale zu setzen        │   ├── +layout.svelte    # Lokales Layout für die Route        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Root-Layout für Schriftarten und globale Styles

Schritt 7: Serverseitige Lokalerkennung (Hooks) verwalten

In SvelteKit muss der Server die Locale des Benutzers kennen, um während des SSR den korrekten Inhalt zu rendern. Wir verwenden hooks.server.ts, um die Locale aus der URL oder Cookies zu erkennen.

Erstellen oder ändern Sie src/hooks.server.ts:

src/hooks.server.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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);  // Prüfen, ob der aktuelle Pfad bereits mit einer Locale beginnt (z.B. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Wenn KEINE Locale in der URL vorhanden ist (z.B. Benutzer besucht "/"), weiterleiten  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Temporäre Weiterleitung    });  }  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);  // Prüfen, ob der aktuelle Pfad bereits mit einer Locale beginnt (z.B. /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Wenn KEINE Locale in der URL vorhanden ist (z.B. Benutzer besucht "/"), weiterleiten  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Temporäre Weiterleitung    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Erstellen Sie dann einen Helfer, um die Locale des Benutzers aus dem Request-Event zu erhalten:

src/lib/getLocale.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Ermittelt die Locale des Benutzers aus dem Request-Event. * Diese Funktion wird im `handle` Hook in `src/hooks.server.ts` verwendet. * * Zuerst wird versucht, die Locale aus dem Intlayer-Speicher (Cookies oder benutzerdefinierte Header) zu erhalten. * Falls keine Locale gefunden wird, erfolgt ein Fallback auf die Browser-"Accept-Language" Verhandlung. * * @param event - Das Request-Event von SvelteKit * @returns Die Locale des Benutzers */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Versuche, die Locale aus dem Intlayer-Speicher (Cookies oder Header) zu erhalten  const storedLocale = getLocaleFromStorage({    // Zugriff auf SvelteKit-Cookies    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Zugriff auf SvelteKit-Header    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Fallback auf Browser-"Accept-Language"-Verhandlung  const negotiatorHeaders: Record<string, string> = {};  // Konvertiere SvelteKit Headers-Objekt in ein einfaches Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Prüfe die Locale aus dem `Accept-Language`-Header  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Rückgabe der Standard-Locale, falls keine Übereinstimmung gefunden wurde  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Ermittelt die Locale des Benutzers aus dem Request-Event. * Diese Funktion wird im `handle` Hook in `src/hooks.server.ts` verwendet. * * Zuerst wird versucht, die Locale aus dem Intlayer-Speicher (Cookies oder benutzerdefinierte Header) zu erhalten. * Falls keine Locale gefunden wird, erfolgt ein Fallback auf die Browser-"Accept-Language" Verhandlung. * * @param event - Das Request-Event von SvelteKit * @returns Die Locale des Benutzers */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Versuche, die Locale aus dem Intlayer-Speicher (Cookies oder Header) zu erhalten  const storedLocale = getLocaleFromStorage({    // Zugriff auf SvelteKit-Cookies    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Zugriff auf SvelteKit-Header    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Fallback auf Browser-"Accept-Language"-Verhandlung  const negotiatorHeaders: Record<string, string> = {};  // Konvertiere SvelteKit Headers-Objekt in ein einfaches Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Prüfe die Locale aus dem `Accept-Language`-Header  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Rückgabe der Standard-Locale, falls keine Übereinstimmung gefunden wurde  return defaultLocale;};

getLocaleFromStorage überprüft die Locale aus dem Header oder Cookie, abhängig von Ihrer Konfiguration. Weitere Details finden Sie unter Configuration.

Die Funktion localeDetector verarbeitet den Accept-Language-Header und gibt die beste Übereinstimmung zurück.

Wenn die Locale nicht konfiguriert ist, möchten wir einen 404-Fehler zurückgeben. Um dies zu erleichtern, können wir eine match-Funktion erstellen, um zu überprüfen, ob die Locale gültig ist:

/src/params/locale.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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

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

Hinweis: Stellen Sie sicher, dass Ihre src/app.d.ts die Locale-Definition enthält:
typescript
Code kopieren
Kopieren Sie den Code in die Zwischenablage
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Für die Datei +layout.svelte können wir alles entfernen, um nur statischen Inhalt zu behalten, der nicht mit i18n zusammenhängt:

src/+layout.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<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>

Erstellen Sie dann eine neue Seite und ein Layout unter der Gruppe [[locale=locale]]:

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Verwenden Sie den generischen Load-Typexport 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;// Verwenden Sie den generischen Load-Typexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<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();    // Initialisiere Intlayer mit der Locale aus der Route  $effect(() => {      setupIntlayer(data.locale);  });    // Verwende das Layout-Inhaltsverzeichnis    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();    // Initialisiere Intlayer mit der Locale aus der Route  $effect(() => {      setupIntlayer(data.locale);  });    // Verwende das Layout-Inhaltsverzeichnis    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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

export const prerender = true;

export const prerender = true;

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

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Verwenden Sie das Inhaltswörterbuch für die Startseite    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";    // Verwenden Sie das Inhaltswörterbuch für die Startseite    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Optional) Schritt 8: Internationalisierte Links

Für SEO wird empfohlen, Ihre Routen mit dem Locale zu versehen (z. B. /en/about, /fr/about). Diese Komponente fügt automatisch jedem Link das aktuelle Locale als Präfix hinzu.

src/lib/components/LocalizedLink.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Hilfsfunktion, um die URL mit dem aktuellen Locale zu versehen  $: 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();  // Hilfsfunktion, um die URL mit dem aktuellen Locale zu versehen  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Wenn Sie goto von SvelteKit verwenden, können Sie dieselbe Logik mit getLocalizedUrl verwenden, um zur lokalisierten URL zu navigieren:

typescript

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navigiert zu /en/about oder /fr/about je nach Locale

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Navigiert zu /en/about oder /fr/about je nach Locale

(Optional) Schritt 9: Sprachumschalter

Um den Benutzern das Wechseln der Sprache zu ermöglichen, aktualisieren Sie die URL.

src/lib/components/LanguageSwitcher.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<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); // Setzt die Locale im Store und löst onLocaleChange aus        }}        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); // Setzt die Locale im Store und löst onLocaleChange aus        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Optional) Schritt 10: Backend-Proxy hinzufügen

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

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(),  ],],});

(Optional) Schritt 11: Einrichtung des intlayer Editors / CMS

Um den intlayer Editor einzurichten, müssen Sie der intlayer Editor Dokumentation folgen.

Um das intlayer CMS einzurichten, müssen Sie der intlayer CMS Dokumentation folgen.

Um den Intlayer-Editor-Selektor visualisieren zu können, müssen Sie die Komponentensyntax in Ihrem Intlayer-Inhalt verwenden.

Component.svelte

Code kopieren

Kopieren Sie den Code in die Zwischenablage

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Inhalt als einfachen Inhalt rendern -->  <h1>{$content.title}</h1>  <!-- Inhalt als Komponente rendern (vom Editor erforderlich) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Inhalt als einfachen Inhalt rendern -->  <h1>{$content.title}</h1>  <!-- Inhalt als Komponente rendern (vom Editor erforderlich) -->  {@const Component = $content.component}<Component /></div>

Git-Konfiguration

Es wird empfohlen, die von Intlayer generierten Dateien zu ignorieren.

.gitignore

Code kopieren

Kopieren Sie den Code in die Zwischenablage

# Ignoriere die von Intlayer generierten Dateien.intlayer

# Ignoriere die von Intlayer generierten Dateien.intlayer

(Optional) Schritt 12 : Inhalt Ihrer Komponenten extrahieren

Wenn Sie eine bestehende Codebasis haben, kann die Transformation von Tausenden von Dateien zeitaufwendig sein.

Um diesen Prozess zu erleichtern, bietet Intlayer einen Compiler / Extractor an, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren.

Um es einzurichten, können Sie einen compiler-Abschnitt in Ihrer intlayer.config.ts-Datei hinzufügen:

intlayer.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Rest Ihrer Konfiguration
  compiler: {
    /**
     * Gibt an, ob der Compiler aktiviert sein soll.
     */
    enabled: true,

    /**
     * Definiert den Pfad der Ausgabedateien
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Gibt an, ob die Komponenten nach der Transformation gespeichert werden sollen. Auf diese Weise kann der Compiler nur einmal ausgeführt werden, um die App zu transformieren, und dann entfernt werden.
     */
    saveComponents: false,

    /**
     * Präfix für Wörterbuchschlüssel
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Führen Sie den Extractor aus, um Ihre Komponenten zu transformieren und den Inhalt zu extrahieren

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

npx intlayer extract

npx intlayer extract

Aktualisieren Sie Ihre vite.config.ts, um das intlayerCompiler-Plugin aufzunehmen:

vite.config.ts

Code kopieren

Kopieren Sie den Code in die Zwischenablage

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Fügt das Compiler-Plugin hinzu ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Fügt das Compiler-Plugin hinzu ],});

bash

Code kopieren

Kopieren Sie den Code in die Zwischenablage

npm run build # Oder npm run dev

npm run build # Oder npm run dev

Weiterführende Informationen

Visueller Editor: Integrieren Sie den Intlayer Visual Editor, um Übersetzungen direkt über die Benutzeroberfläche zu bearbeiten.
CMS: Externalisieren Sie Ihr Content-Management mit dem Intlayer CMS.

Vite und Svelte

Vite und Preact