src/app.tsx і збережіть, щоб перевірити HMR
),
en: (
<>
Edit src/app.tsx and save to test HMR
),
fr: (
<>
Éditez src/app.tsx et enregistrez pour tester HMR
),
es: (
<>
Edita src/app.tsx y guarda para probar HMR
),
}),
readTheDocs: t({
uk: "Натисніть на логотипи Vite і Preact, щоб дізнатися більше",
en: "Click on the Vite and Preact logos to learn more",
fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
uk: "Клацніть на логотипи Vite та Preact, щоб дізнатися більше",
es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
}),
},
} satisfies Dictionary;
export default appContent;
```
```javascript fileName="src/app.content.mjs" contentDeclarationFormat="esm"
import { t } from "intlayer";
// import { h } from 'preact'; // Потрібно, якщо ви використовуєте JSX безпосередньо в .mjs
/** @type {import('intlayer').Dictionary} */
const appContent = {
key: "app",
content: {
viteLogo: t({
uk: "Логотип Vite",
en: "Vite logo",
fr: "Logo Vite",
es: "Logo Vite",
}),
preactLogo: t({
uk: "Логотип Preact",
en: "Preact logo",
fr: "Logo Preact",
es: "Logo Preact",
}),
title: "Vite + Preact",
count: t({
uk: "лічильник ",
en: "count is ",
fr: "le compte est ",
es: "el recuento es ",
}),
edit: t({
uk: (
<>
Редагуйте src/app.mjs і збережіть, щоб перевірити HMR
),
edit: t({
uk: "Редагуйте src/app.jsx і збережіть, щоб протестувати HMR",
en: "Edit src/app.jsx and save to test HMR",
fr: "Éditez src/app.jsx et enregistrez pour tester HMR",
es: "Edita src/app.jsx y guarda para probar HMR",
}),
readTheDocs: t({
uk: "Натисніть на логотипи Vite і Preact, щоб дізнатися більше",
en: "Click on the Vite and Preact logos to learn more",
fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
}),
},
};
export default appContent;
```
```javascript fileName="src/app.content.cjs" contentDeclarationFormat="commonjs"
const { t } = require("intlayer");
// const { h } = require('preact'); // Потрібно, якщо ви використовуєте JSX безпосередньо в .cjs
/** @type {import('intlayer').Dictionary} */
const appContent = {
key: "app",
content: {
viteLogo: t({
en: "Vite logo",
uk: "Логотип Vite",
fr: "Logo Vite",
es: "Logo Vite",
}),
preactLogo: t({
uk: "Логотип Preact",
en: "Preact logo",
fr: "Logo Preact",
es: "Logo Preact",
}),
title: "Vite + Preact",
count: t({
uk: "Кількість: ",
en: "count is ",
fr: "le compte est ",
es: "el recuento es ",
}),
edit: t({
uk: "Редагуйте src/app.tsx і збережіть, щоб протестувати HMR",
en: "Edit src/app.tsx and save to test HMR",
fr: "Éditez src/app.tsx et enregistrez pour tester HMR",
es: "Edita src/app.tsx y guarda para probar HMR",
}),
readTheDocs: t({
uk: "Натисніть на логотипи Vite і Preact, щоб дізнатися більше",
en: "Click on the Vite and Preact logos to learn more",
fr: "Cliquez sur les logos Vite et Preact pour en savoir plus",
es: "Haga clic en los logotipos de Vite y Preact para obtener más información",
}),
},
};
module.exports = appContent;
```
```json fileName="src/app.content.json" contentDeclarationFormat="json"
{
"$schema": "https://intlayer.org/schema.json",
"key": "app",
"content": {
"viteLogo": {
"nodeType": "translation",
"translation": {
"uk": "Логотип Vite",
"en": "Vite logo",
"fr": "Logo Vite",
"es": "Logo Vite"
}
},
"preactLogo": {
"nodeType": "translation",
"translation": {
"uk": "Логотип Preact",
"en": "Preact logo",
"fr": "Logo Preact",
"es": "Logo Preact"
}
},
"title": {
"nodeType": "translation",
"translation": {
"uk": "Vite + Preact",
"en": "Vite + Preact",
"fr": "Vite + Preact",
"es": "Vite + Preact"
}
},
"count": {
"nodeType": "translation",
"translation": {
"uk": "кількість ",
"en": "count is ",
"uk": "лічильник: ",
"fr": "le compte est ",
"es": "el recuento es "
}
},
"edit": {
"nodeType": "translation",
"translation": {
"uk": "Редагуйте src/app.tsx і збережіть, щоб перевірити HMR",
"en": "Edit src/app.tsx and save to test HMR",
"fr": "Éditez src/app.tsx et enregistrez pour tester HMR",
"es": "Edita src/app.tsx y guarda para probar HMR"
}
},
"readTheDocs": {
"nodeType": "translation",
"translation": {
"uk": "Натисніть на логотипи Vite та Preact, щоб дізнатися більше",
"en": "Click on the Vite and Preact logos to learn more",
"fr": "Cliquez sur les logos Vite et Preact pour en savoir plus",
"es": "Haga clic en los logotipos de Vite y Preact para obtener más información"
}
}
}
}
```
> Ваші декларації контенту можна розміщувати в будь-якій частині вашого застосунку, за умови, що вони включені в директорію `contentDir` (за замовчуванням `./src`). І вони повинні відповідати розширенню файлу декларації контенту (за замовчуванням `.content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}`).
> Для детальнішої інформації див. [документацію з оголошень контенту](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/dictionary/content_file.md).
> Якщо ваш файл контенту містить TSX-код, можливо, потрібно імпортувати `import { h } from "preact";` або переконатися, що JSX pragma правильно налаштований для Preact.
### Крок 5: Використання Intlayer у вашому коді
Отримуйте доступ до ваших словників контенту у всьому застосунку:
```tsx {6,10} fileName="src/app.tsx" codeFormat="typescript"
import { useState } from "preact/hooks";
import type { FunctionalComponent } from "preact";
import preactLogo from "./assets/preact.svg"; // Припускаємо, що у вас є preact.svg
import viteLogo from "/vite.svg";
import "./app.css"; // Припускаємо, що ваш файл CSS називається app.css
import { IntlayerProvider, useIntlayer } from "preact-intlayer";
const AppContent: FunctionalComponent = () => {
const [count, setCount] = useState(0);
const content = useIntlayer("app");
return (
<>
{content.title}
{content.edit}
{content.readTheDocs}
); }; const App: FunctionalComponent = () => ({content.title}
{content.edit}
{content.readTheDocs}
); }; const App = () => ({content.title}
{content.edit}
{content.readTheDocs}
); }; const App = () => (
> ```
> Примітка: у Preact `className` зазвичай пишеться як `class`.
> Щоб дізнатися більше про хук `useIntlayer`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useIntlayer.md) (API схожий для `preact-intlayer`).
### (Необов'язково) Крок 6: Змініть мову вашого контенту
Щоб змінити мову вашого контенту, ви можете використовувати функцію `setLocale`, надану хуком `useLocale`. Ця функція дозволяє встановити локаль застосунку та відповідно оновити контент.
```tsx fileName="src/components/LocaleSwitcher.tsx" codeFormat="typescript"
import type { FunctionalComponent } from "preact";
import { Locales } from "intlayer";
import { useLocale } from "preact-intlayer";
const LocaleSwitcher: FunctionalComponent = () => {
const { setLocale } = useLocale();
return (
);
};
export default LocaleSwitcher;
```
```jsx fileName="src/components/LocaleSwitcher.jsx" codeFormat="esm"
import { Locales } from "intlayer";
import { useLocale } from "preact-intlayer";
const LocaleSwitcher = () => {
const { setLocale } = useLocale();
return (
);
};
export default LocaleSwitcher;
```
```jsx fileName="src/components/LocaleSwitcher.cjsx" codeFormat="commonjs"
const { Locales } = require("intlayer");
const { useLocale } = require("preact-intlayer");
const LocaleSwitcher = () => {
const { setLocale } = useLocale();
return (
);
};
module.exports = LocaleSwitcher;
```
> Щоб дізнатися більше про хук `useLocale`, зверніться до [документації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/packages/react-intlayer/useLocale.md) (API схоже для `preact-intlayer`).
### (Необов'язково) Крок 7: Додайте локалізовану маршрутизацію до вашого застосунку
Мета цього кроку — створити унікальні маршрути для кожної мови. Це корисно для SEO та SEO-дружніх URL-адрес.
Приклад:
```plaintext
- https://example.com/about
- https://example.com/es/about
- https://example.com/fr/about
```
> За замовчуванням маршрути не мають префікса для мови за замовчуванням (`routing.mode: "prefix-no-default"`). Якщо ви хочете додати префікс і для мови за замовчуванням, ви можете встановити опцію `routing.mode` в `"prefix-all"` у вашій конфігурації. Див. [документацію з конфігурації](https://github.com/aymericzip/intlayer/blob/main/docs/docs/uk/configuration.md) для додаткової інформації.
Щоб додати локалізовану маршрутизацію до вашого застосунку, ви можете створити компонент `LocaleRouter`, який обгортає маршрути вашого застосунку та обробляє маршрутизацію на основі локалі. Ось приклад із використанням [preact-iso](https://github.com/preactjs/preact-iso):
Спочатку встановіть `preact-iso`:
```bash packageManager="npm"
npm install preact-iso
npx intlayer init
```
```bash packageManager="pnpm"
pnpm add preact-iso
pnpm intlayer init
```
```bash packageManager="yarn"
yarn add preact-iso
```
```tsx fileName="src/components/LocaleRouter.tsx" codeFormat="typescript"
import { configuration, getPathWithoutLocale, type Locale } from "intlayer";
import type { ComponentChildren, FunctionalComponent } from "preact";
import { useEffect } from "preact/hooks";
import { IntlayerProvider } from "preact-intlayer";
import { LocationProvider, useLocation } from "preact-iso";
const { internationalization, routing } = configuration;
const { locales, defaultLocale } = internationalization;
const Navigate: FunctionalComponent<{ to: string; replace?: boolean }> = ({
to,
replace,
}) => {
const { route } = useLocation();
useEffect(() => {
route(to, replace);
}, [to, replace, route]);
return null;
};
/**
* Компонент, який обробляє локалізацію і обгортає дочірні елементи у відповідний контекст локалі.
* Він керує визначенням локалі на основі URL та її валідацією.
*/
const AppLocalized: FunctionalComponent<{
children: ComponentChildren;
locale?: Locale;
}> = ({ children, locale }) => {
const { path: pathname, url } = useLocation();
if (!url) {
return null;
}
const search = url.substring(pathname.length);
// Визначає поточну локаль — використовується передана locale або локаль за замовчуванням
const currentLocale = locale ?? defaultLocale;
// Видаляє префікс локалі з шляху для побудови базового шляху
const pathWithoutLocale = getPathWithoutLocale(
pathname // Поточний шлях URL
);
/**
* Якщо routing.mode === 'prefix-all', локаль за замовчуванням повинна завжди мати префікс.
*/
if (routing.mode === "prefix-all") {
// Перевірити локаль
if (!locale || !locales.includes(locale)) {
// Перенаправити на локаль за замовчуванням з оновленим шляхом
return (