المؤلف:
    Aymeric PINEAU
    إنشاء:2024-08-11آخر تحديث:2026-10-08

    الترجمة

    تعريف الترجمات

    تسمح لك دالة 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

    باستخدام react-intlayer، يمكنك استخدام الترجمات في مكونات React. فيما يلي مثال:

    **/*.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;

    يجلب هذا المكون الترجمة المقابلة بناءً على اللغة الحالية المحددة في تطبيقك.

    باستخدام next-intlayer، يمكنك استخدام الترجمات في مكونات خادم React أو مكونات العميل. فيما يلي مثال في مكون عميل:

    **/*.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;

    باستخدام vue-intlayer، يمكنك استخدام الترجمات في مكونات Vue. فيما يلي مثال:

    **/*.vue
    <script setup lang="ts">
import { useIntlayer } from "vue-intlayer";

const content = useIntlayer("multi_lang");
</script>

<template>
  <div>
    <p>{{ content.welcomeMessage }}</p>
  </div>
</template>

    باستخدام svelte-intlayer، يمكنك استخدام الترجمات في مكونات Svelte. يُرجع الخطاف مخزن Svelte store. فيما يلي مثال:

    **/*.svelte
    <script lang="ts">
import { useIntlayer } from "svelte-intlayer";

const content = useIntlayer("multi_lang");
</script>

<div>
  <p>{$content.welcomeMessage}</p>
</div>

    باستخدام preact-intlayer، يمكنك استخدام الترجمات في مكونات Preact. فيما يلي مثال:

    **/*.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;

    باستخدام solid-intlayer، يمكنك استخدام الترجمات في مكونات SolidJS. فيما يلي مثال:

    **/*.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;

    باستخدام angular-intlayer، يمكنك استخدام الترجمات في مكونات Angular. فيما يلي مثال:

    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");
}

    باستخدام vanilla-intlayer، يمكنك استخدام الترجمات من خلال الاشتراك في تغييرات المحتوى. فيما يلي مثال:

    **/*.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
);
    إعلان المحتوىجمع