تسمح لك دالة t في intlayer بإعلان المحتوى بعدة لغات. تضمن هذه الدالة سلامة النوع، حيث ترفع خطأً إذا كانت هناك ترجمات مفقودة، وهو أمر مفيد بشكل خاص في بيئات TypeScript.

إليك مثالًا على كيفية إعلان المحتوى مع الترجمات.

**/*.content.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { t, type Dictionary } from "intlayer";

interface Content {
  welcomeMessage: string;
}

export default {
  key: "multi_lang",
  content: {
    welcomeMessage: t({
      en: "Welcome to our application",
      fr: "Bienvenue dans notre application",
      es: "Bienvenido a nuestra aplicación",
    }),
  },
} satisfies Dictionary<Content>;

التهيئة للغات

لضمان التعامل الصحيح مع الترجمات، يمكنك تكوين اللغات المقبولة في intlayer.config.ts. يتيح لك هذا التكوين تحديد اللغات التي يدعمها تطبيقك:

intlayer.config.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { Locales, type IntlayerConfig } from "intlayer";

const config: IntlayerConfig = {
  internationalization: {
    locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH],
  },
};

export default config;

استخدام الترجمات في مكونات React

With react-intlayer, you can use translations in React components. Here's an example:

**/*.tsx

نسخ الكود

نسخ الكود إلى الحافظة

import type { FC } from "react";
import { useIntlayer } from "react-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

This component fetches the corresponding translation based on the current locale set in your application.

With next-intlayer, you can use translations in React Server Components or Client Components. Here's an example in a Client Component:

**/*.tsx

نسخ الكود

نسخ الكود إلى الحافظة

"use client";

import type { FC } from "react";
import { useIntlayer } from "next-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With vue-intlayer, you can use translations in Vue components. Here's an example:

**/*.vue

نسخ الكود

نسخ الكود إلى الحافظة

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("multi_lang");</script><template><div>  <p>{{ content.welcomeMessage }}</p></div></template>

<script setup lang="ts">import { useIntlayer } from "vue-intlayer";const content = useIntlayer("multi_lang");</script><template><div>  <p>{{ content.welcomeMessage }}</p></div></template>

With svelte-intlayer, you can use translations in Svelte components. The hook returns a Svelte store. Here's an example:

**/*.svelte

نسخ الكود

نسخ الكود إلى الحافظة

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("multi_lang");</script><div><p>{$content.welcomeMessage}</p></div>

<script lang="ts">import { useIntlayer } from "svelte-intlayer";const content = useIntlayer("multi_lang");</script><div><p>{$content.welcomeMessage}</p></div>

With preact-intlayer, you can use translations in Preact components. Here's an example:

**/*.tsx

نسخ الكود

نسخ الكود إلى الحافظة

import type { FC } from "preact";
import { useIntlayer } from "preact-intlayer";

const MyComponent: FC = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With solid-intlayer, you can use translations in SolidJS components. Here's an example:

**/*.tsx

نسخ الكود

نسخ الكود إلى الحافظة

import type { Component } from "solid-js";
import { useIntlayer } from "solid-intlayer";

const MyComponent: Component = () => {
const content = useIntlayer("multi_lang");

return (
  <div>
    <p>{content.welcomeMessage}</p>
  </div>
);
};

export default MyComponent;

With angular-intlayer, you can use translations in Angular components. Here's an example:

app.component.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my-component",template: `  <div>    <p>{{ content().welcomeMessage }}</p>  </div>`,})export class MyComponent {content = useIntlayer("multi_lang");}

import { Component } from "@angular/core";import { useIntlayer } from "angular-intlayer";@Component({selector: "app-my-component",template: `  <div>    <p>{{ content().welcomeMessage }}</p>  </div>`,})export class MyComponent {content = useIntlayer("multi_lang");}

With vanilla-intlayer, you can use translations by subscribing to content changes. Here's an example:

**/*.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { installIntlayer, useIntlayer } from "vanilla-intlayer";

installIntlayer();

const content = useIntlayer("multi_lang").onChange((newContent) => {
document.getElementById("welcome-message")!.textContent = String(
  newContent.welcomeMessage
);
});

// Initial render
document.getElementById("welcome-message")!.textContent = String(
content.welcomeMessage
);

كائنات المحتوى المخصصة

يدعم intlayer كائنات المحتوى المخصصة للترجمة، مما يتيح لك تعريف هياكل أكثر تعقيدًا مع ضمان سلامة الأنواع. إليك مثالًا مع كائن مخصص:

**/*.content.ts

نسخ الكود

نسخ الكود إلى الحافظة

import { t, type Dictionary } from "intlayer";

interface ICustomContent {
  title: string;
  content: string;
}

const customContent = {
  key: "custom_content",
  content: {
    profileText: t<ICustomContent>({
      en: {
        title: "Page Title",
        content: "Page Content",
      },
      fr: {
        title: "Titre de la Page",
        content: "Contenu de la Page",
      },
      es: {
        title: "عنوان الصفحة",
        content: "محتوى الصفحة",
      },
    }),
  },
} satisfies Dictionary;

export default customContent;

إعلان المحتوى

جمع