الترجمة

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

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

استخدام 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",      ar: "مرحبًا بك في تطبيقنا",    }),  },} 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, Locales.ARABIC],  },};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;

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

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

يدعم 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: "Título de la Página",        content: "Contenido de la Página",      },      ar: {        title: "عنوان الصفحة",        content: "محتوى الصفحة",      },    }),  },} satisfies Dictionary;export default customContent;

إذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.

رابط GitHub للتوثيق

قاموس تعداد