استخدم مساعدك المفضل للملخص واستخدم هذه الصفحة والموفر AI الذي تريده
بدءاً من الدمج مع خادم MCP Intlayer ، يمكن لمساعدك الذكي الاسترجاع من جميع المستندات مباشرة من ChatGPT ، DeepSeek ، Cursor ، VSCode ، إلخ.
عرض الوثائق الخاصة بالخادم MCPتمت ترجمة محتوى هذه الصفحة باستخدام الذكاء الاصطناعي.
اعرض آخر نسخة المحتوى الأصلي باللغة الإنكليزيةإذا كان لديك فكرة لتحسين هذه الوثيقة، فلا تتردد في المساهمة من خلال تقديم طلب سحب على GitHub.
رابط GitHub للتوثيقنسخ الـ Markdown من المستند إلى الحافظة
وثائق محرر Intlayer البصري
محرر Intlayer البصري هو أداة تقوم بتغليف موقعك الإلكتروني للتفاعل مع ملفات إعلان المحتوى الخاصة بك باستخدام محرر بصري.
حزمة intlayer-editor مبنية على Intlayer ومتاحة لتطبيقات JavaScript، مثل React (Create React App)، Vite + React، و Next.js.
المحرر البصري مقابل CMS
محرر Intlayer البصري هو أداة تتيح لك إدارة المحتوى الخاص بك في محرر بصري للقواميس المحلية. بمجرد إجراء تغيير، سيتم استبدال المحتوى في قاعدة الكود. هذا يعني أن التطبيق سيتم إعادة بنائه وستتم إعادة تحميل الصفحة لعرض المحتوى الجديد.
على النقيض من ذلك، فإن Intlayer CMS هو أداة تتيح لك إدارة المحتوى الخاص بك في محرر بصري للقواميس البعيدة. بمجرد إجراء تغيير، لن يؤثر المحتوى على قاعدة الكود الخاصة بك. وسيعرض الموقع تلقائيًا المحتوى الذي تم تغييره.
دمج Intlayer في تطبيقك
لمزيد من التفاصيل حول كيفية دمج Intlayer، راجع القسم المناسب أدناه:
الدمج مع Next.js
لدمج مع Next.js، راجع دليل الإعداد.
الدمج مع Create React App
لدمج مع Create React App، راجع دليل الإعداد.
الدمج مع Vite + React
لدمج مع Vite + React، راجع دليل الإعداد.
كيفية عمل محرر Intlayer
المحرر البصري في تطبيق يتضمن شيئين:
تطبيق واجهة أمامية يعرض موقعك داخل iframe. إذا كان موقعك يستخدم Intlayer، سيكتشف المحرر البصري محتواك تلقائيًا، وسيسمح لك بالتفاعل معه. بمجرد إجراء تعديل، ستتمكن من تنزيل تغييراتك.
بمجرد النقر على زر التنزيل، سيرسل المحرر البصري طلبًا إلى الخادم لاستبدال ملفات إعلان المحتوى الخاصة بك بالمحتوى الجديد (أينما تم إعلان هذه الملفات في مشروعك).
لاحظ أنه في الوقت الحالي، سيكتب محرر Intlayer ملفات إعلان المحتوى الخاصة بك كملفات JSON.
التثبيت
بمجرد تكوين Intlayer في مشروعك، قم ببساطة بتثبيت intlayer-editor كاعتماد تطوير:
نسخ الكود إلى الحافظة
npm install intlayer-editor --save-dev
التكوين
في ملف تكوين Intlayer الخاص بك، يمكنك تخصيص إعدادات المحرر:
نسخ الكود إلى الحافظة
import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = { // ... إعدادات التكوين الأخرى editor: { /** * مطلوب * عنوان URL للتطبيق. * هذا هو عنوان URL المستهدف من قبل المحرر البصري. * مثال: 'http://localhost:3000' */ applicationURL: process.env.INTLAYER_APPLICATION_URL, /** * اختياري * الافتراضي هو `true`. إذا كان `false`، فإن المحرر غير نشط ولا يمكن الوصول إليه. * يمكن استخدامه لتعطيل المحرر لبيئات محددة لأسباب أمنية، مثل الإنتاج. */ enabled: process.env.INTLAYER_ENABLED, /** * اختياري * الافتراضي هو `8000`. * منفذ خادم المحرر. */ port: process.env.INTLAYER_PORT, /** * اختياري * الافتراضي هو "http://localhost:8000" * عنوان URL لخادم المحرر. */ editorURL: process.env.INTLAYER_EDITOR_URL, },};export default config;
لمشاهدة جميع المعلمات المتاحة، راجع وثائق التكوين.
استخدام المحرر
عند تثبيت المحرر، يمكنك بدء تشغيل المحرر باستخدام الأمر التالي:
bashنسخ الكودنسخ الكود إلى الحافظة
npx intlayer-editor start
لاحظ أنه يجب تشغيل تطبيقك بالتوازي. يجب أن يتطابق عنوان URL للتطبيق مع الذي قمت بتعيينه في تكوين المحرر (applicationURL).
ثم افتح عنوان URL المقدم. الافتراضي هو http://localhost:8000.
يمكنك عرض كل حقل مفهرس بواسطة Intlayer عن طريق التمرير فوق المحتوى الخاص بك باستخدام المؤشر.
إذا كان محتواك محددًا، يمكنك الضغط عليه مطولاً لعرض درج التعديل.
تكوين البيئة
يمكن تكوين المحرر لاستخدام ملف بيئة محدد. هذا مفيد عندما تريد استخدام نفس ملف التكوين للتطوير والإنتاج.
لاستخدام ملف بيئة محدد، يمكنك استخدام العلامة --env-file أو -f عند بدء تشغيل المحرر:
نسخ الكود إلى الحافظة
npx intlayer-editor start -f .env.development
لاحظ أن ملف البيئة يجب أن يكون موجودًا في الدليل الجذر لمشروعك.
أو يمكنك استخدام العلامة --env أو -e لتحديد البيئة:
نسخ الكود إلى الحافظة
npx intlayer-editor start -e development
التصحيح
إذا واجهت أي مشاكل مع المحرر البصري، تحقق من التالي:
المحرر البصري والتطبيق يعملان.
تم إعداد تكوين المحرر بشكل صحيح في ملف تكوين Intlayer الخاص بك.
- الحقول المطلوبة:
- يجب أن يتطابق عنوان URL للتطبيق مع الذي قمت بتعيينه في تكوين المحرر (applicationURL).
- الحقول المطلوبة:
يستخدم المحرر المرئي iframe لعرض موقعك الإلكتروني. تأكد من أن سياسة أمان المحتوى (CSP) لموقعك تسمح بعنوان URL الخاص بنظام إدارة المحتوى (CMS) كـ frame-ancestors ('http://localhost:8000' بشكل افتراضي). تحقق من وحدة تحكم المحرر لأي أخطاء.
سجل الوثائق
- 5.5.10 - 2025-06-29: بدء السجل