intlayer: حزمة NPM لإدارة إعلان المحتوى متعدد اللغات (i18n)

Intlayer هي مجموعة من الحزم مصممة خصيصاً لمطوري JavaScript. وهي متوافقة مع أطر العمل مثل React و Next.js و Express.js.

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

لماذا يجب دمج Intlayer؟

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

التثبيت

قم بتثبيت الحزمة اللازمة باستخدام مدير الحزم المفضل لديك:

npm install intlayer

تكوين Intlayer

توفر Intlayer ملف إعداد لضبط مشروعك. ضع هذا الملف في جذر مشروعك.

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  internationalization: {    locales: [Locales.ARABIC, Locales.FRENCH, Locales.SPANISH],    defaultLocale: Locales.ARABIC,  },};export default config;

للحصول على قائمة كاملة بالمعلمات المتاحة، يرجى الرجوع إلى وثائق التكوين.

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

مع Intlayer، يمكنك إعلان محتواك بطريقة منظمة في أي مكان ضمن قاعدة الكود الخاصة بك.

بشكل افتراضي، يقوم Intlayer بمسح الملفات ذات الامتداد .content.{ts,tsx,js,jsx,mjs,cjs}.

يمكنك تعديل الامتداد الافتراضي من خلال ضبط خاصية contentDir في ملف التكوين.

.├── intlayer.config.ts└── src    ├── ClientComponent    │   ├── index.content.ts    │   └── index.tsx    └── ServerComponent        ├── index.content.ts        └── index.tsx

إعلان المحتوى الخاص بك

إليك مثال على إعلان المحتوى:

import { type DeclarationContent, t } from "intlayer";const clientComponentContent = {  key: "client-component",  content: {    myTranslatedContent: t({      ar: "مرحبا بالعالم",      fr: "Bonjour le monde",      es: "Hola Mundo",    }),    numberOfCar: enu({      "<-1": "أقل من سيارة واحدة",      "-1": "سيارة واحدة",      "0": "لا توجد سيارات",      "1": "سيارة واحدة",      ">5": "بعض السيارات",      ">19": "الكثير من السيارات",    }),  },} satisfies DeclarationContent;export default clientComponentContent;

بناء قواميسك

يمكنك بناء قواميسك باستخدام intlayer-cli.

npx intlayer build

يسجل هذا الأمر كافة الملفات *.content.*، ويجمعها، ويكتب النتائج في الدليل المحدد في intlayer.config.ts (بشكل افتراضي، ./.intlayer).

قد يبدو الإخراج النموذجي كما يلي:

.├── .intlayer│   ├── dictionary  # يحتوي على قاموس المحتوى الخاص بك│   │   ├── client-component.json│   │   └── server-component.json│   ├── main  # يحتوي على نقطة الدخول لقاموسك لاستخدامه في تطبيقك│   │   ├── dictionary.cjs│   │   └── dictionary.mjs│   └── types  # يحتوي على تعريفات النوع التلقائية لقاموسك│       ├── client-component.d.ts│       └── server-component.d.ts└── types    └── intlayer.d.ts  # يحتوي على تعريفات النوع التلقائية لـ Intlayer

بناء موارد i18next

يمكن تكوين Intlayer لبناء القواميس لـ i18next. لذلك، تحتاج إلى إضافة التكوين التالي إلى ملف intlayer.config.ts الخاص بك:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // يُخبر Intlayer بإنشاء ملفات الرسائل لـ i18next    dictionaryOutput: ["i18next"],    // الدليل الذي ستكتب فيه Intlayer ملفات JSON الرسائل الخاصة بك    i18nextResourcesDir: "./i18next/resources",  },};

للحصول على قائمة كاملة بالمعلمات المتاحة، يرجى الرجوع إلى وثائق التكوين.

الإخراج:

.└── i18next    └── resources        ├── ar        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

على سبيل المثال، قد يبدو ar/client-component.json كما يلي:

{  "myTranslatedContent": "مرحبا بالعالم",  "zero_numberOfCar": "لا توجد سيارات",  "one_numberOfCar": "سيارة واحدة",  "two_numberOfCar": "سيارتان",  "other_numberOfCar": "بعض السيارات"}

بناء قواميس i18next أو next-intl

يمكن تكوين Intlayer لبناء القواميس لـ i18next أو next-intl. لذلك تحتاج إلى إضافة التكوين التالي إلى ملف intlayer.config.ts الخاص بك:

import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  /* ... */  content: {    // يُخبر Intlayer بإنشاء ملفات الرسائل لـ i18next    dictionaryOutput: ["next-intl"],    // الدليل الذي ستكتب فيه Intlayer ملفات JSON الرسائل الخاصة بك    nextIntlMessagesDir: "./i18next/messages",  },};

للحصول على قائمة كاملة بالمعلمات المتاحة، يرجى الرجوع إلى وثائق التكوين.

الإخراج:

.└── intl    └── messages        ├── ar        │   ├── client-component.json        │   └── server-component.json        ├── es        │   ├── client-component.json        │   └── server-component.json        └── fr            ├── client-component.json            └── server-component.json

على سبيل المثال، قد يبدو ar/client-component.json كما يلي:

{  "myTranslatedContent": "مرحبا بالعالم",  "zero_numberOfCar": "لا توجد سيارات",  "one_numberOfCar": "سيارة واحدة",  "two_numberOfCar": "سيارتان",  "other_numberOfCar": "بعض السيارات"}

أدوات CLI

توفر Intlayer أداة CLI لـ:

• تدقيق إعلانات المحتوى الخاص بك وإكمال الترجمات المفقودة
• بناء القواميس من إعلانات المحتوى الخاصة بك
• دفع وسحب القواميس البعيدة من CMS الخاص بك إلى مشروع اللغة الخاصة بك

استشر intlayer-cli لمزيد من المعلومات.

استخدام Intlayer في تطبيقك

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

Intlayer متاحة كحزمة لتطبيقك.

تطبيق React

لاستخدام Intlayer في تطبيق React الخاص بك، يمكنك استخدام react-intlayer.

تطبيق Next.js

لاستخدام Intlayer في تطبيق Next.js الخاص بك، يمكنك استخدام next-intlayer.

تطبيق Express

لاستخدام Intlayer في تطبيق Express الخاص بك، يمكنك استخدام express-intlayer.

الوظائف المقدمة من حزمة intlayer

تقدم حزمة intlayer أيضاً بعض الوظائف لمساعدتك في دولنة تطبيقك.

• getConfiguration()
• getTranslationContent()
• getEnumerationContent()
• getLocaleName()
• getLocaleLang()
• getHTMLTextDir()
• getPathWithoutLocale()
• getMultilingualUrls()
• getLocalizedUrl()
• getPathWithoutLocale()