Несколько языков

Интернационализация (i18n) — подготовка сайта к нескольким языкам. Astro не переводит тексты сам, но помогает с адресами: русская версия по /about, английская по /en/about. Языки и правила адресов задают в настройках, а страницы для каждого языка лежат в своей папке.

Настройка языков

Добавьте блок i18n в astro.config.mjs:

// astro.config.mjs
import { defineConfig } from 'astro/config';
 
export default defineConfig({
  site: 'https://blog.example.com',
  i18n: {
    locales: ['ru', 'en'],
    defaultLocale: 'ru',
    routing: {
      prefixDefaultLocale: false,
    },
  },
});

locales — список языков, defaultLocale — основной. prefixDefaultLocale: false значит, что у основного языка нет приставки в адресе: русские страницы на /about, английские на /en/about.

Страницы на другом языке

Английские страницы кладут в папку с кодом языка:

src/pages/
├── index.astro        → /
├── about.md           → /about
└── en/
    ├── index.astro    → /en
    └── about.md       → /en/about

Создайте src/pages/en/about.md с английским текстом — он откроется по /en/about. Статьи на разных языках можно держать в подпапках коллекции, например src/content/blog/en/.

Текущий язык

В компоненте язык открытой страницы лежит в Astro.currentLocale. Используйте его в макете src/layouts/BaseLayout.astro:

---
const lang = Astro.currentLocale ?? 'ru';
---
 
<html lang={lang}>
  <body>
    <slot />
  </body>
</html>

На /about атрибут будет lang="ru", на /en/about — lang="en". Браузеры и поисковики по нему узнают язык страницы.

Ссылки на другой язык

Функция getRelativeLocaleUrl() из модуля astro:i18n строит адрес с учётом настроек:

---
import { getRelativeLocaleUrl } from 'astro:i18n';
---
 
<a href={getRelativeLocaleUrl('en', 'about')}>English</a>
<a href={getRelativeLocaleUrl('ru', 'about')}>Русский</a>

Первая ссылка ведёт на /en/about, вторая — на /about. Если позже включить приставку и для русского, адреса поменяются сами, а код ссылок останется прежним.

Строки интерфейса

Надписи вроде «Читать» и «Статьи» хранят в словаре по языкам, например в src/i18n/ui.ts объект { ru: { read: 'Читать' }, en: { read: 'Read' } }, и выбирают по Astro.currentLocale. Готового словаря Astro не даёт — это обычный объект JavaScript.

Частая ошибка

Пишут ссылки вручную, href="/en/about", по всему сайту. Стоит поменять правило адресов — и половина ссылок ведёт на 404. Стройте адреса через getRelativeLocaleUrl(), чтобы правило было записано в одном месте — в настройках.