Перекладіть свій сайт Astro + Svelte за допомогою Intlayer | Інтернаціоналізація (i18n)

Зміст

Що таке Intlayer?

Intlayer - це інноваційна бібліотека інтернаціоналізації (i18n) з відкритим вихідним кодом, розроблена для спрощення підтримки багатьох мов у сучасних веб-додатках.

З Intlayer ви можете:

• Легко керувати перекладами: Використовуючи декларативні словники на рівні компонентів.
• Динамічно локалізувати метадані, маршрути та вміст.
• Забезпечити підтримку TypeScript: Завдяки автоматично згенерованим типам для кращого автовідчуття та виявлення помилок.
• Використовувати розширені можливості: Такі як динамічне визначення мови та перемикання мов.

Покрокова інструкція з налаштування Intlayer в Astro + Svelte

Перегляньте шаблон додатка на GitHub.

Крок 1: Встановіть залежності

Встановіть необхідні пакети за допомогою бажаного менеджера пакетів:

npm install intlayer astro-intlayer svelte svelte-intlayer @astrojs/sveltenpx intlayer init

• intlayer Основний пакет, що надає інструменти i18n для керування конфігурацією, перекладами, декларацією вмісту, транспіляцією та командами CLI.

• astro-intlayer Плагін інтеграції Astro для зв'язку Intlayer з бандлером Vite; він також включає middleware для визначення бажаної мови користувача, керування cookie та обробки перенаправлень URL.

• svelte Основний пакет Svelte.

• svelte-intlayer Пакет для інтеграції Intlayer у додатки Svelte. Він надає setupIntlayer, а також стори useIntlayer та useLocale для інтернаціоналізації у Svelte.

• @astrojs/svelte Офіційна інтеграція Astro, яка дозволяє використовувати Svelte component islands.

Крок 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 та інтеграцію Svelte.

// @ts-checkimport { intlayer } from "astro-intlayer";import svelte from "@astrojs/svelte";import { defineConfig } from "astro/config";// https://astro.build/configexport default defineConfig({  integrations: [intlayer(), svelte()],});

Плагін інтеграції intlayer() використовується для інтеграції Intlayer з Astro. Він забезпевує генерацію файлів декларації вмісту та стежить за ними в режимі розробки. Він визначає змінні середовища Intlayer всередині додатка Astro та надає аліаси для оптимізації продуктивності.

Інтеграція svelte() дозволяє використовувати Svelte component islands за допомогою client:only="svelte".

Крок 4: Декларуйте свій вміст

Створюйте та керуйте своїми деклараціями вмісту для зберігання перекладів:

import { t, type Dictionary } from "intlayer";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. Вам також слід додати метадані SEO (такі як hreflang та канонічні посилання) на кожній сторінці та додати Svelte island для інтерактивного вмісту на стороні клієнта.

---import {  getIntlayer,  getLocaleFromPath,  getLocalizedUrl,  getHTMLTextDir,  getPrefix,  localeMap,  defaultLocale,  type LocalesValues,} from "intlayer";import SvelteIsland from "../../components/svelte/SvelteIsland.svelte";export const getStaticPaths = () => {  return localeMap(({ locale }) => ({    params: { locale: getPrefix(locale).localePrefix },  }));};const locale = getLocaleFromPath(Astro.url.pathname) as LocalesValues;const { 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>    <!-- Канонічне посилання: Повідомляє пошуковим системам основну версію цієї сторінки -->    <link      rel="canonical"      href={new URL(getLocalizedUrl(Astro.url.pathname, locale), Astro.site)}    />    <!-- Hreflang: Повідомляє Google про всі локалізовані версії -->    {      localeMap(({ locale: mapLocale }) => (        <link          rel="alternate"          hreflang={mapLocale}          href={new URL(            getLocalizedUrl(Astro.url.pathname, mapLocale),            Astro.site          )}        />      ))    }    <!-- x-default: Резервний варіант, коли мова не відповідає мові користувача -->    <link      rel="alternate"      hreflang="x-default"      href={new URL(        getLocalizedUrl(Astro.url.pathname, defaultLocale),        Astro.site      )}    />  </head>  <body>    <!-- Svelte island рендерить увесь інтерактивний вміст, включаючи перемикач мов -->    <SvelteIsland locale={locale} client:only="svelte" />  </body></html>

Якщо ви хочете використовувати свій контент в атрибуті рядка, такому як alt, title, href, aria-label тощо, ви можете використовувати значення функції, наприклад:

html

Копіювати вміст

Копіювати код

Скопіюйте код у буфер обміну

<img src="{content.image.src.value}" alt="{content.image.value}" /><img src="{content.image.src.toString()}" alt="{content.image.toString()}" /><img src="{String(content.image.src)}" alt="{String(content.image)}" />

Примітка щодо налаштування маршрутизації: Структура каталогів, яку ви використовуєте, залежить від параметра middleware.routing у intlayer.config.ts:

• prefix-no-default (за замовчуванням): Зберігає мову за замовчуванням у корені (без префікса) та додає префікси до інших. Використовуйте [...locale], щоб охопити всі випадки.
• prefix-all: Усі URL-адреси отримують префікс мови. Ви можете використовувати стандартний [locale], якщо вам не потрібно окремо обробляти корінь.
• search-param або no-prefix: Каталоги мов не потрібні. Мова керується за допомогою параметрів запиту або cookie.

Крок 6: Створення компонента Svelte Island

Створіть компонент island, який обгортає ваш додаток Svelte. Ви повинні викликати setupIntlayer з мовою, визначеною сервером, перед доступом до будь-яких сторів.

<script lang="ts">  import { useIntlayer, useLocale, setupIntlayer } from "svelte-intlayer";  import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";  export let locale: LocalesValues;  setupIntlayer(locale);  const content = useIntlayer("app");  const { locale: currentLocale, availableLocales, setLocale } = useLocale({    onLocaleChange: (newLocale: LocalesValues) => {      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);    },  });</script><div>  <h1>{$content.title}</h1>  <!-- Перемикач мов рендериться безпосередньо всередині island -->  <div class="locale-switcher">    <span class="switcher-label">Змінити мову:</span>    <div class="locale-buttons">      {#each availableLocales as localeItem}        <button          class="locale-btn {localeItem === $currentLocale ? 'active' : ''}"          disabled={localeItem === $currentLocale}          on:click={() => setLocale(localeItem)}        >          <span class="ls-own-name">{getLocaleName(localeItem)}</span>          <span class="ls-current-name">{getLocaleName(localeItem, $currentLocale)}</span>          <span class="ls-code">{localeItem.toUpperCase()}</span>        </button>      {/each}    </div>  </div></div>

Проп locale передається зі сторінки Astro (визначення на стороні сервера) і використовується для ініціалізації setupIntlayer, встановлюючи початкову мову для всіх сторів у компоненті.

Крок 7: Додавання перемикача мов

Функціональність перемикання мов інтегрована безпосередньо в Svelte island (див. крок 6 вище). Він використовує стор useLocale з svelte-intlayer і переходить за локалізованою URL-адресою, коли користувач обирає нову мову:

<script lang="ts">  import { useLocale } from "svelte-intlayer";  import { getLocalizedUrl, getLocaleName, type LocalesValues } from "intlayer";  // Припустимо таку ж логіку locale/setupIntlayer з кроку 6...  const {    locale: currentLocale,    availableLocales,    setLocale,  } = useLocale({    onLocaleChange: (newLocale: LocalesValues) => {      // Перейти за локалізованою URL-адресою при зміні мови      window.location.href = getLocalizedUrl(window.location.pathname, newLocale);    },  });</script><div class="locale-switcher">  <span class="switcher-label">Змінити мову:</span>  <div class="locale-buttons">    {#each availableLocales as localeItem}      <button        class="locale-btn {localeItem === $currentLocale ? 'active' : ''}"        disabled={localeItem === $currentLocale}        on:click={() => setLocale(localeItem)}      >        <span class="ls-own-name">{getLocaleName(localeItem)}</span>        <span class="ls-current-name">{getLocaleName(localeItem, $currentLocale)}</span>        <span class="ls-code">{localeItem.toUpperCase()}</span>      </button>    {/each}  </div></div>

Примітка щодо стійкості: Використання onLocaleChange для перенаправлення через window.location.href гарантує відвідування нової URL-адреси з мовним префіксом. Це дозволяє middleware Intlayer встановити cookie мови та запам'ятати вибір користувача для майбутніх візитів.

Крок 8: Sitemap та Robots.txt

Intlayer пропонує інструменти для динамічного створення локалізованої карти сайту та файлу robots.txt.

Sitemap

Intlayer comes with a built-in sitemap generator to help you create a sitemap for your application easily. It handles localized routes and adds the necessary metadata for search engines.

The Intlayer generated sitemap supports the xhtml:link namespace (Hreflang XML Extensions). Unlike the default sitemap generators that only list raw URLs, Intlayer automatically creates the required bidirectional links between all language versions of a page (e.g., /about, /about?lang=fr, and /about?lang=es). This ensures search engines correctly index and serve the right language version to the right audience.

Створіть src/pages/sitemap.xml.ts для генерації карти сайту, що охоплює всі ваші локалізовані маршрути.

import type { APIRoute } from "astro";import { generateSitemap, type SitemapUrlEntry } from "intlayer";const pathList: SitemapUrlEntry[] = [  { path: "/", changefreq: "daily", priority: 1.0 },  { path: "/about", changefreq: "monthly", priority: 0.7 },];const SITE_URL = import.meta.env.SITE ?? "http://localhost:4321";export const GET: APIRoute = async ({ site }) => {  const xmlOutput = generateSitemap(pathList, { siteUrl: SITE_URL });  return new Response(xmlOutput, {    headers: { "Content-Type": "application/xml" },  });};

Robots.txt

Створіть src/pages/robots.txt.ts для керування скануванням пошуковими системами.

import type { APIRoute } from "astro";import { getMultilingualUrls } from "intlayer";const getAllMultilingualUrls = (urls: string[]) =>  urls.flatMap((url) => Object.values(getMultilingualUrls(url)) as string[]);const disallowedPaths = getAllMultilingualUrls(["/admin", "/private"]);export const GET: APIRoute = ({ site }) => {  const robotsTxt = [    "User-agent: *",    "Allow: /",    ...disallowedPaths.map((path) => `Disallow: ${path}`),    "",    `Sitemap: ${new URL("/sitemap.xml", site).href}`,  ].join("\n");  return new Response(robotsTxt, {    headers: { "Content-Type": "text/plain" },  });};

Конфігурація 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

import { defineConfig } from "vite";import { intlayer, intlayerCompiler } from "vite-intlayer";export default defineConfig({ plugins: [   intlayer(),   intlayerCompiler(), // Додає плагін компілятора ],});

npm run build # Або npm run dev

Поглиблюйте свої знання

Якщо ви хочете дізнатися більше, ви також можете впровадити Візуальний редактор або використовувати CMS, щоб винести ваш вміст назовні.