وثائق محرر Intlayer البصري

www.youtube.com

Open embedded page in fullscreen

محرر 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

باستخدام --with flag، يمكنك بدء المحرر بالتوازي مع أمر آخر:

{
  "scripts": {
    "start:editor": "npx intlayer-editor start --with 'next dev --turbopack'",
  },
}

التكوين

في ملف تكوين 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;

لمشاهدة جميع المعلمات المتاحة، راجع وثائق التكوين.

استخدام المحرر

1. عند تثبيت المحرر، يمكنك بدء تشغيل المحرر باستخدام الأمر التالي:

   bash

   نسخ المحتوى

   نسخ الكود

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

   npx intlayer-editor start
   

   لاحظ أنه يجب تشغيل تطبيقك بالتوازي. يجب أن يتطابق عنوان URL للتطبيق مع الذي قمت بتعيينه في تكوين المحرر (applicationURL).

ملاحظة: يتم إعادة تصدير الأمر من خلال حزمة intlayer. يمكنك استخدام npx intlayer editor start بدلاً من ذلك.

2. ثم افتح عنوان URL المقدم. الافتراضي هو http://localhost:8000.

   يمكنك عرض كل حقل مفهرس بواسطة Intlayer عن طريق التمرير فوق المحتوى الخاص بك باستخدام المؤشر.

   

3. إذا كان محتواك محددًا، يمكنك الضغط عليه مطولاً لعرض درج التعديل.

تكوين البيئة

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

لاستخدام ملف بيئة محدد، يمكنك استخدام العلامة --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 بشكل افتراضي). تحقق من وحدة تحكم المحرر لأي أخطاء.

الأسئلة الشائعة