Преминете към основното съдържание

Уебсайт — Интернационализация (i18n)

Уебсайтът на Dictaro поддържа 25 езика чрез вградената i18n система на Astro 5 с динамични [...lang] routes и JSON translation файлове.

Архитектура

Поддържани езици

КодЕзик (English)Език (Native)
enEnglishEnglish
bgBulgarianБългарски
hrCroatianHrvatski
csCzechCestina
daDanishDansk
nlDutchNederlands
etEstonianEesti
fiFinnishSuomi
frFrenchFrancais
deGermanDeutsch
elGreekEllinika
huHungarianMagyar
itItalianItaliano
lvLatvianLatviesu
ltLithuanianLietuviu
mtMalteseMalti
plPolishPolski
ptPortuguesePortugues
roRomanianRomana
ruRussianRusskiy
skSlovakSlovencina
slSlovenianSlovenscina
esSpanishEspanol
svSwedishSvenska
ukUkrainianUkrainska

URL Routing

Astro използва [...lang] catch-all route с getStaticPaths():

  • Английски (default locale): URL без prefix — /, /pricing, /download
  • Всички останали: URL с locale prefix — /bg/, /bg/pricing, /de/download
  • Конфигурация: prefixDefaultLocale: false в astro.config.mjs

getStaticPaths() генерация

Всяка страница дефинира getStaticPaths(), която връща:

  • { params: { lang: undefined } } — за английски (без prefix)
  • { params: { lang: "bg" } }, { params: { lang: "hr" } }, ... — за останалите 24 езика

Translation система

Файлова структура

src/i18n/translations/
├── en/
│ ├── common.json # Навигация, footer, CTA бутони
│ ├── home.json # Начална страница секции
│ ├── download.json # Download страница
│ ├── pricing.json # Pricing страница
│ ├── terms.json # Terms of Service
│ └── meta.json # SEO title/description
├── bg/
│ ├── common.json
│ ├── home.json
│ ├── download.json
│ ├── pricing.json
│ ├── terms.json
│ └── meta.json
├── ... (23 други езика, всеки с до 6 namespace файла)

Namespaces

NamespaceОписаниеИзползва се от
commonНавигация, footer, CTA бутониNav, Footer, Hero, Pricing
homeHero, Features, Demo, UseCases, Trust, Stats, SocialProofindex.astro
downloadDownload секцияdownload.astro, Download компонент
pricingPricing тарифи и текстовеpricing.astro, Pricing компонент
termsTerms of Serviceterms.astro
metaSEO заглавия и описанияBaseLayout

Зареждане на преводите

translations.ts използва Vite glob import за eager зареждане на всички JSON файлове:

const translationModules = import.meta.glob("./translations/**/*.json", { eager: true });

Функцията getTranslation(locale, namespace) връща merged обект:

  • Първо зарежда fallback (английски) преводи
  • След това overlay преводите за текущия език
  • Липсващи ключове автоматично fallback-ват към английски

Помощни функции

ФункцияОписание
useTranslations(locale, namespace)Връща Record<string, string> за даден език и namespace
getLocalizedPath(path, locale)Генерира локализиран URL (/pricing/bg/pricing)
getCurrentLocale(url)Извлича текущия език от URL path

Language Switcher компонент

LanguageSwitcher.astro предоставя dropdown за смяна на езика:

Компонентът:

  • Показва текущия език с native name и globe иконка
  • Dropdown с всички 25 езика (native + English имена)
  • Запомня избора в localStorage като preferred-locale
  • Преизчислява URL: премахва текущия locale prefix и добавя новия
  • Нормализира double slashes и trailing slashes

SEO за всеки език

  • Всяка страница има локализирани <title> и <meta description> от meta.json namespace
  • @astrojs/sitemap генерира sitemap.xml с URLs за всички езици
  • Canonical URLs от astro.config.mjssite: "https://dictaro.ai"

Добавяне на нов език

  1. Добави нов запис в website/src/i18n/locales.ts:
    { code: "ja", english: "Japanese", native: "日本語" }
  2. Добави "ja" в масива locales в website/astro.config.mjs
  3. Създай website/src/i18n/translations/ja/ с необходимите JSON файлове
  4. Rebuild и deploy — новият език автоматично получава routes