Спросите свой вопрос и получите сводку документа, используя эту страницу и выбранного вами поставщика AI
Интеграция сервера MCP Intlayer в ваш любимый AI-ассистент позволяет получать все документы непосредственно из ChatGPT, DeepSeek, Cursor, VSCode и т.д.
Просмотр документации сервера MCPСодержимое этой страницы было переведено с помощью ИИ.
Смотреть последнюю версию оригинального контента на английскомЕсли у вас есть идея по улучшению этой документации, не стесняйтесь внести свой вклад, подав запрос на вытягивание на GitHub.
Ссылка на документацию GitHubКопировать Markdown документа в буфер обмена
Начало работы с интернационализацией (i18n) с Intlayer, Vite и Solid
Этот пакет находится в разработке. Подробнее смотрите в issue. Покажите свой интерес к Intlayer для Solid, поставив лайк этому issue.
Что такое Intlayer?
Intlayer — это инновационная, открытая библиотека интернационализации (i18n), созданная для упрощения поддержки многоязычности в современных веб-приложениях.
С помощью Intlayer вы можете:
- Легко управлять переводами с использованием декларативных словарей на уровне компонентов.
- Динамически локализовать метаданные, маршруты и содержимое.
- Обеспечить поддержку TypeScript с помощью автогенерируемых типов, улучшая автодополнение и обнаружение ошибок.
- Воспользуйтесь расширенными возможностями, такими как динамическое определение и переключение локали.
Пошаговое руководство по настройке Intlayer в приложении на Vite и Solid
Шаг 1: Установка зависимостей
Установите необходимые пакеты с помощью npm:
Копировать код в буфер обмена
npm install intlayer solid-intlayernpm install vite-intlayer --save-dev
intlayer
intlayer
Основной пакет, предоставляющий инструменты интернационализации для управления конфигурацией, перевода, объявления контента, транспиляции и CLI-команд.
solid-intlayer Пакет, интегрирующий Intlayer с приложением Solid. Он предоставляет провайдеры контекста и хуки для интернационализации в Solid.
vite-intlayer Включает плагин Vite для интеграции Intlayer с сборщиком Vite, а также промежуточное ПО для определения предпочтительной локали пользователя, управления cookie и обработки перенаправления URL.
Шаг 2: Настройка вашего проекта
Создайте файл конфигурации для настройки языков вашего приложения:
Копировать код в буфер обмена
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // Ваши другие локали ], defaultLocale: Locales.ENGLISH, },};export default config;
С помощью этого файла конфигурации вы можете настроить локализованные URL, перенаправление в промежуточном ПО, имена cookie, расположение и расширение ваших деклараций контента, отключить логи Intlayer в консоли и многое другое. Для полного списка доступных параметров обратитесь к документации по конфигурации.
Шаг 3: Интеграция Intlayer в вашу конфигурацию Vite
Добавьте плагин intlayer в вашу конфигурацию.
Копировать код в буфер обмена
import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [react(), intlayerPlugin()],});
Плагин Vite intlayerPlugin() используется для интеграции Intlayer с Vite. Он обеспечивает сборку файлов деклараций контента и отслеживает их в режиме разработки. Также он определяет переменные окружения Intlayer внутри приложения Vite. Дополнительно предоставляет алиасы для оптимизации производительности.
Шаг 4: Объявите ваш контент
Создайте и управляйте декларациями контента для хранения переводов:
Копировать код в буфер обмена
import { t, type Dictionary } from "intlayer";const appContent = { key: "app", content: {},} satisfies Dictionary;export default appContent;
Ваши объявления контента могут быть определены в любом месте вашего приложения, как только они будут включены в каталог contentDir (по умолчанию, ./src). И соответствовать расширению файла объявления контента (по умолчанию, .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).
Для получения дополнительной информации обратитесь к документации по объявлениям контента.
Шаг 5: Использование Intlayer в вашем коде
[будет дополнено]
(Необязательно) Шаг 6: Изменение языка вашего контента
[будет дополнено]
(Необязательно) Шаг 7: Добавление локализованной маршрутизации в ваше приложение
[будет дополнено]
(Необязательно) Шаг 8: Изменение URL при смене локали
[будет дополнено]
(Необязательно) Шаг 9: Переключение атрибутов языка и направления HTML
[будет дополнено]
(Необязательно) Шаг 10: Создание локализованного компонента ссылки
[будет дополнено]
Конфигурация Git
Рекомендуется игнорировать файлы, сгенерированные Intlayer. Это позволит избежать их коммита в ваш репозиторий Git.
Для этого вы можете добавить следующие инструкции в ваш файл .gitignore:
Копировать код в буфер обмена
# Игнорировать файлы, сгенерированные Intlayer.intlayer
Расширение VS Code
Для улучшения вашего опыта разработки с Intlayer вы можете установить официальное расширение Intlayer для VS Code.
Установить из VS Code Marketplace
Это расширение предоставляет:
- Автодополнение для ключей переводов.
- Обнаружение ошибок в реальном времени для отсутствующих переводов.
- Встроенный просмотр переведённого контента.
- Быстрые действия для лёгкого создания и обновления переводов.
Для получения дополнительной информации о том, как использовать расширение, обратитесь к документации расширения Intlayer для VS Code.
Продвинутые возможности
Для расширения возможностей вы можете реализовать визуальный редактор или вынести ваш контент во внешний CMS.
История документа
- 5.5.10 - 2025-06-29: Инициализация истории