كيفية تخصيص ألوان العلامة التجارية والسمات في واجهة مستخدم الويب الخاصة بـ ownCloud

إنّ الطريقة الأمثل لتخصيص واجهة الويب الحالية لـ ownCloud هي إنشاء ملف JSON خاص بالسمات المدعومة، وتوجيه ownCloud Infinite Scale إلى هذه السمة. لن تحتاج إلى إعادة بناء واجهة الويب لتغيير اسم العلامة التجارية، أو الشعارات، أو أيقونة الموقع، أو خلفية تسجيل الدخول، أو ألوان الواجهة العامة. في نموذج السمات الحالي لـ Infinite Scale، تُوفّر هذه العناصر من خلال تعريف السمة، بينما تتحكم رموز التصميم في الألوان والقيم المرئية الأخرى.

هذا الدليل مُعدٌّ خصيصًا لمنصة ownCloud Infinite Scale (oCIS) وواجهة المستخدم الأمامية الحديثة الخاصة بها على الويب. وهو لا يُغطي نظام تخصيص السمات القديم لخادم ownCloud 10/11 المبني على PHP، والذي يستخدم بنية سمات قائمة على التطبيقات وإعدادات مختلفة. تُوضح وثائق ownCloud Infinite Scale 8.2 المستقرة ووثائق تطوير الإصدار 9.0 نفس آلية التشغيل: توفير دليل للسمات المخصصة باستخدام الأمر `<head>` WEB_ASSET_THEMES_PATH، ثم اختيار ملف JSON للسمة باستخدام الأمر `<head>` . راجع وثائق تخصيصWEB_UI_THEME_PATH السمات الرسمية لمنصة ownCloud على الويب .

ما يمكنك تخصيصه دون إعادة بناء موقع ownCloud الإلكتروني

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

الخطوة 1: أنشئ مجلدًا منفصلاً للثيم ومجلدًا للأصول

ابدأ بفصل قالبك المخصص عن موارد ownCloud المدمجة. يتكون التصميم البسيط من مجلد للقالب يحتوي themes.jsonعلى assetsمجلد للشعارات، وأيقونة الموقع، وصورة تسجيل الدخول. مسار الاستضافة الدقيق متروك لاختيارك؛ المهم هو ربط المجلد أو إتاحته لخدمة ويب oCIS عبر WEB_ASSET_THEMES_PATH.

مثال على تخطيط ملف قالب ويب مخصص لمنصة ownCloud. يتم حفظ تعريف القالب وملفات الصور معًا في مجلد مخصص.

على سبيل المثال، قد يبدو هيكل جانب المضيف على النحو التالي:

/srv/owncloud/themes/
└── acme/
    ├── themes.json
    └── assets/
        ├── logo.svg
        ├── logo-white.svg
        ├── favicon.png
        └── login-background.jpg

استخدم صورًا تظل واضحة في سياق ظهورها. قد يختفي شعار داكن مناسب لصفحة بيضاء عند عرضه على شريط علوي داكن، لذا يُنصح بتوفير نسختين منفصلتين، فاتحة وداكنة، من الشعار. كذلك، اجعل خلفية تسجيل الدخول بسيطة نسبيًا خلف عناصر التحكم. يجب أن تُحسّن العلامة التجارية من سهولة التعرّف عليها دون التأثير على وضوحها.

الخطوة الثانية: تحديد اسم العلامة التجارية، ومسارات الشعار، وأيقونة الموقع، وخلفية تسجيل الدخول

يُعد ملف JSON الخاص بالثيم محور التخصيص. commonيحتوي هذا القسم على نصوص العلامة التجارية المشتركة، مثل الاسم والشعار. ضمن هذا القسم clients.web.defaults، يمكنك تحديد شعارات الويب الافتراضية وخلفية تسجيل الدخول. يستخدم مخطط ownCloud الموثق مفاتيح شعار منفصلة لكل من topbarو faviconو login.

رسم توضيحي بأسلوب التحرير لجزء العلامة التجارية في ملف القالب. استخدم بنية الكائن الموثقة في المثال أدناه بدلاً من التعامل مع الرسم التوضيحي كرمز برمجي يتم نسخه ولصقه.

يمكن البدء بنقطة أساسية بناءً على البنية المدعومة أدناه. حافظ على اتساق المسارات مع مسار عنوان URL الذي تعرض من خلاله خدمة الويب موارد القالب الخاص بك:

{
  "common": {
    "name": "Acme Cloud",
    "slogan": "Your files. Your workspace.",
    "logo": "themes/acme/assets/logo.svg",
    "urls": {
      "accessDeniedHelp": "",
      "imprint": "",
      "privacy": "",
      "accessibilityStatement": "",
      "universalAccessEasyLanguage": "",
      "universalAccessSignLanguage": ""
    }
  },
  "clients": {
    "android": {},
    "desktop": {},
    "ios": {},
    "web": {
      "defaults": {
        "appBanner": {},
        "logo": {
          "topbar": "themes/acme/assets/logo-white.svg",
          "favicon": "themes/acme/assets/favicon.png",
          "login": "themes/acme/assets/logo-white.svg"
        },
        "loginPage": {
          "backgroundImg": "themes/acme/assets/login-background.jpg"
        },
        "icons": {
          "universalAccess": "",
          "universalAccessEasyLanguage": "",
          "universalAccessSignLanguage": ""
        }
      },
      "themes": []
    }
  }
}

لا تفترض إمكانية حذف جميع المفاتيح بأمان لمجرد أن محلل JSON يقبل الملف. تشير ownCloud إلى أن بعض مفاتيح السمات الإلزامية تُضاف أثناء التشغيل، ولكن قد تظل السمة الصحيحة نحويًا خاطئة دلاليًا. من الممارسات الجيدة في بيئة الإنتاج البدء بقالب السمة المرفق مع إصدار Infinite Scale الذي تستخدمه فعليًا، وإجراء تغييرات العلامة التجارية الضرورية فقط، مع الحفاظ على توافق باقي البنية مع ذلك الإصدار.

الخطوة 3: تغيير ألوان السمة باستخدام رموز التصميم

يُمكن تخصيص الألوان ضمن قسم "السمة" في صفحة "السمة" clients.web.themes. يُمكن لكل سمة تحديد ما إذا كانت داكنة باستخدام خاصية isDark"السمة"، وتوفير نص سهل القراءة name، وتجاوز رموز التصميم. colorPaletteعادةً ما يتم تعديل ألوان العلامة التجارية الظاهرة في قسم "السمة".

مثال على أنواع رموز الألوان المستخدمة في ownCloud Web. قم بتغيير مجموعة الألوان المحددة أولاً، ثم تحقق من التباين وحالات التمرير قبل توسيع لوحة الألوان.

للحصول على تصميم بسيط للشركات، يمكنك البدء بمجموعة صغيرة من الرموز بدلاً من تغيير كل لون متاح:

{
  "isDark": false,
  "name": "Acme Light",
  "logo": {
    "topbar": "themes/acme/assets/logo-white.svg",
    "favicon": "themes/acme/assets/favicon.png",
    "login": "themes/acme/assets/logo-white.svg"
  },
  "designTokens": {
    "colorPalette": {
      "background-default": "#ffffff",
      "background-sidebar": "#f5f7fa",
      "background-hover": "#eef4fb",
      "border": "#d8e0e8",
      "swatch-brand-default": "#176B87",
      "swatch-brand-hover": "#12556C",
      "swatch-brand-contrast": "#ffffff",
      "swatch-primary-default": "#176B87",
      "swatch-primary-hover": "#12556C",
      "swatch-primary-contrast": "#ffffff",
      "text-default": "#102A33",
      "text-inverse": "#ffffff",
      "text-muted": "#526873",
      "icon-folder": "#176B87"
    }
  }
}

يكمن التوازن المهم في التناسق مقابل الشمولية. swatch-brand-defaultقد يمنحك التغيير البسيط نتيجة بصرية سريعة، لكن عناصر مثل التمرير والتباين والشريط الجانبي والحدود والنصوص قد تظل تعكس التصميم الافتراضي. من ناحية أخرى، قد يؤدي تجاوز عشرات العناصر دون اختبار إلى إنشاء تركيبات غير قابلة للقراءة. في معظم عمليات النشر، ابدأ بقيم العلامة التجارية واللون الأساسي والتباين والخلفية والنصوص والحدود، ثم وسّع نطاق التغيير فقط في الحالات التي تتعارض فيها القيم الافتراضية بشكل واضح مع تصميمك.

انتبه جيدًا للتباين. إذا اخترت لونًا فاتحًا للعلامة التجارية، فاستخدم معه رمزًا داكنًا بدلًا من فرض نص أبيض عليه. اختبر تركيز لوحة المفاتيح، وحالات التمرير، وعناصر التحكم المعطلة، والوضع الداكن إن وُجد، وأوضاع التباين العالي إن كانت مهمة لمستخدميك.

الخطوة الرابعة: قم بتثبيت القالب المخصص ووجه ownCloud إلى ملف themes.json

بعد تجهيز الدليل وملف JSON، قم بتهيئة خدمة الويب لقراءتهما. المتغيران البيئيان المهمان هما: `<اسم المتغير>` WEB_ASSET_THEMES_PATH، الذي يُحدد لـ ownCloud موقع جذر القالب المخصص، و`<اسم WEB_UI_THEME_PATHالمتغير>`، الذي يُحدد ملف JSON الخاص بالقالب المراد تحميله.

رسم توضيحي على غرار Docker Compose لتركيب دليل سمة مخصص وتكوين متغيري بيئة سمة الويب الخاصين بـ ownCloud. عدّل المسارات لتناسب عملية النشر الفعلية لديك.

قد يستخدم نشر Docker Compose نمطًا كهذا:

services:
  ocis:
    image: owncloud/ocis:<your-tested-version>
    environment:
      WEB_ASSET_THEMES_PATH: /etc/ocis/themes
      WEB_UI_THEME_PATH: /etc/ocis/themes/acme/themes.json
    volumes:
      - ./themes:/etc/ocis/themes:ro

الصورة أعلاه هي صورة توضيحية فقط. في بيئة الإنتاج، استخدم إصدار oCIS الذي اختبرته بالضبط بدلاً من نسخ صورة توضيحية من مثال. بعد تغيير بيئة التشغيل أو الملفات المُثبّتة، ​​أعد تشغيل خدمة oCIS المتأثرة أو أنشئها من جديد وفقًا لطريقة النشر المُستخدمة حتى يتم قراءة الإعدادات الجديدة.

تُوثّق منصة ownCloud آلية احتياطية مهمة: في حال عدم توفير سمة مخصصة، أو فشل تحميل السمة، يتم استخدام سمة Infinite Scale القياسية. هذه الآلية الاحتياطية مفيدة لأن غياب مسار معين لا يعني بالضرورة عدم إمكانية استخدام واجهة المستخدم. مع ذلك، يعني هذا أيضًا أن ظهور واجهة ownCloud الافتراضية بعد إعادة التشغيل قد يكون مؤشرًا على عدم تحميل السمة المخصصة.

كيفية التحقق من تحميل العلامة التجارية بالفعل

لا تتوقف عند تغيير صفحة تسجيل الدخول. يجب أن يشمل الفحص الشامل جميع الأماكن التي يرى فيها المستخدمون علامتك التجارية. افتح الموقع في جلسة تصفح جديدة أو نافذة خاصة لتقليل احتمالية إخفاء حالة الموقع الحالية بواسطة ملفات مخزنة مؤقتًا.

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

عندما لا يظهر المظهر المخصص

لا يزال يتم تحميل سمة ownCloud الافتراضية

تحقق أولاً من المسارات داخل الحاوية أو الخدمة قيد التشغيل، وليس فقط على المضيف. WEB_ASSET_THEMES_PATHيجب أن يشير المسار إلى جذر القالب كما يراه خدمة الويب، ويجب WEB_UI_THEME_PATHأن يشير إلى ملف JSON الفعلي في تلك البيئة. لا يمكن لـ ownCloud قراءة مسار المضيف الذي لم يتم ربطه بالحاوية مطلقًا.

يتم تحميل ملف JSON ولكن الصورة مفقودة

تحقق من مسار الملف themes.json، وحالة الأحرف في اسمه، وما إذا كان موجودًا ضمن مجلد السمات المخصصة. يمكن لأدوات مطوري المتصفح أن تساعد في التمييز بين طلب ملف تالف ومشكلة في السمات. إذا تم تحميل ألوان السمة ولكن لم يتم تحميل أحد الشعارات، فقد تكون السمة نفسها صالحة بينما يكون مسار الملف خاطئًا.

الصفحة تحمل علامة تجارية، لكن الألوان تبدو غير متناسقة.

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

يعمل أحد القوالب بشكل صحيح في إصدار معين، لكنه يبدو غير صحيح بعد التحديث.

قد تتطور رموز السمات وسلوك واجهة المستخدم. قبل ترقية بيئة الإنتاج، قارن سمة الويب المخصصة الخاصة بك مع القالب والوثائق الخاصة بإصدار oCIS المستهدف. كما توضح وثائق تكوين الويب المخصص من ownCloud الفرق بين التكوين المدعوم/الأصول المخصصة وتوفير أصول ويب مُجمّعة مخصصة بالكامل.

هل ينبغي عليك تعديل أصول الويب المجمعة بدلاً من ذلك؟

لا يُنصح به عادةً للعلامات التجارية العادية. يُعدّ استخدام قالب مخصص الخيار الأمثل عندما يكون هدفك تغيير الأسماء والشعارات والخلفيات وعناصر التصميم مع الحفاظ على توافقها مع واجهة المستخدم المدعومة. أما استخدام أصول مُجمّعة مخصصة بالكامل، فهو مُجدٍ فقط عند تطوير أو توزيع واجهة أمامية مُعدّلة بشكل جذري لا يُمكن التعبير عنها من خلال القوالب أو تجاوز الأصول المدعومة. يُكلّف هذا النهج تكلفة صيانة أعلى لأنك مسؤول عن ضمان توافق نسختك المخصصة مع أي تغييرات مستقبلية في ownCloud Web.

قائمة مراجعة عملية للإنتاج

• احتفظ بملفات السمات المخصصة خارج مجلدات التطبيق المدمجة.
• ابدأ من بنية السمات الموثقة لإصدار oCIS المثبت لديك.
• استخدم أشكالًا مختلفة للشعار عندما تتطلب الأسطح الفاتحة والداكنة ذلك.
• قم بتجاوز مجموعة محددة من رموز التصميم أولاً، بما في ذلك قيم التمرير والتباين.
• قم بتثبيت دليل السمات للقراءة فقط كلما أمكن ذلك.
• قم بتعيين كليهما WEB_ASSET_THEMES_PATHإلى WEB_UI_THEME_PATHالمسارات المرئية داخل الخدمة.
• أعد تشغيل خدمة Web/oCIS أو أعد إنشائها بعد إجراء تغييرات النشر.
• تحقق من تسجيل الدخول، والشريط العلوي، وأيقونة الموقع، ومنطقة الملفات، والتصميم المتجاوب، وأي سمات داكنة/عالية التباين تعرضها.
• أعد اختبار السمة قبل كل ترقية رئيسية لـ ownCloud Infinite Scale.

بالنسبة لعمليات النشر الحالية في بيئة Infinite Scale، يتيح هذا النهج القائم على ملفات السمات للمسؤولين فصلًا واضحًا بين كود التطبيق والهوية البصرية. يكمن السر في التعامل مع السمة كأصل نشر مُؤرشف: استخدم المخطط الذي يدعمه إصدار ownCloud الخاص بك، وحافظ على مسارات الصور قابلة للتنبؤ، وغيّر الألوان من خلال رموز التصميم بدلًا من التعديلات المخصصة على واجهة المستخدم، وتحقق من النتيجة عبر واجهة الويب الكاملة بدلًا من الحكم على النجاح من شاشة واحدة.