Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
История версий
- "Обновление использования API useIntlayer в Solid для прямого доступа к свойствам"v8.9.004.05.2026
- "Добавить команду init"v7.5.930.12.2025
- "Обновление документации"v5.5.1119.11.2025
- "Инициализация истории"v5.5.1029.06.2025
Содержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
Перевод вашего сайта на Vite и Svelte с использованием Intlayer | Интернационализация (i18n)
Содержание
Почему Intlayer лучше альтернатив?
По сравнению с основными решениями, такими как «svelte-i18n» или «i18next», Intlayer — это решение, которое включает в себя встроенные оптимизации, такие как:
Intlayer оптимизирован для идеальной работы со Svelte, предлагая охват контента на уровне компонентов, реактивные переводы и все функции, необходимые для масштабирования интернационализации (i18n).
Вместо загрузки огромных файлов JSON на свои страницы загружайте только необходимый контент. Intlayer помогает уменьшить размер бандла и страниц до 50 %.
Определение области содержимого вашего приложения облегчает обслуживание крупномасштабных приложений. Вы можете дублировать или удалить отдельную папку функций, не утруждав себя мысленным бременем проверки всей кодовой базы контента. Кроме того, Intlayer полностью типизирован, что обеспечивает точность вашего контента.
Совместное размещение контента уменьшает контекст, необходимый для моделей большого языка (LLM). Intlayer также поставляется с набором инструментов, таких как CLI для проверки отсутствия переводов,LSP, MCP, и навыки агента, чтобы сделать работу разработчика (DX) еще более удобной для агентов ИИ.
Используйте автоматизацию для перевода в своем конвейере CI/CD, используя LLM по вашему выбору за счет вашего поставщика ИИ. Intlayer также предлагает компилятор для автоматизации извлечения контента, а также веб-платформу, которая помогает переводить в фоновом режиме.
Подключение больших файлов JSON к компонентам может привести к проблемам с производительностью и реактивностью. Intlayer оптимизирует загрузку контента во время сборки (build time).
Intlayer — это больше, чем просто решение i18n. Он предоставляет автономный визуальный редактор и полный CMS, чтобы помочь вам управлять многоязычным контентом в реальном времени, упрощая сотрудничество с переводчиками, копирайтерами и другими членами команды. Контент может храниться локально и/или удаленно.
Пошаговое руководство по настройке Intlayer в приложении на Vite и Svelte
Смотрите Шаблон приложения на GitHub.
Установка зависимостей
Установите необходимые пакеты с помощью npm:
bashКопировать кодКопировать код в буфер обмена
intlayer
Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, объявления контента, транспиляции и CLI-команд.
svelte-intlayer Пакет, который интегрирует Intlayer с приложением на Svelte. Он предоставляет провайдеры контекста и хуки для интернационализации в Svelte.
vite-intlayer Включает плагин Vite для интеграции Intlayer с сборщиком Vite, а также middleware для определения предпочтительной локали пользователя, управления cookie и обработки перенаправления URL.
Конфигурация вашего проекта
Создайте файл конфигурации для настройки языков вашего приложения:
intlayer.config.tsКопировать кодКопировать код в буфер обмена
Через этот файл конфигурации вы можете настроить локализованные URL, перенаправление в middleware, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к документации по конфигурации.
Интеграция Intlayer в вашу конфигурацию Vite
Добавьте плагин intlayer в вашу конфигурацию.
vite.config.tsКопировать кодКопировать код в буфер обмена
Плагин Vite
intlayer()используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов деклараций контента и отслеживает их в режиме разработки. Определяет переменные окружения Intlayer внутри приложения Vite. Кроме того, предоставляет алиасы для оптимизации производительности.Объявите ваш контент
Создайте и управляйте декларациями контента для хранения переводов:
src/app.content.tsxКопировать кодКопировать код в буфер обмена
import { t, type Dictionary } from "intlayer"; const appContent = { key: "app", content: { title: t({ en: "Hello World", fr: "Bonjour le monde", es: "Hola mundo", }), }, } satisfies Dictionary; export default appContent;Ваши объявления контента могут быть определены в любом месте вашего приложения, как только они будут включены в директорию
contentDir(по умолчанию,./src). И соответствовать расширению файла объявления контента (по умолчанию,.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}).Для получения дополнительной информации обратитесь к документации по объявлению контента.
Использование Intlayer в вашем коде
src/App.svelteКопировать кодКопировать код в буфер обмена
Изменение языка вашего контента
Необязательноsrc/App.svelteКопировать кодКопировать код в буфер обмена
Отображение Markdown
НеобязательноIntlayer поддерживает отображение контента в формате Markdown непосредственно в вашем приложении на Svelte. По умолчанию Markdown обрабатывается как простой текст. Чтобы преобразовать Markdown в насыщенный HTML, вы можете интегрировать
@humanspeak/svelte-markdownили другой парсер Markdown.Чтобы узнать, как объявлять контент в формате markdown с использованием пакета
intlayer, смотрите документацию по markdown.src/App.svelteКопировать кодКопировать код в буфер обмена
Вы также можете получить доступ к данным front-matter вашего markdown через свойство
content.markdownContent.metadata.xxx.Настройка редактора / CMS intlayer
НеобязательноДля настройки редактора intlayer необходимо следовать документации редактора intlayer.
Для настройки CMS intlayer необходимо следовать документации CMS intlayer.
Добавьте локализованную маршрутизацию в ваше приложение
НеобязательноДля обработки локализованной маршрутизации в вашем приложении на Svelte вы можете использовать
svelte-spa-routerвместе сlocaleFlatMapиз Intlayer для генерации маршрутов для каждой локали.Сначала установите
svelte-spa-router:bashКопировать кодКопировать код в буфер обмена
Затем создайте файл
Router.svelteдля определения ваших маршрутов:src/Router.svelteКопировать кодКопировать код в буфер обмена
Обновите ваш
main.ts, чтобы монтировать компонентRouterвместоApp:src/main.tsКопировать кодКопировать код в буфер обмена
Наконец, обновите ваш
App.svelte, чтобы принимать пропlocaleи использовать его сuseIntlayer:src/App.svelteКопировать кодКопировать код в буфер обмена
Настройка маршрутизации на стороне сервера (необязательно)
Параллельно вы также можете использовать
intlayerProxyдля добавления маршрутизации на стороне сервера в ваше приложение. Этот плагин автоматически определит текущую локаль на основе URL и установит соответствующее cookie с локалью. Если локаль не указана, плагин определит наиболее подходящую локаль на основе языковых предпочтений браузера пользователя. Если локаль не будет обнаружена, произойдет перенаправление на локаль по умолчанию.Обратите внимание, что для использования
intlayerProxyв продакшене необходимо перевести пакетvite-intlayerизdevDependenciesвdependencies.vite.config.tsКопировать кодКопировать код в буфер обмена
import { defineConfig } from "vite"; import { svelte } from "@sveltejs/vite-plugin-svelte"; import { intlayer, intlayerProxy } from "vite-intlayer"; plugins: [intlayerProxy(), // should be placed first svelte(), intlayer()], });Изменение URL при смене локали
НеобязательноЧтобы позволить пользователям переключать языки и обновлять URL соответствующим образом, вы можете создать компонент
LocaleSwitcher. Этот компонент будет использоватьgetLocalizedUrlизintlayerиpushизsvelte-spa-router.src/lib/LocaleSwitcher.svelteКопировать кодКопировать код в буфер обмена
Извлечение содержимого ваших компонентов
НеобязательноЕсли у вас есть существующая кодовая база, преобразование тысяч файлов может занять много времени.
Чтобы упростить этот процесс, 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Копировать кодКопировать код в буфер обмена
Конфигурация Git
Рекомендуется игнорировать файлы, сгенерированные Intlayer. Это позволит избежать их коммита в ваш репозиторий Git.
Для этого вы можете добавить следующие инструкции в ваш файл .gitignore:
Копировать код в буфер обмена
Расширение VS Code
Чтобы улучшить ваш опыт разработки с Intlayer, вы можете установить официальное расширение Intlayer для VS Code.
Установить из VS Code Marketplace
Это расширение предоставляет:
- Автозаполнение ключей переводов.
- Обнаружение ошибок в реальном времени для отсутствующих переводов.
- Встроенный просмотр переведенного контента.
- Быстрые действия для удобного создания и обновления переводов.
Для получения дополнительной информации о том, как использовать расширение, обратитесь к документации расширения Intlayer для VS Code.
(Опционально) Sitemap и robots.txt (генерация на сборке)
Intlayer предоставляет generateSitemap и getMultilingualUrls - утилиты, которые формируют многоязычные sitemap.xml и robots.txt для краулеров и позволяют автоматически записать их в public/. Обычно запускают небольшой Node-скрипт до Vite (например, npm-хуки predev / prebuild).
Sitemap
Генератор sitemap учитывает локали и добавляет нужные метаданные.
Поддерживается пространство имёнxhtml:link(hreflang). Вместо плоского списка URL Intlayer связывает все языковые версии страницы в обе стороны (например/about,/fr/aboutили/about?lang=frв зависимости от режима маршрутизации).
Robots.txt
Используйте getMultilingualUrls, чтобы правила Disallow покрывали все локализованные варианты путей.
1. Файл generate-seo.mjs в корне проекта
Копировать код в буфер обмена
Пакет intlayer должен быть установлен. Для продакшена задайте SITE_URL в окружении (например в CI).
Для Node ESM предпочтительноgenerate-seo.mjs. Дляgenerate-seo.jsукажите"type": "module"вpackage.jsonили включите ESM иначе.
2. Запуск скрипта до Vite
Копировать код в буфер обмена
Подстройте команды для pnpm или yarn. Скрипт можно вызывать из CI или другого шага.
Продвинуться дальше
Чтобы продвинуться дальше, вы можете реализовать визуальный редактор или вынести ваш контент, используя CMS.