استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
بدءاً من الدمج مع خادم MCP Intlayer ، يمكن لمساعدك الذكي الاسترجاع من جميع المستندات مباشرة من ChatGPT ، DeepSeek ، Cursor ، VSCode ، إلخ.
عرض الوثائق الخاصة بالخادم MCPتمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
الترجمة
تعريف الترجمات
تسمح لك دالة t في intlayer بإعلان المحتوى بعدة لغات. تضمن هذه الدالة سلامة النوع، حيث ترفع خطأً إذا كانت هناك ترجمات مفقودة، وهو أمر مفيد بشكل خاص في بيئات TypeScript.
إليك مثالًا على كيفية إعلان المحتوى مع الترجمات.
نسخ الكود إلى الحافظة
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. يتيح لك هذا التكوين تحديد اللغات التي يدعمها تطبيقك:
نسخ الكود إلى الحافظة
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH], },};export default config;
استخدام الترجمات في مكونات React
مع react-intlayer، يمكنك استخدام الترجمات في مكونات React. إليك مثالاً:
نسخ الكود إلى الحافظة
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 كائنات المحتوى المخصصة للترجمة، مما يتيح لك تعريف هياكل أكثر تعقيدًا مع ضمان سلامة الأنواع. إليك مثالًا مع كائن مخصص:
نسخ الكود إلى الحافظة
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;
تاريخ الوثيقة
- 5.5.10 - 2025-06-29: بداية السجل