Задайте питання та отримайте підсумок документа, вказавши цю сторінку та обраного вами постачальника штучного інтелекту
Історія версій
- "Оновлення використання API useIntlayer у Solid для прямого доступу до властивостей"v8.9.004.05.2026
- "Додано команду init"v7.5.930.12.2025
- "Оновлення інтеграції Astro, конфігурації та використання"v6.2.003.10.2025
Вміст цієї сторінки перекладено за допомогою штучного інтелекту.
Переглянути останню версію оригінального вмісту англійськоюЯкщо у вас є ідея щодо покращення цієї документації, будь ласка, долучіться, надіславши pull request на GitHub.
Посилання на документацію на GitHubСкопіювати документацію у форматі Markdown в буфер обміну
Перекладіть свій сайт Astro за допомогою Intlayer | Інтернаціоналізація (i18n)
Зміст
Що таке Intlayer?
Intlayer - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатьох мов у сучасних веб-додатках.
З Intlayer ви можете:
- Легко керувати перекладами: Використовуючи декларативні словники на рівні компонентів.
- Динамічно локалізувати метадані, маршрути та вміст.
- Забезпечити підтримку TypeScript: Завдяки автоматично згенерованим типам для кращого автовідчуття та виявлення помилок.
- Використовувати розширені можливості: Такі як динамічне визначення мови та перемикання мов.
Покрокова інструкція з налаштування Intlayer в Astro
Перегляньте шаблон додатка на GitHub.
Крок 1: Встановіть залежності
Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:
Скопіюйте код у буфер обміну
npm install intlayer astro-intlayer# опціонально: якщо ви хочете додати підтримку React islandsnpm install react react-dom react-intlayer @astrojs/reactintlayer Основний пакет, що надає інструменти i18n для керування конфігурацією, перекладами, декларацією вмісту, транспіляцією та командами CLI.
astro-intlayer Плагін інтеграції Astro для зв'язку Intlayer з бандлером Vite; він також включає middleware для визначення бажаної мови користувача, керування cookie та обробки перенаправлень URL.
Крок 2: Налаштуйте свій проект
Створіть конфігураційний файл, щоб визначити мови вашого додатка:
Скопіюйте код у буфер обміну
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, Locales.UKRAINIAN, // Ваші інші локалі ], defaultLocale: Locales.ENGLISH, },};export default config;Через цей конфігураційний файл ви можете налаштувати локалізовані URL-адреси, перенаправлення middleware, імена cookie, розташування та розширення декларацій вмісту, вимкнути логи Intlayer у консолі та багато іншого. Повний список доступних параметрів дивіться в документації з конфігурації.
Крок 3: Інтегруйте Intlayer у вашу конфігурацію Astro
Додайте плагін intlayer до вашої конфігурації Astro.
Скопіюйте код у буфер обміну
// @ts-checkimport { intlayer } from "astro-intlayer";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({ integrations: [intlayer()],});Плагін інтеграції intlayer() використовується для інтеграції Intlayer з Astro. Він забезпечує генерацію файлів декларації вмісту та стежить за ними в режимі розробки. Він визначає змінні середовища Intlayer всередині додатка Astro та надає аліаси для оптимізації продуктивності.
Крок 4: Декларуйте свій вміст
Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:
Скопіюйте код у буфер обміну
import { t, type Dictionary } from "intlayer";import type { ReactNode } from "react";const appContent = { key: "app", content: { title: t({ en: "Hello World", fr: "Bonjour le monde", es: "Hola mundo", uk: "Привіт Світе", }), },} satisfies Dictionary;export default appContent;Декларації вмісту можна визначати в будь-якому місці вашого додатка, за умови, що вони включені вcontentDir(за замовчуванням./src) і відповідають розширенню файлів декларації вмісту (за замовчуванням.content.{json,ts,tsx,js,jsx,mjs,cjs}).
Для отримання додаткової інформації дивіться документацію з декларації вмісту.
Крок 5: Використання вмісту в Astro
Ви можете використовувати словники безпосередньо у ваших .astro файлах, використовуючи основні допоміжні функції, експортовані з intlayer.
Скопіюйте код у буфер обміну
---import { getIntlayer, getLocaleFromPath, getLocalizedUrl, defaultLocale, localeMap, getHTMLTextDir, type LocalesValues,} from "intlayer";import LocaleSwitcher from "../components/LocaleSwitcher.astro";// Get the current locale from the URL (e.g. /es/about -> 'es')const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;// Get the content for the 'app' dictionaryconst { title } = getIntlayer("app", locale);---<!doctype html><html lang={locale} dir={getHTMLTextDir(locale)}> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> <title>{title}</title> <!-- Canonical link: Tells search engines which is the primary version of this page --> <link rel="canonical" href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)} /> <!-- Hreflang: Tell Google about all localized versions --> { localeMap(({ locale: mapLocale }) => ( <link rel="alternate" hreflang={mapLocale} href={new URL( getLocalizedUrl(Astro.url.pathname, mapLocale), Astro.site )} /> )) } <!-- x-default: Fallback for users in unmatched languages --> <link rel="alternate" hreflang="x-default" href={new URL( getLocalizedUrl(Astro.url.pathname, defaultLocale), Astro.site )} /> </head> <body> <header> <LocaleSwitcher /> </header> <main> <h1>{title}</h1> </main> </body></html>Крок 6: Локалізована маршрутизація
Створіть динамічні сегменти маршрутів (наприклад, src/pages/[locale]/index.astro) для обслуговування локалізованих сторінок:
Скопіюйте код у буфер обміну
---import { getIntlayer } from "intlayer";const { title } = getIntlayer('app');---<h1>{title}</h1>Інтеграція Astro додає middleware Vite, який допомагає з маршрутизацією з урахуванням мови та визначеннями середовища під час розробки. Ви також можете використовувати власну логіку або інструменти intlayer, такі як getLocalizedUrl, для посилань між мовами.
Крок 7: Продовжуйте використовувати ваш улюблений фреймворк
Продовжуйте будувати свій додаток, використовуючи фреймворк за вашим вибором.
- Intlayer + React: Intlayer з React
- Intlayer + Vue: Intlayer з Vue
- Intlayer + Svelte: Intlayer з Svelte
- Intlayer + Solid: Intlayer з Solid
- Intlayer + Preact: Intlayer з Preact
Конфігурація TypeScript
Intlayer використовує розширення модулів (module augmentation), щоб отримати переваги від TypeScript, роблячи вашу кодову базу надійнішою.
Переконайтеся, що ваша конфігурація TypeScript включає автоматично згенеровані типи.
Скопіюйте код у буфер обміну
{ // ... ваша існуюча конфігурація TypeScript "include": [ // ... ваша існуюча конфігурація TypeScript ".intlayer/**/*.ts", // Включити автоматично згенеровані типи ],}Конфігурація Git
Ми рекомендуємо ігнорувати файли, згенеровані Intlayer. Це запобігає їх потраплянню до вашого Git-репозиторію.
Для цього додайте наступні інструкції до вашого файлу .gitignore:
Скопіюйте код у буфер обміну
# Ігнорувати файли, згенеровані Intlayer.intlayerРозширення для VS Code
Щоб покращити ваш досвід розробки з Intlayer, ви можете встановити офіційне розширення Intlayer для VS Code.
Встановити з VS Code Marketplace
Це розширення забезпечує:
- Автозаповнення ключів перекладу.
- Виявлення помилок у реальному часі для відсутніх перекладів.
- Попередній перегляд перекладеного вмісту.
- Швидкі дії для легкого створення та оновлення перекладів.
Для отримання додаткової інформації про використання розширення дивіться документацію розширення VS Code.
(Необов'язково) Крок 1 : Витягніть вміст ваших компонентів
Якщо у вас є існуюча кодова база, перетворення тисяч файлів може зайняти багато часу.
Щоб спростити цей процес, Intlayer пропонує компілятор / екстрактор для перетворення ваших компонентів і витягування вмісту.
Щоб налаштувати його, ви можете додати розділ compiler у свій файл 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;Запустіть екстрактор для перетворення компонентів і витягування вмісту
Скопіюйте код у буфер обміну
npx intlayer extractПоглиблюйте свої знання
Якщо ви хочете дізнатися більше, ви також можете впровадити Візуальний редактор або використовувати CMS, щоб винести ваш вміст назовні.