\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### (Необязательно) Шаг 6: Настройка маршрутизации\n\nСледующие шаги показывают, как настроить маршрутизацию на основе локали в SvelteKit. Это позволяет вашим URL включать префикс локали (например, `/en/about`, `/fr/about`) для улучшения SEO и удобства пользователей.\n\n```bash\n.\n└─── src\n ├── app.d.ts # Определение типа локали\n ├── hooks.server.ts # Управление маршрутизацией локали\n ├── lib\n │ └── getLocale.ts # Проверка локали из заголовка, cookies\n ├── params\n │ └── locale.ts # Определение параметра локали\n └── routes\n ├── [[locale=locale]] # Обертка в группу маршрутов для установки локали\n │ ├── +layout.svelte # Локальный layout для маршрута\n │ ├── +layout.ts\n │ ├── +page.svelte\n │ ├── +page.ts\n │ └── about\n │ ├── +page.svelte\n │ └── +page.ts\n └── +layout.svelte # Корневой layout для шрифтов и глобальных стилей\n```\n\n### Шаг 7: Обработка определения локали на стороне сервера (Hooks)\n\nВ SvelteKit сервер должен знать локаль пользователя, чтобы отобразить правильный контент во время SSR. Мы используем `hooks.server.ts` для определения локали из URL или cookies.\n\nСоздайте или измените файл `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 // Проверяем, начинается ли текущий путь с локали (например, /fr, /en)\n const pathname = event.url.pathname;\n const targetPathname = getLocalizedUrl(pathname, detectedLocale);\n\n // Если локаль отсутствует в URL (например, пользователь заходит на \"/\"), перенаправляем его\n if (targetPathname !== pathname) {\n return new Response(undefined, {\n headers: { Location: targetPathname },\n status: 307, // Временное перенаправление\n });\n }\n\n return resolve(event, {\n transformPageChunk: ({ html }) => html.replace(\"%lang%\", detectedLocale),\n });\n};\n```\n\nЗатем создайте помощник для получения локали пользователя из события запроса:\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 * Получить локаль пользователя из события запроса.\n * Эта функция используется в хуке `handle` в `src/hooks.server.ts`.\n *\n * Сначала пытается получить локаль из хранилища Intlayer (cookies или пользовательские заголовки).\n * Если локаль не найдена, используется fallback на браузерное определение через \"Accept-Language\".\n *\n * @param event - Событие запроса из SvelteKit\n * @returns Локаль пользователя\n */\nexport const getLocale = (event: RequestEvent): Locale => {\n const defaultLocale = configuration?.internationalization?.defaultLocale;\n\n // Попытка получить локаль из хранилища Intlayer (Cookies или заголовки)\n const storedLocale = getLocaleFromStorage({\n // Доступ к cookies в SvelteKit\n getCookie: (name: string) => event.cookies.get(name) ?? null,\n // Доступ к заголовкам в SvelteKit\n getHeader: (name: string) => event.request.headers.get(name) ?? null,\n });\n\n if (storedLocale) {\n return storedLocale;\n }\n\n // Запасной вариант: определение локали через браузерный заголовок \"Accept-Language\"\n const negotiatorHeaders: Record<string, string> = {};\n\n // Преобразование объекта Headers из SvelteKit в простой Record<string, string>\n event.request.headers.forEach((value, key) => {\n negotiatorHeaders[key] = value;\n });\n\n // Проверка локали из заголовка `Accept-Language`\n const userFallbackLocale = localeDetector(negotiatorHeaders);\n\n if (userFallbackLocale) {\n return userFallbackLocale;\n }\n\n // Возврат локали по умолчанию, если совпадений не найдено\n return defaultLocale;\n};\n```\n\n> `getLocaleFromStorage` будет проверять локаль из заголовка или cookie в зависимости от вашей конфигурации. Подробнее смотрите в разделе [Configuration](https://intlayer.org/doc/configuration).\n\n> Функция `localeDetector` обрабатывает заголовок `Accept-Language` и возвращает наилучшее совпадение.\n\nЕсли локаль не настроена, мы хотим возвращать ошибку 404. Чтобы упростить это, можно создать функцию `match` для проверки валидности локали:\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> **Примечание:** Убедитесь, что в вашем файле `src/app.d.ts` определена локаль:\n>\n> ```typescript\n> declare global {\n> namespace App {\n> interface Locals {\n> locale: import(\"intlayer\").Locale;\n> }\n> }\n> }\n> ```\n\nДля файла `+layout.svelte` мы можем удалить всё, чтобы оставить только статический контент, не связанный с 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\nЗатем создайте новую страницу и layout в группе `[[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// Используем универсальный тип 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// Инициализация Intlayer с локалью из маршрута\n $effect(() => {\n setupIntlayer(data.locale);\n });\n\t// Использование словаря контента для layout\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// Использование словаря контента для домашней страницы\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### (Необязательно) Шаг 8: Интернационализированные ссылки\n\nДля SEO рекомендуется добавлять префикс локали к вашим маршрутам (например, `/en/about`, `/fr/about`). Этот компонент автоматически добавляет префикс текущей локали ко всем ссылкам.\n\n```svelte fileName=\"src/lib/components/LocalizedLink.svelte\"\n\n\n\n \n\n```\n\nЕсли вы используете `goto` из SvelteKit, вы можете применить ту же логику с `getLocalizedUrl` для перехода по локализованному 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); // Переходит на /en/about или /fr/about в зависимости от локали\n```\n\n### (Необязательно) Шаг 9: Переключатель языка\n\nЧтобы позволить пользователям переключать языки, обновляйте URL.\n\n```svelte fileName=\"src/lib/components/LanguageSwitcher.svelte\"\n\n\n

\n {\n e.preventDefault();\n setLocale(localeEl); // Установит локаль в хранилище и вызовет onLocaleChange\n }}\n class:active={$locale === localeEl}\n >\n {getLocaleName(localeEl)}\n \n

\n\n\n```\n\n### (Необязательно) Шаг 10: Добавить backend proxy\n\nЧтобы добавить backend proxy в ваше приложение SvelteKit, вы можете использовать функцию `intlayerProxy`, предоставляемую плагином `vite-intlayer`. Этот плагин автоматически определит лучшую локаль для пользователя на основе URL, cookies и предпочтений языка браузера.\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### (Необязательно) Шаг 11: Настройка редактора / CMS intlayer\n\nДля настройки редактора intlayer необходимо следовать [документации редактора intlayer](/ru/doc/concept/editor).\n\nДля настройки CMS intlayer необходимо следовать [документации CMS intlayer](/ru/doc/concept/cms).\n\nЧтобы иметь возможность визуализировать селектор редактора intlayer, вам нужно использовать синтаксис компонента в вашем контенте 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### Конфигурация Git\n\nРекомендуется игнорировать файлы, сгенерированные Intlayer.\n\n```plaintext fileName=\".gitignore\"\n# Игнорировать файлы, сгенерированные Intlayer\n.intlayer\n```\n\n---\n\n### (Опционально) Шаг 1 : Извлечение содержимого ваших компонентов\n\nЕсли у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.\n\nЧтобы упростить этот процесс, Intlayer предлагает [компилятор](/ru/doc/compiler) / [экстрактор](/ru/doc/concept/cli/extract) для преобразования ваших компонентов и извлечения содержимого.\n\nЧтобы настроить его, вы можете добавить раздел `compiler` в ваш файл `intlayer.config.ts`:\n\n```typescript fileName=\"intlayer.config.ts\" codeFormat={[\"typescript\", \"esm\", \"commonjs\"]}\nimport { type IntlayerConfig } from \"intlayer\";\n\nconst config: IntlayerConfig = {\n // ... Остальная часть вашей конфигурации\n compiler: {\n /**\n * Указывает, должен ли быть включен компилятор.\n */\n enabled: true,\n\n /**\n * Определяет путь к выходным файлам\n */\n output: ({ fileName, extension }) => `./${fileName}${extension}`,\n\n /**\n * Указывает, должны ли компоненты сохраняться после преобразования. Таким образом, компилятор можно запустить только один раз для преобразования приложения, а затем удалить.\n */\n saveComponents: false,\n\n /**\n * Префикс ключа словаря\n */\n dictionaryKeyPrefix: \"\",\n },\n};\n\nexport default config;\n```\n\n\n \n\nЗапустите экстрактор для преобразования компонентов и извлечения содержимого\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\nОбновите ваш `vite.config.ts`, чтобы включить плагин `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(), // Добавляет плагин компилятора\n ],\n});\n```\n\n```bash packageManager=\"npm\"\nnpm run build # Или 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### Дальнейшие шаги\n\n- **Визуальный редактор**: Интегрируйте [Визуальный редактор Intlayer](/ru/doc/concept/editor), чтобы редактировать переводы напрямую из пользовательского интерфейса.\n- **CMS**: Вынесите управление контентом с помощью [CMS Intlayer](/ru/doc/concept/cms).\n","about":"Узнайте, как сделать ваш сайт на SvelteKit многоязычным. Следуйте документации по интернационализации (i18n) и переводу с использованием серверного рендеринга (SSR).","url":"https://intlayer.org/ru/doc/environment/sveltekit","datePublished":"20-11-2025","dateModified":"06-05-2026","keywords":"Интернационализация, Документация, Intlayer, SvelteKit, JavaScript, SSR","license":"https://raw.githubusercontent.com/aymericzip/intlayer/refs/heads/main/LICENSE","audience":{"@type":"Audience","audienceType":"Разработчики, менеджеры контента"}}

Создание:2025-11-20Последнее обновление:2026-05-06

Посмотреть шаблон приложения на GitHub

Для этой страницы доступен шаблон приложения.

Посмотреть демонстрационное приложение

Эта страница ведёт на живую демонстрацию шаблона.

Ссылайтесь на этот документ на ваш любимый ассистент AI

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

История версий

"Обновление использования API useIntlayer в Solid для прямого доступа к свойствам"
v8.9.004.05.2026
"Добавить команду init"
v7.5.930.12.2025
"Инициализация истории"
v7.1.1020.11.2025

Содержимое этой страницы было переведено с помощью ИИ.

Смотреть последнюю версию оригинального контента на английском

Изменить эту документацию

Если у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.

Ссылка на документацию GitHub

Копировать

Копировать Markdown документа в буфер обмена

Перевод вашего сайта на SvelteKit с помощью Intlayer | Интернационализация (i18n)

ide.intlayer.org

Содержание

Что такое Intlayer?

Intlayer, это инновационная, с открытым исходным кодом библиотека интернационализации (i18n), разработанная для упрощения поддержки многоязычности в современных веб-приложениях. Она отлично интегрируется с возможностями серверного рендеринга (SSR) в SvelteKit.

С помощью Intlayer вы можете:

Легко управлять переводами с использованием декларативных словарей на уровне компонентов.
Динамически локализовать метаданные, маршруты и контент.
Обеспечить поддержку TypeScript с помощью автогенерируемых типов.
Использовать SSR SvelteKit для SEO-оптимизированной интернационализации.

Пошаговое руководство по настройке Intlayer в приложении SvelteKit

Для начала создайте новый проект SvelteKit. Вот итоговая структура, которую мы создадим:

bash

Копировать код

Копировать код в буфер обмена

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

Шаг 1: Установка зависимостей

Установите необходимые пакеты с помощью npm:

bash

Копировать код

Копировать код в буфер обмена

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

intlayer: Основной пакет для i18n.
svelte-intlayer: Предоставляет провайдеры контекста и сторы для Svelte/SvelteKit.
vite-intlayer: Плагин Vite для интеграции деклараций контента в процесс сборки.

Шаг 2: Конфигурация вашего проекта

Создайте файл конфигурации в корне вашего проекта:

intlayer.config.ts

Копировать код

Копировать код в буфер обмена

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], // локали, поддерживаемые в проекте    defaultLocale: Locales.ENGLISH, // локаль по умолчанию  },};export default config;

Шаг 3: Интеграция Intlayer в конфигурацию Vite

Обновите ваш файл vite.config.ts, чтобы включить плагин Intlayer. Этот плагин отвечает за транспиляцию ваших файлов с контентом.

vite.config.ts

Копировать код

Копировать код в буфер обмена

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // порядок важен, Intlayer должен быть размещён перед SvelteKit});

Шаг 4: Объявите ваш контент

Создайте файлы объявления контента в любом месте внутри папки src (например, src/lib/content или рядом с вашими компонентами). Эти файлы определяют переводимый контент для вашего приложения с использованием функции t() для каждой локали.

Шаг 5: Используйте Intlayer в ваших компонентах

Теперь вы можете использовать функцию useIntlayer в любом Svelte-компоненте. Она возвращает реактивный store, который автоматически обновляется при изменении локали. Функция автоматически учитывает текущую локаль (как во время SSR, так и при навигации на клиенте).

Примечание: useIntlayer возвращает Svelte store, поэтому для доступа к его реактивному значению нужно использовать префикс `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Как перевести ваше приложение SvelteKit – руководство по i18n 2026 description: Узнайте, как сделать ваш сайт на SvelteKit многоязычным. Следуйте документации по интернационализации (i18n) и переводу с использованием серверного рендеринга (SSR). keywords:

Интернационализация
Документация
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: Инициализация истории

Перевод вашего сайта на SvelteKit с помощью Intlayer | Интернационализация (i18n)

Содержание

Что такое Intlayer?

С помощью Intlayer вы можете:

Легко управлять переводами с использованием декларативных словарей на уровне компонентов.
Динамически локализовать метаданные, маршруты и контент.
Обеспечить поддержку TypeScript с помощью автогенерируемых типов.
Использовать SSR SvelteKit для SEO-оптимизированной интернационализации.

Пошаговое руководство по настройке Intlayer в приложении SvelteKit

Для начала создайте новый проект SvelteKit. Вот итоговая структура, которую мы создадим:

bash

Копировать код

Копировать код в буфер обмена

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

Шаг 1: Установка зависимостей

Установите необходимые пакеты с помощью npm:

bash

Копировать код

Копировать код в буфер обмена

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

intlayer: Основной пакет для i18n.
svelte-intlayer: Предоставляет провайдеры контекста и сторы для Svelte/SvelteKit.
vite-intlayer: Плагин Vite для интеграции деклараций контента в процесс сборки.

Шаг 2: Конфигурация вашего проекта

Создайте файл конфигурации в корне вашего проекта:

intlayer.config.ts

Копировать код

Копировать код в буфер обмена

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], // локали, поддерживаемые в проекте    defaultLocale: Locales.ENGLISH, // локаль по умолчанию  },};export default config;

Шаг 3: Интеграция Intlayer в конфигурацию Vite

vite.config.ts

Копировать код

Копировать код в буфер обмена

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // порядок важен, Intlayer должен быть размещён перед SvelteKit});

Шаг 4: Объявите ваш контент

Шаг 5: Используйте Intlayer в ваших компонентах

(например, $content.title).

src/lib/components/Component.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" соответствует ключу, определённому на Шаге 4  const content = useIntlayer("hero-section");</script><!-- Отобразить контент как простой текст --><h1>{$content.title}</h1><!-- Чтобы отобразить контент с возможностью редактирования через редактор --><h1>{@const Title = $content.title}<Title /></h1><!-- Для отображения содержимого в виде строки --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Необязательно) Шаг 6: Настройка маршрутизации

Следующие шаги показывают, как настроить маршрутизацию на основе локали в SvelteKit. Это позволяет вашим URL включать префикс локали (например, /en/about, /fr/about) для улучшения SEO и удобства пользователей.

bash

Копировать код

Копировать код в буфер обмена

.└─── src    ├── app.d.ts                  # Определение типа локали    ├── hooks.server.ts           # Управление маршрутизацией локали    ├── lib    │   └── getLocale.ts          # Проверка локали из заголовка, cookies    ├── params    │   └── locale.ts             # Определение параметра локали    └── routes        ├── [[locale=locale]]     # Обертка в группу маршрутов для установки локали        │   ├── +layout.svelte    # Локальный layout для маршрута        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Корневой layout для шрифтов и глобальных стилей

Шаг 7: Обработка определения локали на стороне сервера (Hooks)

В SvelteKit сервер должен знать локаль пользователя, чтобы отобразить правильный контент во время SSR. Мы используем hooks.server.ts для определения локали из URL или cookies.

Создайте или измените файл src/hooks.server.ts:

src/hooks.server.ts

Копировать код

Копировать код в буфер обмена

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);  // Проверяем, начинается ли текущий путь с локали (например, /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Если локаль отсутствует в URL (например, пользователь заходит на "/"), перенаправляем его  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Временное перенаправление    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Затем создайте помощник для получения локали пользователя из события запроса:

src/lib/getLocale.ts

Копировать код

Копировать код в буфер обмена

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Получить локаль пользователя из события запроса. * Эта функция используется в хуке `handle` в `src/hooks.server.ts`. * * Сначала пытается получить локаль из хранилища Intlayer (cookies или пользовательские заголовки). * Если локаль не найдена, используется fallback на браузерное определение через "Accept-Language". * * @param event - Событие запроса из SvelteKit * @returns Локаль пользователя */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Попытка получить локаль из хранилища Intlayer (Cookies или заголовки)  const storedLocale = getLocaleFromStorage({    // Доступ к cookies в SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Доступ к заголовкам в SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Запасной вариант: определение локали через браузерный заголовок "Accept-Language"  const negotiatorHeaders: Record<string, string> = {};  // Преобразование объекта Headers из SvelteKit в простой Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Проверка локали из заголовка `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Возврат локали по умолчанию, если совпадений не найдено  return defaultLocale;};

getLocaleFromStorage будет проверять локаль из заголовка или cookie в зависимости от вашей конфигурации. Подробнее смотрите в разделе Configuration.

Функция localeDetector обрабатывает заголовок Accept-Language и возвращает наилучшее совпадение.

Если локаль не настроена, мы хотим возвращать ошибку 404. Чтобы упростить это, можно создать функцию match для проверки валидности локали:

/src/params/locale.ts

Копировать код

Копировать код в буфер обмена

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

Примечание: Убедитесь, что в вашем файле src/app.d.ts определена локаль:
typescript
Копировать код
Копировать код в буфер обмена
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Для файла +layout.svelte мы можем удалить всё, чтобы оставить только статический контент, не связанный с i18n:

src/+layout.svelte

Копировать код

Копировать код в буфер обмена

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

Затем создайте новую страницу и layout в группе [[locale=locale]]:

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

Копировать код

Копировать код в буфер обмена

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Используем универсальный тип Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

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

Копировать код

Копировать код в буфер обмена

<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();    // Инициализация Intlayer с локалью из маршрута  $effect(() => {      setupIntlayer(data.locale);  });    // Использование словаря контента для layout    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

Копировать код

Копировать код в буфер обмена

export const prerender = true;

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

Копировать код

Копировать код в буфер обмена

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Использование словаря контента для домашней страницы    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Необязательно) Шаг 8: Интернационализированные ссылки

Для SEO рекомендуется добавлять префикс локали к вашим маршрутам (например, /en/about, /fr/about). Этот компонент автоматически добавляет префикс текущей локали ко всем ссылкам.

src/lib/components/LocalizedLink.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Помощник для добавления префикса локали к URL  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

Если вы используете goto из SvelteKit, вы можете применить ту же логику с getLocalizedUrl для перехода по локализованному URL:

typescript

Копировать код

Копировать код в буфер обмена

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Переходит на /en/about или /fr/about в зависимости от локали

(Необязательно) Шаг 9: Переключатель языка

Чтобы позволить пользователям переключать языки, обновляйте URL.

src/lib/components/LanguageSwitcher.svelte

Копировать код

Копировать код в буфер обмена

<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); // Установит локаль в хранилище и вызовет onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Необязательно) Шаг 10: Добавить backend proxy

Чтобы добавить backend proxy в ваше приложение SvelteKit, вы можете использовать функцию intlayerProxy, предоставляемую плагином vite-intlayer. Этот плагин автоматически определит лучшую локаль для пользователя на основе URL, cookies и предпочтений языка браузера.

vite.config.ts

Копировать код

Копировать код в буфер обмена

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

(Необязательно) Шаг 11: Настройка редактора / CMS intlayer

Для настройки редактора intlayer необходимо следовать документации редактора intlayer.

Для настройки CMS intlayer необходимо следовать документации CMS intlayer.

Чтобы иметь возможность визуализировать селектор редактора intlayer, вам нужно использовать синтаксис компонента в вашем контенте intlayer.

Component.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Отобразить контент как простой контент -->  <h1>{$content.title}</h1>  <!-- Отобразить контент как компонент (требуется редактором) -->  {@const Component = $content.component}<Component /></div>

Конфигурация Git

Рекомендуется игнорировать файлы, сгенерированные Intlayer.

.gitignore

Копировать код

Копировать код в буфер обмена

# Игнорировать файлы, сгенерированные Intlayer.intlayer

(Опционально) Шаг 1 : Извлечение содержимого ваших компонентов

Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.

Чтобы упростить этот процесс, Intlayer предлагает компилятор / экстрактор для преобразования ваших компонентов и извлечения содержимого.

Чтобы настроить его, вы можете добавить раздел compiler в ваш файл intlayer.config.ts:

intlayer.config.ts

Копировать код

Копировать код в буфер обмена

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Остальная часть вашей конфигурации
  compiler: {
    /**
     * Указывает, должен ли быть включен компилятор.
     */
    enabled: true,

    /**
     * Определяет путь к выходным файлам
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Указывает, должны ли компоненты сохраняться после преобразования. Таким образом, компилятор можно запустить только один раз для преобразования приложения, а затем удалить.
     */
    saveComponents: false,

    /**
     * Префикс ключа словаря
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Запустите экстрактор для преобразования компонентов и извлечения содержимого

bash

Копировать код

Копировать код в буфер обмена

npx intlayer extract

Обновите ваш vite.config.ts, чтобы включить плагин intlayerCompiler:

vite.config.ts

Копировать код

Копировать код в буфер обмена

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Добавляет плагин компилятора ],});

bash

Копировать код

Копировать код в буфер обмена

npm run build # Или npm run dev

Дальнейшие шаги

Визуальный редактор: Интегрируйте Визуальный редактор Intlayer, чтобы редактировать переводы напрямую из пользовательского интерфейса.
CMS: Вынесите управление контентом с помощью CMS Intlayer.

Vite и Svelte

Vite и Preact

\n\n\n

{$content.title}

\n\n

\n\t

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

\n {\n e.preventDefault();\n setLocale(localeEl); // Установит локаль в хранилище и вызовет 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

Создание:2025-11-20Последнее обновление:2026-05-06

Посмотреть шаблон приложения на GitHub

Для этой страницы доступен шаблон приложения.

Посмотреть демонстрационное приложение

Эта страница ведёт на живую демонстрацию шаблона.

Ссылайтесь на этот документ на ваш любимый ассистент AI

ChatGPT

Claude

DeepSeek

Google AI mode Gemini

Perplexity Mistral

Grok

Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI

История версий

"Обновление использования API useIntlayer в Solid для прямого доступа к свойствам"
v8.9.004.05.2026
"Добавить команду init"
v7.5.930.12.2025
"Инициализация истории"
v7.1.1020.11.2025

Содержимое этой страницы было переведено с помощью ИИ.

Смотреть последнюю версию оригинального контента на английском

Изменить эту документацию

Ссылка на документацию GitHub

Копировать

Копировать Markdown документа в буфер обмена

Перевод вашего сайта на SvelteKit с помощью Intlayer | Интернационализация (i18n)

ide.intlayer.org

Содержание

Что такое Intlayer?

С помощью Intlayer вы можете:

Легко управлять переводами с использованием декларативных словарей на уровне компонентов.
Динамически локализовать метаданные, маршруты и контент.
Обеспечить поддержку TypeScript с помощью автогенерируемых типов.
Использовать SSR SvelteKit для SEO-оптимизированной интернационализации.

Пошаговое руководство по настройке Intlayer в приложении SvelteKit

Для начала создайте новый проект SvelteKit. Вот итоговая структура, которую мы создадим:

bash

Копировать код

Копировать код в буфер обмена

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

Шаг 1: Установка зависимостей

Установите необходимые пакеты с помощью npm:

bash

Копировать код

Копировать код в буфер обмена

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: Основной пакет для i18n.
svelte-intlayer: Предоставляет провайдеры контекста и сторы для Svelte/SvelteKit.
vite-intlayer: Плагин Vite для интеграции деклараций контента в процесс сборки.

Шаг 2: Конфигурация вашего проекта

Создайте файл конфигурации в корне вашего проекта:

intlayer.config.ts

Копировать код

Копировать код в буфер обмена

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;

Шаг 3: Интеграция Intlayer в конфигурацию Vite

vite.config.ts

Копировать код

Копировать код в буфер обмена

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // порядок важен, Intlayer должен быть размещён перед SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // порядок важен, Intlayer должен быть размещён перед SvelteKit});

Шаг 4: Объявите ваш контент

Шаг 5: Используйте Intlayer в ваших компонентах

Примечание: useIntlayer возвращает Svelte store, поэтому для доступа к его реактивному значению нужно использовать префикс `--- createdAt: 2025-11-20 updatedAt: 2026-05-06 title: Как перевести ваше приложение SvelteKit – руководство по i18n 2026 description: Узнайте, как сделать ваш сайт на SvelteKit многоязычным. Следуйте документации по интернационализации (i18n) и переводу с использованием серверного рендеринга (SSR). keywords:

Интернационализация
Документация
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: Инициализация истории

Перевод вашего сайта на SvelteKit с помощью Intlayer | Интернационализация (i18n)

Содержание

Что такое Intlayer?

С помощью Intlayer вы можете:

Легко управлять переводами с использованием декларативных словарей на уровне компонентов.
Динамически локализовать метаданные, маршруты и контент.
Обеспечить поддержку TypeScript с помощью автогенерируемых типов.
Использовать SSR SvelteKit для SEO-оптимизированной интернационализации.

Пошаговое руководство по настройке Intlayer в приложении SvelteKit

Для начала создайте новый проект SvelteKit. Вот итоговая структура, которую мы создадим:

bash

Копировать код

Копировать код в буфер обмена

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

Шаг 1: Установка зависимостей

Установите необходимые пакеты с помощью npm:

bash

Копировать код

Копировать код в буфер обмена

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: Основной пакет для i18n.
svelte-intlayer: Предоставляет провайдеры контекста и сторы для Svelte/SvelteKit.
vite-intlayer: Плагин Vite для интеграции деклараций контента в процесс сборки.

Шаг 2: Конфигурация вашего проекта

Создайте файл конфигурации в корне вашего проекта:

intlayer.config.ts

Копировать код

Копировать код в буфер обмена

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;

Шаг 3: Интеграция Intlayer в конфигурацию Vite

vite.config.ts

Копировать код

Копировать код в буфер обмена

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // порядок важен, Intlayer должен быть размещён перед SvelteKit});

import { sveltekit } from "@sveltejs/kit/vite";import { defineConfig } from "vite";import { intlayer } from "vite-intlayer";export default defineConfig({  plugins: [intlayer(), sveltekit()], // порядок важен, Intlayer должен быть размещён перед SvelteKit});

Шаг 4: Объявите ваш контент

Шаг 5: Используйте Intlayer в ваших компонентах

(например, $content.title).

src/lib/components/Component.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  // "hero-section" соответствует ключу, определённому на Шаге 4  const content = useIntlayer("hero-section");</script><!-- Отобразить контент как простой текст --><h1>{$content.title}</h1><!-- Чтобы отобразить контент с возможностью редактирования через редактор --><h1>{@const Title = $content.title}<Title /></h1><!-- Для отображения содержимого в виде строки --><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" соответствует ключу, определённому на Шаге 4  const content = useIntlayer("hero-section");</script><!-- Отобразить контент как простой текст --><h1>{$content.title}</h1><!-- Чтобы отобразить контент с возможностью редактирования через редактор --><h1>{@const Title = $content.title}<Title /></h1><!-- Для отображения содержимого в виде строки --><div aria-label={$content.title.value}></div><div aria-label={$content.title.toString()}></div><div aria-label={String($content.title)}></div>

(Необязательно) Шаг 6: Настройка маршрутизации

bash

Копировать код

Копировать код в буфер обмена

.└─── src    ├── app.d.ts                  # Определение типа локали    ├── hooks.server.ts           # Управление маршрутизацией локали    ├── lib    │   └── getLocale.ts          # Проверка локали из заголовка, cookies    ├── params    │   └── locale.ts             # Определение параметра локали    └── routes        ├── [[locale=locale]]     # Обертка в группу маршрутов для установки локали        │   ├── +layout.svelte    # Локальный layout для маршрута        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Корневой layout для шрифтов и глобальных стилей

.└─── src    ├── app.d.ts                  # Определение типа локали    ├── hooks.server.ts           # Управление маршрутизацией локали    ├── lib    │   └── getLocale.ts          # Проверка локали из заголовка, cookies    ├── params    │   └── locale.ts             # Определение параметра локали    └── routes        ├── [[locale=locale]]     # Обертка в группу маршрутов для установки локали        │   ├── +layout.svelte    # Локальный layout для маршрута        │   ├── +layout.ts        │   ├── +page.svelte        │   ├── +page.ts        │   └── about        │       ├── +page.svelte        │       └── +page.ts        └── +layout.svelte         # Корневой layout для шрифтов и глобальных стилей

Шаг 7: Обработка определения локали на стороне сервера (Hooks)

Создайте или измените файл src/hooks.server.ts:

src/hooks.server.ts

Копировать код

Копировать код в буфер обмена

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);  // Проверяем, начинается ли текущий путь с локали (например, /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Если локаль отсутствует в URL (например, пользователь заходит на "/"), перенаправляем его  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Временное перенаправление    });  }  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);  // Проверяем, начинается ли текущий путь с локали (например, /fr, /en)  const pathname = event.url.pathname;  const targetPathname = getLocalizedUrl(pathname, detectedLocale);  // Если локаль отсутствует в URL (например, пользователь заходит на "/"), перенаправляем его  if (targetPathname !== pathname) {    return new Response(undefined, {      headers: { Location: targetPathname },      status: 307, // Временное перенаправление    });  }  return resolve(event, {    transformPageChunk: ({ html }) => html.replace("%lang%", detectedLocale),  });};

Затем создайте помощник для получения локали пользователя из события запроса:

src/lib/getLocale.ts

Копировать код

Копировать код в буфер обмена

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Получить локаль пользователя из события запроса. * Эта функция используется в хуке `handle` в `src/hooks.server.ts`. * * Сначала пытается получить локаль из хранилища Intlayer (cookies или пользовательские заголовки). * Если локаль не найдена, используется fallback на браузерное определение через "Accept-Language". * * @param event - Событие запроса из SvelteKit * @returns Локаль пользователя */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Попытка получить локаль из хранилища Intlayer (Cookies или заголовки)  const storedLocale = getLocaleFromStorage({    // Доступ к cookies в SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Доступ к заголовкам в SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Запасной вариант: определение локали через браузерный заголовок "Accept-Language"  const negotiatorHeaders: Record<string, string> = {};  // Преобразование объекта Headers из SvelteKit в простой Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Проверка локали из заголовка `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Возврат локали по умолчанию, если совпадений не найдено  return defaultLocale;};

import {  configuration,  getLocaleFromStorage,  localeDetector,  type Locale,} from "intlayer";import type { RequestEvent } from "@sveltejs/kit";/** * Получить локаль пользователя из события запроса. * Эта функция используется в хуке `handle` в `src/hooks.server.ts`. * * Сначала пытается получить локаль из хранилища Intlayer (cookies или пользовательские заголовки). * Если локаль не найдена, используется fallback на браузерное определение через "Accept-Language". * * @param event - Событие запроса из SvelteKit * @returns Локаль пользователя */export const getLocale = (event: RequestEvent): Locale => {  const defaultLocale = configuration?.internationalization?.defaultLocale;  // Попытка получить локаль из хранилища Intlayer (Cookies или заголовки)  const storedLocale = getLocaleFromStorage({    // Доступ к cookies в SvelteKit    getCookie: (name: string) => event.cookies.get(name) ?? null,    // Доступ к заголовкам в SvelteKit    getHeader: (name: string) => event.request.headers.get(name) ?? null,  });  if (storedLocale) {    return storedLocale;  }  // Запасной вариант: определение локали через браузерный заголовок "Accept-Language"  const negotiatorHeaders: Record<string, string> = {};  // Преобразование объекта Headers из SvelteKit в простой Record<string, string>  event.request.headers.forEach((value, key) => {    negotiatorHeaders[key] = value;  });  // Проверка локали из заголовка `Accept-Language`  const userFallbackLocale = localeDetector(negotiatorHeaders);  if (userFallbackLocale) {    return userFallbackLocale;  }  // Возврат локали по умолчанию, если совпадений не найдено  return defaultLocale;};

getLocaleFromStorage будет проверять локаль из заголовка или cookie в зависимости от вашей конфигурации. Подробнее смотрите в разделе Configuration.

Функция localeDetector обрабатывает заголовок Accept-Language и возвращает наилучшее совпадение.

/src/params/locale.ts

Копировать код

Копировать код в буфер обмена

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

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

Примечание: Убедитесь, что в вашем файле src/app.d.ts определена локаль:
typescript
Копировать код
Копировать код в буфер обмена
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}
declare global {  namespace App {    interface Locals {      locale: import("intlayer").Locale;    }  }}

Для файла +layout.svelte мы можем удалить всё, чтобы оставить только статический контент, не связанный с i18n:

src/+layout.svelte

Копировать код

Копировать код в буфер обмена

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

Затем создайте новую страницу и layout в группе [[locale=locale]]:

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

Копировать код

Копировать код в буфер обмена

import type { Load } from "@sveltejs/kit";import { defaultLocale, type Locale } from "intlayer";export const prerender = true;// Используем универсальный тип 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;// Используем универсальный тип Loadexport const load: Load = ({ params }) => {  const locale: Locale = (params.locale as Locale) ?? defaultLocale;  return {    locale,  };};

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

Копировать код

Копировать код в буфер обмена

<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();    // Инициализация Intlayer с локалью из маршрута  $effect(() => {      setupIntlayer(data.locale);  });    // Использование словаря контента для layout    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();    // Инициализация Intlayer с локалью из маршрута  $effect(() => {      setupIntlayer(data.locale);  });    // Использование словаря контента для layout    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

Копировать код

Копировать код в буфер обмена

export const prerender = true;

export const prerender = true;

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

Копировать код

Копировать код в буфер обмена

<script lang="ts">    import { useIntlayer } from "svelte-intlayer";    // Использование словаря контента для домашней страницы    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";    // Использование словаря контента для домашней страницы    const homeContent = useIntlayer('home');</script><svelte:head>    <title>{$homeContent.title.value}</title></svelte:head><section>    <h1>        {$homeContent.title}    </h1></section><style>  /*  */</style>

(Необязательно) Шаг 8: Интернационализированные ссылки

src/lib/components/LocalizedLink.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">  import { getLocalizedUrl } from "intlayer";  import { useLocale } from "svelte-intlayer";  let { href = "" } = $props();  const { locale } = useLocale();  // Помощник для добавления префикса локали к 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();  // Помощник для добавления префикса локали к URL  $: localizedHref = getLocalizedUrl(href, $locale);</script><a href={localizedHref}>  <slot /></a>

typescript

Копировать код

Копировать код в буфер обмена

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Переходит на /en/about или /fr/about в зависимости от локали

import { goto } from "$app/navigation";import { getLocalizedUrl } from "intlayer";import { useLocale } from "svelte-intlayer";const { locale } = useLocale();const localizedPath = getLocalizedUrl("/about", $locale);goto(localizedPath); // Переходит на /en/about или /fr/about в зависимости от локали

(Необязательно) Шаг 9: Переключатель языка

Чтобы позволить пользователям переключать языки, обновляйте URL.

src/lib/components/LanguageSwitcher.svelte

Копировать код

Копировать код в буфер обмена

<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); // Установит локаль в хранилище и вызовет 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); // Установит локаль в хранилище и вызовет onLocaleChange        }}        class:active={$locale === localeEl}      >        {getLocaleName(localeEl)}      </a>    </li>  {/each}</ul><style>  /* */</style>

(Необязательно) Шаг 10: Добавить backend proxy

vite.config.ts

Копировать код

Копировать код в буфер обмена

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

(Необязательно) Шаг 11: Настройка редактора / CMS intlayer

Для настройки редактора intlayer необходимо следовать документации редактора intlayer.

Для настройки CMS intlayer необходимо следовать документации CMS intlayer.

Component.svelte

Копировать код

Копировать код в буфер обмена

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Отобразить контент как простой контент -->  <h1>{$content.title}</h1>  <!-- Отобразить контент как компонент (требуется редактором) -->  {@const Component = $content.component}<Component /></div>

<script lang="ts">  import { useIntlayer } from "svelte-intlayer";  const content = useIntlayer("component");</script><div>  <!-- Отобразить контент как простой контент -->  <h1>{$content.title}</h1>  <!-- Отобразить контент как компонент (требуется редактором) -->  {@const Component = $content.component}<Component /></div>

Конфигурация Git

Рекомендуется игнорировать файлы, сгенерированные Intlayer.

.gitignore

Копировать код

Копировать код в буфер обмена

# Игнорировать файлы, сгенерированные Intlayer.intlayer

# Игнорировать файлы, сгенерированные Intlayer.intlayer

(Опционально) Шаг 1 : Извлечение содержимого ваших компонентов

Если у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.

Чтобы настроить его, вы можете добавить раздел compiler в ваш файл intlayer.config.ts:

intlayer.config.ts

Копировать код

Копировать код в буфер обмена

import { type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  // ... Остальная часть вашей конфигурации
  compiler: {
    /**
     * Указывает, должен ли быть включен компилятор.
     */
    enabled: true,

    /**
     * Определяет путь к выходным файлам
     */
    output: ({ fileName, extension }) => `./${fileName}${extension}`,

    /**
     * Указывает, должны ли компоненты сохраняться после преобразования. Таким образом, компилятор можно запустить только один раз для преобразования приложения, а затем удалить.
     */
    saveComponents: false,

    /**
     * Префикс ключа словаря
     */
    dictionaryKeyPrefix: "",
  },
};

export default config;

Запустите экстрактор для преобразования компонентов и извлечения содержимого

bash

Копировать код

Копировать код в буфер обмена

npx intlayer extract

npx intlayer extract

Обновите ваш vite.config.ts, чтобы включить плагин intlayerCompiler:

vite.config.ts

Копировать код

Копировать код в буфер обмена

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Добавляет плагин компилятора ],});

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Добавляет плагин компилятора ],});

bash

Копировать код

Копировать код в буфер обмена

npm run build # Или npm run dev

npm run build # Или npm run dev

Дальнейшие шаги

Визуальный редактор: Интегрируйте Визуальный редактор Intlayer, чтобы редактировать переводы напрямую из пользовательского интерфейса.
CMS: Вынесите управление контентом с помощью CMS Intlayer.

Vite и Svelte

Vite и Preact