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

Цей пакет знаходиться в розробці. Див. issue для отримання додаткової інформації. Підтримайте зацікавленість до Intlayer для Solid, поставивши лайк цьому issue

Що таке Intlayer?

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

За допомогою Intlayer ви можете:

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

Покроковий посібник з налаштування Intlayer у додатку на Vite і Solid

Зміст

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

Встановіть необхідні пакети, використовуючи npm:

npm install intlayer solid-intlayernpm install vite-intlayer --save-devnpx intlayer init

• intlayer

  Основний пакет, який надає інструменти інтернаціоналізації для управління конфігурацією, перекладів, оголошення контенту, транспіляції та CLI-команд.

• solid-intlayer Пакет, що інтегрує Intlayer з додатком на Solid. Надає провайдери контексту та хуки для інтернаціоналізації в Solid.

• vite-intlayer Містить плагін для Vite для інтеграції Intlayer зі збірником Vite, а також middleware для визначення пріоритетної локалі користувача, керування cookies та обробки перенаправлень 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-адреси, перенаправлення в middleware, імена cookie, розташування та розширення ваших декларацій контенту, вимкнути логи Intlayer у консолі та інше. Для повного списку доступних параметрів зверніться до документації з конфігурації.

Крок 3: Інтеграція Intlayer у вашу конфігурацію Vite

Додайте плагін intlayer у вашу конфігурацію.

import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayer } from "vite-intlayer";// Документація: https://vitejs.dev/config/export default defineConfig({  plugins: [react(), intlayer()],});

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

Крок 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}).

Для детальнішої інформації зверніться до документації щодо декларації контенту.

Step 5: Utilize Intlayer in Your Code

[доопрацювати]

(Необов'язково) Step 6: Change the language of your content

[доопрацювати]

(Необов'язково) Step 7: Add localized Routing to your application

[доопрацювати]

(Необов'язково) Step 8: Change the URL when the locale changes

[доопрацювати]

(Необов'язково) Step 9: Switch the HTML Language and Direction Attributes

[доопрацювати]

[до завершення]

(Необов'язково) Крок 10: Створення локалізованого компонента посилання

[до завершення]

Конфігурація Git

Рекомендується ігнорувати файли, згенеровані Intlayer. Це дозволить уникнути їх додавання до вашого Git-репозиторію.

Для цього можна додати такі інструкції до файлу .gitignore:

# Ігнорувати файли, згенеровані Intlayer.intlayer

Розширення VS Code

Щоб покращити досвід розробки з Intlayer, ви можете встановити офіційне розширення Intlayer VS Code Extension.

Встановити з VS Code Marketplace

Це розширення надає:

• Автодоповнення для ключів перекладу.
• Виявлення помилок у реальному часі для відсутніх перекладів.
• Вбудовані попередні перегляди перекладеного вмісту.
• Швидкі дії для простого створення та оновлення перекладів.

Для детальнішої інформації про те, як користуватися розширенням, зверніться до документації Intlayer VS Code Extension.

Розширені можливості

Щоб піти далі, ви можете реалізувати visual editor або винести свій вміст, використовуючи CMS.