استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
بدءاً من الدمج مع خادم MCP Intlayer ، يمكن لمساعدك الذكي الاسترجاع من جميع المستندات مباشرة من ChatGPT ، DeepSeek ، Cursor ، VSCode ، إلخ.
عرض الوثائق الخاصة بالخادم MCPتمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
البدء في التدويل (i18n) باستخدام Intlayer و Vite و Solid
هذه الحزمة قيد التطوير. راجع المشكلة لمزيد من المعلومات. أظهر اهتمامك بـ Intlayer لـ Solid من خلال الإعجاب بالمشكلة
ما هو Intlayer؟
Intlayer هي مكتبة تدويل (i18n) مبتكرة ومفتوحة المصدر مصممة لتبسيط دعم اللغات المتعددة في تطبيقات الويب الحديثة.
مع Intlayer، يمكنك:
- إدارة الترجمات بسهولة باستخدام قواميس إعلانية على مستوى المكون.
- توطين البيانات الوصفية والمسارات والمحتوى بشكل ديناميكي.
- ضمان دعم TypeScript بأنواع مولدة تلقائيًا، مما يحسن الإكمال التلقائي واكتشاف الأخطاء.
- الاستفادة من الميزات المتقدمة، مثل الكشف الديناميكي عن اللغة وتبديلها.
دليل خطوة بخطوة لإعداد Intlayer في تطبيق Vite و Solid
الخطوة 1: تثبيت التبعيات
قم بتثبيت الحزم اللازمة باستخدام npm:
نسخ الكود إلى الحافظة
npm install intlayer solid-intlayernpm install vite-intlayer --save-dev
- intlayer
الحزمة الأساسية التي توفر أدوات التدويل لإدارة التكوين، والترجمة، وإعلان المحتوى، والترجمة البرمجية، وأوامر CLI.
solid-intlayer الحزمة التي تدمج Intlayer مع تطبيق Solid. توفر مزودي السياق وخطافات للتدويل في Solid.
vite-intlayer تتضمن إضافة Vite لدمج Intlayer مع مجمّع Vite، بالإضافة إلى وسيط للكشف عن اللغة المفضلة للمستخدم، وإدارة ملفات تعريف الارتباط، والتعامل مع إعادة توجيه عناوين URL.
الخطوة 2: تكوين مشروعك
قم بإنشاء ملف تكوين لتكوين لغات تطبيقك:
نسخ الكود إلى الحافظة
import { Locales, type IntlayerConfig } from "intlayer";const config: IntlayerConfig = { internationalization: { locales: [ Locales.ENGLISH, Locales.FRENCH, Locales.SPANISH, // لغاتك الأخرى ], defaultLocale: Locales.ENGLISH, },};export default config;
من خلال ملف التكوين هذا، يمكنك إعداد عناوين URL محلية، إعادة توجيه الوسيط، أسماء ملفات تعريف الارتباط، موقع وامتداد إعلانات المحتوى الخاصة بك، تعطيل سجلات Intlayer في وحدة التحكم، والمزيد. للحصول على قائمة كاملة بالمعلمات المتاحة، راجع توثيق التكوين.
الخطوة 3: دمج Intlayer في تكوين Vite الخاص بك
أضف مكون intlayer الإضافي إلى تكوينك.
نسخ الكود إلى الحافظة
import { defineConfig } from "vite";import react from "@vitejs/plugin-react-swc";import { intlayerPlugin } from "vite-intlayer";// https://vitejs.dev/config/export default defineConfig({ plugins: [react(), intlayerPlugin()],});
يتم استخدام مكون Vite الإضافي intlayerPlugin() لدمج Intlayer مع Vite. يضمن بناء ملفات إعلان المحتوى ويراقبها في وضع التطوير. كما يعرّف متغيرات بيئة Intlayer داخل تطبيق Vite. بالإضافة إلى ذلك، يوفر أسماء مستعارة لتحسين الأداء.
الخطوة 4: إعلان المحتوى الخاص بك
قم بإنشاء وإدارة إعلانات المحتوى الخاصة بك لتخزين الترجمات:
نسخ الكود إلى الحافظة
import { t, type Dictionary } from "intlayer";const appContent = { key: "app", content: {},} satisfies Dictionary;export default appContent;
يمكن تعريف إعلانات المحتوى الخاصة بك في أي مكان في تطبيقك بمجرد تضمينها في دليل contentDir (افتراضيًا، ./src). ويجب أن تتطابق مع امتداد ملف إعلان المحتوى (افتراضيًا، .content.{json,ts,tsx,js,jsx,mjs,mjx,cjs,cjx}).
لمزيد من التفاصيل، راجع توثيق إعلان المحتوى.
الخطوة 5: استخدام Intlayer في الكود الخاص بك
[للاستكمال]
(اختياري) الخطوة 6: تغيير لغة المحتوى الخاص بك
[للاستكمال]
(اختياري) الخطوة 7: إضافة التوجيه المحلي إلى تطبيقك
[للاستكمال]
(اختياري) الخطوة 8: تغيير عنوان URL عند تغيير اللغة
[للاستكمال]
(اختياري) الخطوة 9: تبديل لغة HTML وسمات الاتجاه
[للاستكمال]
(اختياري) الخطوة 10: إنشاء مكون رابط محلي
[للاستكمال]
تكوين Git
يوصى بتجاهل الملفات التي يتم إنشاؤها بواسطة Intlayer. هذا يسمح لك بتجنب الالتزام بها في مستودع Git الخاص بك.
للقيام بذلك، يمكنك إضافة التعليمات التالية إلى ملف .gitignore الخاص بك:
نسخ الكود إلى الحافظة
# تجاهل الملفات التي تم إنشاؤها بواسطة Intlayer.intlayer
امتداد VS Code
لتحسين تجربة التطوير الخاصة بك مع Intlayer، يمكنك تثبيت امتداد Intlayer الرسمي لـ VS Code.
يوفر هذا الامتداد:
- الإكمال التلقائي لمفاتيح الترجمة.
- الكشف الفوري عن الأخطاء للترجمات المفقودة.
- معاينات داخلية للمحتوى المترجم.
- إجراءات سريعة لإنشاء الترجمات وتحديثها بسهولة.
لمزيد من التفاصيل حول كيفية استخدام الامتداد، راجع توثيق امتداد Intlayer لـ VS Code.
التقدم أكثر
للتقدم أكثر، يمكنك تنفيذ المحرر المرئي أو إخراج محتواك باستخدام نظام إدارة المحتوى (CMS).
تاريخ الوثيقة
- 5.5.10 - 2025-06-29: بداية التاريخ