قم بتخصيص برنامج ONLYOFFICE Docs بشعارك وألوانك الخاصة.

لتخصيص محرر ONLYOFFICE Docs المدمج، قم بتعيين سمة ألوان خاصة بعلامتك التجارية للمحرر، وأدخل روابط شعارك في إعدادات التهيئة. السمة عبارة عن ملف JSON مُثبّت على خادم Docs، بينما يتم تكوين الشعار بواسطة التطبيق الذي يُضمّن المحرر. خيار شعار الترويسة الموثق مُتاح فقط في ONLYOFFICE Docs Developer، لذا تأكد من إصدارك قبل تجهيز الملفات.

ينطبق هذا على تكامل Docs المُستضاف ذاتيًا، وليس على علامة DocSpace التجارية أو مُحدد السمات المحلي لمحررات سطح المكتب. تُوثّق ONLYOFFICE السمات المُخصصة من Docs الإصدار 7.0. تؤثر هذه الإعدادات على واجهة المُحرر المُدمجة، وليس على محتوى المستند أو التنقل في موقعك الإلكتروني.

ما الذي يجب عليك تحضيره أولاً؟

قم بتجميع ملفين للشعار: نسخة واضحة للعرض على خلفية فاتحة، ونسخة معكوسة للخلفية الداكنة أو الملونة. تحدد واجهة برمجة تطبيقات Docs صورة بحجم 300 × 20 بكسل لشعار رأس المحرر. استخدم صورة PNG شفافة إذا كانت مناسبة لتصميمك، واحرص على أن يكون الشعار عالي التباين بتفاصيل دقيقة قليلة لأن الصورة تظهر في شريط ضيق. استضف كلا الملفين على عناوين HTTPS مستقرة يمكن لمتصفح مستخدم المحرر تحميلها.

ستحتاج أيضًا إلى صلاحية الكتابة على الخادم، والبرنامج الذي يُنشئ إعدادات المحرر، ومستند تجريبي. بالنسبة لـ Docker، حدد اسم الحاوية أو مُعرّفها. اختبر التغيير في بيئة غير إنتاجية أولًا.

1. أنشئ ملف JSON خاصًا بالألوان التي تستخدمها.

ملف JSON الخاص بالثيم هو ملف إعدادات يربط رموز ألوان واجهة المستخدم المسماة بقيم الألوان. idيجب أن تكون هذه الرموز فريدة وتبدأ بـ `<الرمز theme->`؛ وهو nameما يراه المستخدمون في مُنتقي الثيمات. اختر لونًا أساسيًا فاتحًا أو داكنًا يتناسب مع واجهة المستخدم التي تريدها، ثم استبدل ألوان العناوين والعناصر المميزة المختارة. يُبقي المثال أدناه خلفية المحرر فاتحة، ويستخدم اللون النيلي لكل عنوان من عناوين المحرر، واللون المرجاني لزر التمييز في محرر المستندات.

{
  "name": "Acme Brand Light",
  "id": "theme-acme-brand-light",
  "type": "light",
  "colors": {
    "toolbar-header-document": "#263B67",
    "toolbar-header-spreadsheet": "#263B67",
    "toolbar-header-presentation": "#263B67",
    "toolbar-header-pdf": "#263B67",
    "text-toolbar-header": "#fff",
    "background-accent-button": "#D8613C"
  }
}

احفظه باسم acme-brand-light.json. رموز ألوان العناوين منفصلة للمستندات وجداول البيانات والعروض التقديمية وملفات PDF؛ عيّن كل رمز على حدة إذا كنت ترغب في علامة تجارية متسقة عبر جميع أنواع الملفات. يؤثر رمز التمييز الموضح هنا على زر التمييز في محرر المستندات النصية، وليس على كل عنصر ملون في مستندات Docs. يوفر ONLYOFFICE رموز ألوان إضافية للخلفيات والحدود وحالات التمرير والأيقونات والنصوص ولوحة التحرير، لذا وسّع لوحة الألوان فقط عند الحاجة إلى هذه المناطق. تحقق من تباين النص والأيقونات مع الخلفيات التي اخترتها قبل النشر؛ لا يضمن لون العلامة التجارية وحده سهولة قراءة عناصر التحكم.

للحصول على قائمة الرموز المدعومة بالكامل وحقول JSON المطلوبة، استخدم مرجع السمات المخصصة الرسمي لـ ONLYOFFICE .

2. قم بتثبيت القالب على خادم المستندات

انسخ ملف JSON إلى مجلد السمات الخاص بالخادم. توضح وثائق Linux وDocker الرسمية هذا المسار:

/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes

بالنسبة لنشر Docker، ضع الملف في الدليل الذي ستشغل منه الأمر، ثم استبدله CONTAINER_IDباسم أو معرف حاوية Docs قيد التشغيل:

docker cp ./acme-brand-light.json CONTAINER_ID:/var/www/onlyoffice/documentserver/web-apps/apps/common/main/resources/themes/

في نظام لينكس، انسخ الملف إلى هذا المسار باستخدام حساب لديه صلاحيات الكتابة. أما في نظام ويندوز، فاستخدم مجلد السمات الموجود ضمن المسار المحدد %ProgramFiles%\ONLYOFFICE\DocumentServer؛ راجع دليل التثبيت لمعرفة المسار الكامل. السمة المخصصة هي ملف JSON مُضاف، وليست تعديلاً على ملفات التطبيق المُضمّنة.

يُشير موقع ONLYOFFICE إلى أن ذاكرة التخزين المؤقت للسمات تُحدَّث كل خمس دقائق. قم بتحديث المحرر بعد نسخ الملف؛ إذا استمر فقدانه، فاتبع إرشادات استكشاف أخطاء ذاكرة التخزين المؤقت في Docker أو Linux، وأعد تشغيل الخدمات عند الحاجة فقط. بالنسبة لحاويات الإنتاج، أضف الملف إلى صورتك أو نظام التشغيل الآلي للنشر حتى لا يؤدي استبدال الحاوية إلى إزالته.

3. قم بتطبيق القالب وتعيين شعار المحرر

بعد اكتشاف السمة، يمكن للمستخدمين تحديدها من خلال عرض > سمة الواجهة . لجعل محرر النصوص المدمج يبدأ بهذه السمة، أضف معرّفها إلى كائن التكوين الذي يمرره تطبيقك إلى واجهة برمجة تطبيقات المستندات. عيّن الشعار داخل نفس editorConfig.customizationالكائن.

editorConfig: {
  customization: {
    uiTheme: "theme-acme-brand-light",
    logo: {
      image: "https://assets.example.com/logo-light.png",
      imageDark: "https://assets.example.com/logo-dark.png",
      imageLight: "https://assets.example.com/logo-light.png",
      url: "https://www.example.com"
    }
  }
}

استبدل عناوين URL النموذجية بعناوين URL الفعلية للأصول العامة والوجهة. logo.imageيُمثل هذا المسار القياسي للشعار في أوضاع التحرير الشائعة؛ حيث يتيح لك حقلا "الداكن" و"الفاتح" اختيار تصميم الشعار لرأس الصفحة باللون الداكن أو الفاتح. يُشير عنوان URL إلى المكان الذي يجب أن ينتقل إليه النقر على الشعار. تُدرج واجهة برمجة التطبيقات (API) إعداد شعار رأس الصفحة هذا كميزة لمطوري المستندات، وتُحدد حجمه بـ 300 × 20. لا تخلط بينه وبين customer.logoالصورة الأكبر حجمًا المستخدمة في معلومات "حول" في المحرر.

إذا كانت عملية التكامل لديك تستخدم توقيع JWT لتوقيع إعدادات المحرر، فأعد إنشاء التوقيع بعد إضافة أو تغيير هذه الحقول الموقعة، واحتفظ بسر التوقيع على الخادم. يوضح مثال التكامل الرسمي لـ ONLYOFFICE أن الرمز المميز يجب أن يتطابق مع الإعدادات ويُعاد إنشاؤه عند تغيير المعلمات الموقعة. لاحظ أيضًا أن المظهر الذي اختاره المستخدم مسبقًا قد يكون له الأولوية uiTheme؛ اختبر ذلك باستخدام ملف تعريف متصفح جديد أو أعد ضبط تفضيل المظهر المحفوظ للمستخدم إذا لم يظهر المظهر الافتراضي المطلوب.

للاطلاع على أحجام خصائص الشعار وتوافر الإصدارات، راجع مرجع تكوين العلامة التجارية القياسي الرسمي .

تحقق من النتيجة قبل النشر

افتح أنواع الملفات التي يحتاجها المستخدمون. تأكد من ألوان العناوين، ووضوح النصوص والأيقونات، وصحة الشعار في العناوين الفاتحة والداكنة، ومكان النقر على الشعار. تحقق من وضعَي التحرير والعرض في التصميم المُضمّن.

إذا كان القالب مفقودًا، فتحقق من صحة ملف JSON ومعرّفه، وتحقق من دليل القوالب على الخادم النشط، وانتظر حتى يتم تحديث ذاكرة التخزين المؤقت. إذا كان الشعار مفقودًا، فتحقق من متطلبات إصدار المطور، وإمكانية وصول المتصفح إلى عنوان URL الخاص بالصورة، وما إذا كان تكوين التهيئة يتضمن ذلك logo. أعد إنشاء رمز JWT على الواجهة الخلفية إذا قمت بتغيير الحقول الموقعة.