الرئيسيةبيئة اختبارمعرض الأعمالتطبيقوثيقةمدونة
    • Englishالإنجليزية
      EN
    • русскийالروسية
      RU
    • 日本語اليابانية
      JA
    • françaisالفرنسية
      FR
    • 한국어الكورية
      KO
    • 中文الصينية
      ZH
    • españolالإسبانية
      ES
    • Deutschالألمانية
      DE
    • العربيةالعربية
      AR
    • italianoالإيطالية
      IT
    • British Englishالإنجليزية (المملكة المتحدة)
      EN-GB
    • portuguêsالبرتغالية
      PT
    • हिन्दीالهندية
      HI
    • Türkçeالتركية
      TR
    • polskiالبولندية
      PL
    • Indonesiaالإندونيسية
      ID
    • Tiếng Việtالفيتنامية
      VI
    • українськаالأوكرانية
      UK
    /
    تصفية المستندات حسب الإطار
    Alt+←
    لماذا Intlayer؟
    ابدأ
    مفهوم
    • كيف يعمل Intlayer
    • التكوين
    • TestFillBuildWatchExtractLoginPushPullConfigurationListVersionEditorLiveDebugDoc ReviewDoc TranslateSDK
    • المحرر المرئي
    • CMS
    • تكامل CI/CD
    • ترجمةجمعتعدادشرطجنسإدراجملفتداخلMarkdownHTMLجلب الوظيفة
    • ملف لكل لغة
    • محرر
    • الملء التلقائي
    • اختبار
    • تحسين الحزمة
    بيئة
    • Next.js 14 وموجه التطبيق
      Next.js 15
      Next.js بدون locale URL
      Next.js وموجه الصفحة
      المترجم
    • Tanstack Start Solid
    • Astro و React
      Astro و Svelte
      Astro و Vue
      Astro و Solid
      Astro و Preact
      Astro و Lit
      Astro و Vanilla JS
    • React Router v7
      React Router v7 (fs-routes)
      Compiler
    • Nuxt و Vue
    • Vite و Solid
    • SvelteKit
    • Vite و Preact
    • Vite و Vanilla JS
    • Vite و Lit
    • Angular 19 (Webpack)
      Analog
    • React CRA
    • React Native و Expo
    • Express.js
      NestJS
      Fastify
      Hono
      Adonis
    • Lynx و React
    Plugins
    • JSON
    • gettext (.po)
    امتداد VS Code
    وكيل
    • خادم MCP
    • مهارات الوكيل
    إصدارات
    • v8
    • v7
    • v6
    مؤشر أداء
    • Next.js
    • TanStack
    • Vue
    • Solid
    • Svelte
    مدونة
    طرح سؤال
    1. Documentation
    2. ابدأ
    إنشاء:2025-08-23آخر تحديث:2025-08-23
    استخدم هذه الصفحة والموفر AI الذي تريده
    ChatGPT
    Claude
    DeepSeek
    Google AI mode
    Gemini
    Perplexity
    Mistral
    Grok

    استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده

    تاريخ الإصدارات

    1. "بداية التاريخ"
      v5.5.1029‏/6‏/2025

    تمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.

    اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزية
    تعديل هذه الوثيقة

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

    رابط GitHub للتوثيق
    نسخ

    نسخ الـ Markdown من المستند إلى الحافظة

    توثيق Intlayer

    مرحبًا بك في التوثيق الرسمي لـ Intlayer! هنا، ستجد كل ما تحتاجه لدمج وتكوين وإتقان Intlayer لجميع احتياجات التدويل (i18n) الخاصة بك، سواء كنت تعمل مع Next.js أو React أو Vite أو Express أو بيئة جافاسكريبت أخرى.

    مقدمة

    ما هو Intlayer؟

    Intlayer هي مكتبة تدويل مصممة خصيصًا لمطوري جافاسكريبت. تتيح لك الإعلان عن المحتوى الخاص بك في أي مكان داخل الكود الخاص بك. تقوم بتحويل إعلان المحتوى متعدد اللغات إلى قواميس منظمة لتسهيل دمجها في كودك. باستخدام TypeScript، تجعل Intlayer تطويرك أقوى وأكثر كفاءة.

    كما توفر Intlayer محررًا بصريًا اختياريًا يتيح لك تحرير وإدارة المحتوى الخاص بك بسهولة. هذا المحرر مفيد بشكل خاص للمطورين الذين يفضلون واجهة بصرية لإدارة المحتوى، أو للفرق التي تقوم بإنشاء المحتوى دون الحاجة للقلق بشأن الكود.

    مثال على الاستخدام

    bash
    نسخ الكود

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

    .└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx
    src/components/MyComponent/index.content.ts
    نسخ الكود

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

    import { t, type Dictionary } from "intlayer";
    
    const componentContent = {
      key: "component-key",
      content: {
        myTranslatedContent: t({
          en: "Hello World",
          es: "Hola Mundo",
          fr: "Bonjour le monde",
        }),
      },
    } satisfies Dictionary;
    
    export default componentContent;
    src/components/MyComponent/index.tsx
    نسخ الكود

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

    import type { FC } from "react";
    import { useIntlayer } from "react-intlayer";
    
    export const MyComponent: FC = () => {
      const { myTranslatedContent } = useIntlayer("component-key");
    
      return <span>{myTranslatedContent}</span>;
    };

    الميزات الرئيسية

    يقدم Intlayer مجموعة متنوعة من الميزات المصممة لتلبية احتياجات تطوير الويب الحديث. فيما يلي الميزات الرئيسية، مع روابط إلى الوثائق التفصيلية لكل منها:

    • دعم التدويل: عزز الوصول العالمي لتطبيقك من خلال دعم مدمج للتدويل.
    • المحرر المرئي: حسّن سير عمل التطوير الخاص بك باستخدام إضافات المحرر المصممة لـ Intlayer. اطلع على دليل المحرر المرئي.
    • مرونة التكوين: قم بتخصيص إعداداتك باستخدام خيارات تكوين واسعة مفصلة في دليل التكوين.
    • أدوات CLI المتقدمة: قم بإدارة مشاريعك بكفاءة باستخدام واجهة سطر الأوامر الخاصة بـ Intlayer. استكشف الإمكانيات في توثيق أدوات CLI.

    المفاهيم الأساسية

    القاموس

    نظم محتواك متعدد اللغات بالقرب من الكود الخاص بك للحفاظ على كل شيء متسقًا وقابلًا للصيانة.

    • البدء
      تعلّم أساسيات إعلان المحتوى الخاص بك في Intlayer.

    • الترجمة
      افهم كيف يتم إنشاء الترجمات وتخزينها واستخدامها في تطبيقك.

    • التعداد
      قم بإدارة مجموعات البيانات المتكررة أو الثابتة بسهولة عبر لغات متعددة.

    • الشرط
      تعلّم كيفية استخدام المنطق الشرطي في Intlayer لإنشاء محتوى ديناميكي.

    • الإدراج
      اكتشف كيفية إدراج القيم في سلسلة نصية باستخدام عناصر نائبة للإدراج.

    • جلب الدوال
      تعرف على كيفية جلب المحتوى ديناميكيًا باستخدام منطق مخصص ليتناسب مع سير عمل مشروعك.

    • ماركداون
      تعلّم كيفية استخدام ماركداون في Intlayer لإنشاء محتوى غني.

    • تضمين الملفات
      اكتشف كيفية تضمين ملفات خارجية في Intlayer لاستخدامها في محرر المحتوى.

    • التداخل
      فهم كيفية تداخل المحتوى في Intlayer لإنشاء هياكل معقدة.

    البيئات والتكاملات

    لقد قمنا ببناء Intlayer مع وضع المرونة في الاعتبار، مقدمين تكاملًا سلسًا عبر الأُطُر وأدوات البناء الشائعة:

    • Intlayer مع Next.js 15
    • Intlayer مع Next.js 14 (موجه التطبيق)
    • Intlayer مع Next.js موجه الصفحات
    • Intlayer مع React CRA
    • Intlayer مع Vite + React
    • Intlayer مع React Native و Expo
    • Intlayer مع Lynx و React
    • Intlayer مع Express

    تتضمن كل دليل تكامل أفضل الممارسات لاستخدام ميزات Intlayer، مثل التصيير على جانب الخادم، التوجيه الديناميكي، أو التصيير على جانب العميل، حتى تتمكن من الحفاظ على تطبيق سريع، صديق لمحركات البحث، وقابل للتوسع بشكل كبير.

    المساهمة والتعليقات

    نحن نقدر قوة البرمجيات مفتوحة المصدر والتطوير المدفوع من قبل المجتمع. إذا كنت ترغب في اقتراح تحسينات، إضافة دليل جديد، أو تصحيح أي مشاكل في وثائقنا، فلا تتردد في تقديم طلب سحب (Pull Request) أو فتح مشكلة في مستودع GitHub الخاص بنا.

    هل أنت مستعد لترجمة تطبيقك بشكل أسرع وأكثر كفاءة؟ اغمر نفسك في وثائقنا لبدء استخدام Intlayer اليوم. اختبر نهجًا قويًا ومنظمًا للتدويل يحافظ على تنظيم محتواك ويجعل فريقك أكثر إنتاجية.


    لماذا Intlayer؟
    كيف يعمل Intlayer
    Alt+→

    في هذه الصفحة

      المناقشات مجهولة الهوية ويتم مراجعتها بانتظام لمعالجة المشكلات الشائعة. لا تتردد في مشاركة أفكار الميزات أو التعليقات على الوثائق أو أي شيء يتعلق بـ Intlayer, نستخدم هذه المدخلات لتشكيل خارطة الطريق وتحسين المنتج.

      .└── Components    └── MyComponent        ├── index.content.ts        └── index.tsx