نظام إدارة المحتوى (CMS) الخاص بـ Intlayer

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

لهذا الغرض، يقدم Intlayer مفهوم "القواميس البعيدة".

فهم القواميس البعيدة

يقوم Intlayer بالتمييز بين القواميس "المحلية" و"البعيدة".

• القاموس "المحلي" هو قاموس يتم الإعلان عنه في مشروع Intlayer الخاص بك، مثل ملف الإعلان عن زر أو شريط التنقل الخاص بك. لا معنى لفصل المحتوى في هذه الحالة لأن هذا المحتوى ليس من المفترض تغييره بشكل متكرر.

• القاموس "البعيد" هو قاموس يتم إدارته من خلال نظام إدارة المحتوى Intlayer. يمكن أن يكون مفيدًا للسماح لفريقك بإدارة المحتوى مباشرةً على موقعك، كما يهدف إلى استخدام ميزات اختبار A/B وتحسين محركات البحث التلقائي.

المحرر البصري مقابل نظام إدارة المحتوى

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

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

التكامل

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

التكامل مع Next.js

للتكامل مع Next.js، راجع دليل الإعداد.

التكامل مع Create React App

للتكامل مع Create React App، راجع دليل الإعداد.

التكامل مع Vite + React

للتكامل مع Vite + React، راجع دليل الإعداد.

التكوين

في ملف تكوين Intlayer الخاص بك، يمكنك تخصيص إعدادات نظام إدارة المحتوى:

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... إعدادات التكوين الأخرى  editor: {    /**     * مطلوب     *     * عنوان URL للتطبيق.     * هذا هو عنوان URL المستهدف من قبل المحرر البصري.     */    applicationURL: process.env.INTLAYER_APPLICATION_URL,    /**     * مطلوب     *     * معرف العميل والسر الخاص بالعميل مطلوبان لتمكين المحرر.     * يسمحان بتحديد هوية المستخدم الذي يقوم بتحرير المحتوى.     * يمكن الحصول عليهما عن طريق إنشاء عميل جديد في لوحة تحكم Intlayer - المشاريع (https://intlayer.org/dashboard/projects).     */    clientId: process.env.INTLAYER_CLIENT_ID,    clientSecret: process.env.INTLAYER_CLIENT_SECRET,    /**     * اختياري     *     * في حالة استضافة نظام إدارة المحتوى Intlayer ذاتيًا، يمكنك تعيين عنوان URL الخاص بنظام إدارة المحتوى.     *     * عنوان URL لنظام إدارة المحتوى Intlayer.     * بشكل افتراضي، يتم تعيينه إلى https://intlayer.org     */    cmsURL: process.env.INTLAYER_CMS_URL,    /**     * اختياري     *     * في حالة استضافة نظام إدارة المحتوى Intlayer ذاتيًا، يمكنك تعيين عنوان URL الخاص بالخلفية.     *     * عنوان URL لنظام إدارة المحتوى Intlayer.     * بشكل افتراضي، يتم تعيينه إلى https://back.intlayer.org     */    backendURL: process.env.INTLAYER_BACKEND_URL,  },};export default config;

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

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

استخدام نظام إدارة المحتوى

دفع التكوين الخاص بك

لتكوين نظام إدارة المحتوى Intlayer، يمكنك استخدام أوامر intlayer CLI.

npx intlayer config push

إذا كنت تستخدم متغيرات البيئة في ملف التكوين intlayer.config.ts، يمكنك تحديد البيئة المطلوبة باستخدام الوسيطة --env:

npx intlayer config push --env production

يقوم هذا الأمر بتحميل التكوين الخاص بك إلى نظام إدارة المحتوى Intlayer.

دفع قاموس

لتحويل القواميس المحلية الخاصة بك إلى قاموس بعيد، يمكنك استخدام أوامر intlayer CLI.

npx intlayer dictionary push -d my-first-dictionary-key

إذا كنت تستخدم متغيرات البيئة في ملف التكوين intlayer.config.ts، يمكنك تحديد البيئة المطلوبة باستخدام الوسيطة --env:

npx intlayer dictionary push -d my-first-dictionary-key --env production

يقوم هذا الأمر بتحميل قواميس المحتوى الأولية الخاصة بك، مما يجعلها متاحة لجلبها بشكل غير متزامن وتحريرها من خلال منصة Intlayer.

تحرير القاموس

بعد ذلك، ستتمكن من رؤية وإدارة القاموس الخاص بك في نظام إدارة المحتوى Intlayer.

إعادة التحميل الفوري

يستطيع نظام إدارة المحتوى Intlayer إعادة تحميل القواميس تلقائيًا عند اكتشاف تغيير.

بدون إعادة التحميل الفوري، ستكون هناك حاجة إلى إنشاء جديد للتطبيق لعرض المحتوى الجديد.

من خلال تفعيل إعداد hotReload، سيقوم التطبيق تلقائيًا باستبدال المحتوى المحدث عند اكتشافه.

import type { IntlayerConfig } from "intlayer";const config: IntlayerConfig = {  // ... إعدادات التكوين الأخرى  editor: {    // ... إعدادات التكوين الأخرى    /**     * يشير إلى ما إذا كان يجب على التطبيق إعادة تحميل تكوينات اللغة تلقائيًا عند اكتشاف تغيير.     * على سبيل المثال، عند إضافة أو تحديث قاموس جديد، سيقوم التطبيق بتحديث المحتوى لعرضه في الصفحة.     *     * لأن إعادة التحميل الفوري تحتاج إلى اتصال مستمر بالخادم، فهي متاحة فقط لعملاء خطة `enterprise`.     *     * الافتراضي: false     */    hotReload: true,  },};export default config;

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

• على جانب الخادم، يجب التأكد من أن عملية التطبيق لديها حق الوصول للكتابة إلى دليل .intlayer/dictionaries.
• على جانب العميل، تتيح إعادة التحميل الفوري للتطبيق إعادة تحميل المحتوى في المتصفح دون الحاجة إلى إعادة تحميل الصفحة. ومع ذلك، هذه الميزة متاحة فقط لمكونات العملاء.

لأن إعادة التحميل الفوري تحتاج إلى اتصال مستمر بالخادم باستخدام EventListener، فهي متاحة فقط لعملاء خطة enterprise.

التصحيح

إذا واجهت أي مشاكل مع نظام إدارة المحتوى، تحقق من التالي:

• التطبيق يعمل.

• تم تعيين إعدادات editor بشكل صحيح في ملف تكوين Intlayer الخاص بك.

  • الحقول المطلوبة:
    • يجب أن يتطابق عنوان URL للتطبيق مع الذي قمت بتعيينه في إعدادات المحرر (applicationURL).
    • عنوان URL لنظام إدارة المحتوى.

• تأكد من أن تكوين المشروع تم دفعه إلى نظام إدارة المحتوى Intlayer.

• يستخدم المحرر البصري إطار iframe لعرض موقعك. تأكد من أن سياسة أمان المحتوى (CSP) لموقعك تسمح بعنوان URL لنظام إدارة المحتوى كـ frame-ancestors ('https://intlayer.org' افتراضيًا). تحقق من وحدة تحكم المحرر لأي أخطاء.