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

مقدمة

ما هو Intlayer؟

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

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

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

bash

نسخ الكود

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

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

.└── 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",
      ar: "مرحبا بالعالم",
    }),
  },
} 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 على البدائل؟

مقارنةً بالحلول الرئيسية مثل next-intl أو i18next، يُعد Intlayer حلاً يأتي مع تحسينات مدمجة مثل:

بدلاً من تحميل ملفات JSON ضخمة في صفحاتك، قم بتحميل المحتوى الضروري فقط. تساعد Intlayer في تقليل حجم الحزمة وصفحاتك بنسبة تصل إلى 50%.

تحديد نطاق محتوى تطبيقك بالقرب من المكونات يسهل الصيانة للتطبيقات واسعة النطاق. يمكنك تكرار أو حذف مجلد ميزة واحدة دون العبء العقلي المتمثل في مراجعة قاعدة بيانات المحتوى بالكامل. بالإضافة إلى ذلك، تم كتابة Intlayer بالكامل باستخدام الأنواع (fully typed) لضمان دقة المحتوى الخاص بك.

يؤدي تحديد الموقع المشترك للمحتوى إلى تقليل السياق المطلوب بواسطة نماذج اللغة الكبيرة (LLMs). تأتي Intlayer أيضًا مع مجموعة من الأدوات، مثل CLI لاختبار الترجمات المفقودة، و LSP، و MCP، و مهارات الوكيل (agent skills)، لجعل تجربة المطور (DX) أكثر سلاسة لوكلاء الذكاء الاصطناعي.

استخدم الأتمتة للترجمة في مسار CI/CD الخاص بك باستخدام LLM من اختيارك على حساب مزود الذكاء الاصطناعي الخاص بك. تقدم Intlayer أيضًا مترجمًا (compiler) لأتمتة استخراج المحتوى، بالإضافة إلى منصة ويب للمساعدة في الترجمة في الخلفية.

يمكن أن يؤدي ربط ملفات JSON الضخمة بالمكونات إلى مشاكل في الأداء والتفاعلية. تقوم Intlayer بتحسين تحميل المحتوى الخاص بك في وقت البناء (build time).

أكثر من مجرد حل i18n، توفر Intlayer محررًا مرئيًا ذاتي الاستضافة و CMS كاملًا لمساعدتك في إدارة المحتوى متعدد اللغات في الوقت الفعلي (real-time)، مما يجعل التعاون مع المترجمين وكتاب النصوص وأعضاء الفريق الآخرين سلسًا. يمكن تخزين المحتوى محليًا و/أو عن بُعد.

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

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

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

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

القاموس (Dictionary)

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

البدء
تعلم أساسيات إعلان المحتوى الخاص بك في Intlayer.
الترجمة (Translation)
افهم كيف يتم إنشاء الترجمات وتخزينها واستخدامها في تطبيقك.
التعداد (Enumeration)
قم بإدارة مجموعات البيانات المتكررة أو الثابتة بسهولة عبر لغات مختلفة.
الشرط (Condition)
تعلم كيفية استخدام المنطق الشرطي في Intlayer لإنشاء محتوى ديناميكي.
الإدراج (Insertion)
اكتشف كيفية إدراج القيم في سلسلة نصية باستخدام العناصر النائبة (placeholders).
جلب الدوال (Function Fetching)
تعرف على كيفية جلب المحتوى ديناميكيًا باستخدام منطق مخصص ليتناسب مع سير عمل مشروعك.
ماركداون (Markdown)
تعلم كيفية استخدام Markdown في Intlayer لإنشاء محتوى غني.
تضمين الملفات (File Embeddings)
اكتشف كيفية تضمين الملفات الخارجية في Intlayer لاستخدامها في محرر المحتوى.
التداخل (Nesting)
افهم كيفية تداخل المحتوى في Intlayer لإنشاء هياكل معقدة.

البيئات والتكاملات (Environments & Integrations)

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

يتضمن كل دليل للتكامل أفضل الممارسات لاستخدام ميزات Intlayer، مثل الرندرة من جانب الخادم (SSR)، أو التوجيه الديناميكي (Dynamic Routing)، أو الرندرة من جانب العميل (Client-Side Rendering)، لتتمكن من الحفاظ على تطبيق سريع وصديق لمحركات البحث (SEO) وقابل للتوسع بدرجة كبيرة.

المساهمة والملاحظات

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

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

لماذا Intlayer؟

كيف يعمل Intlayer