كيفية تخصيص قالب موقع Element الإلكتروني وواجهة المستخدم في عام 2026

يُتيح Element Web لمُستضيفي المواقع بأنفسهم عدة طرق فعّالة لجعل العميل يشعر بأنه جزء لا يتجزأ من مؤسستهم، إلا أن المسار المدعوم قد تغيّر. يُعدّ التحديث الأهم لعمليات النشر الحالية هو أن Element Web v1.12.30، الذي صدر في أواخر سبتمبر 2026، قد أزال مسار واجهة برمجة تطبيقات الوحدات والتخصيص القديم الذي قد لا تزال بعض الأدلة القديمة تُشير إليه. في الوقت نفسه، تستمر وثائق التكوين والتخصيص الرسمية في دعم العلامة التجارية من خلال config.jsonالسمات المخصصة، وأصول المصادقة ذات العلامة التجارية، والصفحات المُضمّنة، وواجهة برمجة تطبيقات الوحدات الأحدث لإجراء تغييرات أعمق في السلوك.

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

تستخدم الأمثلة أدناه نمط التكوين Snake_case الحالي الموصى به من قِبل Element. يُحذّر مرجع التكوين الرسمي من أن التوافق مع أنماط CamelCase القديمة سيختفي، لذا يُنصح بتجنب إنشاء علامات تجارية جديدة حول أسماء المفاتيح القديمة عند النشر. راجع وثائق تكوين Element Web الرسمية ، ووثائق السمات الرسمية ، وسجل الإصدارات الرسمي .

ما يمكنك تخصيصه دون إعادة بناء Element Web

يدعم نظام Element مجموعة واسعة من خيارات تخصيص العلامة التجارية تفوق احتياجات العديد من المسؤولين. وتتمثل عناصر التحكم الرئيسية فيما يلي:

قبل تغيير العلامة التجارية للنشر، سجل مظهر Element Web الحالي حتى تتمكن من مقارنة النتيجة بعد إعادة تحميل التكوين الجديد.

الخطوة 1: ابدأ من ملف config.json الخاص بالنشر

يقرأ Element Web الإعدادات من ملف config.jsonالإعدادات الرئيسي، أو من ملف خاص بالنطاق يحمل اسمًا محددًا config.$domain.json. ووفقًا للوثائق الرسمية، يتم تجربة الملف الخاص بالنطاق أولًا ولا يتم دمجه مع ملف الإعدادات الاحتياطي: إما أن يتم استخدام إعداد كامل واحد أو الآخر.

إذا كنت تقوم ببناء Element Web بنفسك، فإن وثائق المشروع توصي بنسخ config.sample.jsonالنسخة وتخصيصها. أما بالنسبة للنشر المعبأ أو المعبأ في حاوية، فقم بتحرير ملف التكوين أو تثبيته وفقًا لطريقة التعبئة والتغليف التي تستخدمها بالفعل. احتفظ بنسخة احتياطية قبل إجراء أي تغييرات.

ابدأ بأصغر تغيير ممكن في العلامة التجارية:

{
  "brand": "Acme Chat",
  "default_theme": "light"
}

تستبدل هذه brandالقيمة كلمة "Element" في عدد من سلاسل التطبيق ومواقعها. ولا تحوّل Element Web إلى منتج يحمل علامة تجارية خاصة بالكامل؛ إذ تنص وثائق Element صراحةً على أن إعادة تسمية العلامة التجارية بالكامل أو وضع علامة تجارية خاصة غير مدعومة من خلال خيارات التكوين هذه وحدها.

الخطوة الثانية: تصميم تجربة تسجيل الدخول والترحيب بعلامتك التجارية

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

{
  "brand": "Acme Chat",
  "branding": {
    "welcome_background_url": "https://chat.example.com/assets/login-background.jpg",
    "logo_link_url": "https://www.example.com/",
    "auth_header_logo_url": "https://chat.example.com/assets/acme-logo.svg",
    "auth_footer_links": [
      {
        "text": "Privacy",
        "url": "https://www.example.com/privacy"
      },
      {
        "text": "Support",
        "url": "https://www.example.com/support"
      }
    ]
  }
}

استخدم عناوين URL مستقرة بتقنية HTTPS يمكن لمستخدمي Element Web الوصول إليها دون الحاجة إلى تسجيل الدخول. قد لا يتم تحميل الشعار أو الخلفية الموجودة خلف جدار تسجيل دخول آخر قبل تسجيل دخول مستخدم Matrix. كذلك، احرص على أن يكون الشعار واضحًا على الشاشات الكبيرة والصغيرة على حد سواء، بدلاً من تحميل ملف صورة نقطية ضخم والاعتماد على المتصفح لتقليص حجمه.

يمكن لصفحة المصادقة ذات العلامة التجارية تغيير شعار الترويسة والخلفية وروابط التذييل مع الحفاظ على تدفق تسجيل الدخول الأساسي لـ Element Web سليمًا.

الخطوة 3: إنشاء قالب مخصص مدعوم

بالنسبة للألوان والخطوط داخل العميل، استخدم تنسيق السمات المخصصة لـ Element بدلاً من الاحتفاظ بمجموعة من مُحدِّدات CSS غير المُحكمة. يدعم توثيق السمات السمات المخصصة أثناء التشغيل setting_defaults.custom_themes. تتلقى السمة المخصصة اسمًا داخليًا بالصيغة التالية: `<اسم السمة custom-{theme.name}>`؛ وهذه هي القيمة التي يجب استخدامها في `<اسم السمة>` default_theme.

يُغيّر هذا المثال المُختصر ألوان التمييز الرئيسي، والشريط الجانبي، وقائمة الغرف، والجدول الزمني باستخدام المفاتيح الموثقة بواسطة Element:

{
  "default_theme": "custom-Acme Light",
  "setting_defaults": {
    "custom_themes": [
      {
        "name": "Acme Light",
        "is_dark": false,
        "colors": {
          "accent-color": "#2563eb",
          "primary-color": "#1d4ed8",
          "warning-color": "#dc2626",
          "sidebar-color": "#0f172a",
          "roomlist-background-color": "#f8fafc",
          "roomlist-text-color": "#172033",
          "roomlist-text-secondary-color": "#64748b",
          "roomlist-highlights-color": "#ffffff",
          "roomlist-separator-color": "#e2e8f0",
          "timeline-background-color": "#ffffff",
          "timeline-text-color": "#172033",
          "timeline-text-secondary-color": "#64748b",
          "timeline-highlights-color": "#f1f5f9"
        }
      }
    ]
  }
}

يمكن لكائن السمة نفسه تحديد الخطوط. كما توفر وثائق السمات الحالية لـ Element compoundكائنًا لتجاوز الرموز الدلالية من نظام تصميم Compound. يُعد هذا المسار مفيدًا عندما تستخدم مكونات الواجهة الأحدث رموز Compound بدلًا من متغيرات الألوان القديمة، ولكن ينبغي التعامل معه بحذر: تجاوز الرموز الدلالية الموثقة فقط، وأعد الاختبار بعد التحديثات.

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

يمكن لنمط مخصص خفيف أن يواءم قائمة الغرف والميزات البارزة وهوية التطبيق مع النظام المرئي للمؤسسة دون استبدال شاشات Element Web الأساسية.

الخطوة الرابعة: تخصيص محتوى الصفحة الرئيسية، ثم إعادة التحميل والتحقق.

يمكن لـ Element Web أيضًا الإشارة إلى صفحات HTML خارجية لعرض صفحة الترحيب والصفحة الرئيسية. embedded_pagesيدعم الكائن الموثق welcome_urlكلاً من `<input type="header">` و` home_url<input type="header">`. يمكن لعلامة منفصلة login_for_welcomeأن تجعل نموذج تسجيل الدخول يعمل كصفحة ترحيب؛ وعندما تكون هذه العلامة صحيحة، welcome_urlيتم تعطيل المسار العادي.

{
  "embedded_pages": {
    "welcome_url": "https://chat.example.com/assets/welcome.html",
    "home_url": "https://chat.example.com/assets/home.html"
  }
}

استخدم الصفحات المضمنة لتعريف المستخدمين الجدد بالمؤسسة، ومعلومات الاستخدام المقبول، وروابط الوثائق الداخلية، أو رسالة موجزة عن حالة الخدمة. تعامل معها كمحتوى ويب: قلل الاعتماديات إلى الحد الأدنى، وقدمها بشكل آمن، وتأكد من بقائها متاحة بشكل مستقل عن خادم Matrix الرئيسي.

بعد إجراء التغييرات config.json، أعد تحميل Element Web. تشير الوثائق الرسمية إلى أن تحديث المتصفح كافٍ لعمليات النشر عبر الويب، بينما يجب إغلاق Element Desktop بالكامل - بما في ذلك أي عملية في شريط المهام - ثم إعادة تشغيله. إذا ظهرت تغييراتك بشكل غير متناسق، فتحقق من التخزين المؤقت قبل افتراض أن ملف JSON خاطئ. ينص ملف README الخاص بنشر Element عبر الويب تحديدًا على أنه /config.*.jsonلا ينبغي تخزين /i18nو /versionو و /index.htmlمؤقتًا، ويوصي بإعادة التحقق من صحة الصفحة الرئيسية. راجع ملف README الرسمي الخاص بنشر Element Web .

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

عندما لا يكون ملف config.json كافياً

قد تُشير بعض الدروس القديمة إلى استبدال الوحدات النمطية customisations.jsonأو الاعتماد على نقاط التخصيص القديمة. لم يعد هذا أساسًا آمنًا للنشر الجديد. تُشير وثائق التخصيص الرسمية إلى أن هذه الآلية أصبحت قديمة، وتُؤكد ملاحظات إصدار سبتمبر 2026 v1.12.30 إزالة واجهة برمجة تطبيقات الوحدات النمطية والتخصيص القديمة.

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

إحدى الحالات الشاذة ذات الصلة هي صورة معاينة روابط التواصل الاجتماعي. تشير وثائق الإعدادات الرسمية إلى أن القيمة og:imageموجودة في ملف ثابت index.html، وليس في ملف عادي config.json. إذا كنت بحاجة إلى تغيير تلك الصورة، فسيصبح ذلك تخصيصًا يتم أثناء عملية البناء أو في ملف ثابت، بدلاً من كونه إعدادًا للعلامة التجارية أثناء التشغيل.

قائمة التحقق من الصحة

• افتح صفحة تسجيل الدخول في نافذة متصفح خاصة وتأكد من تحميل شعار المصادقة والخلفية وروابط التذييل بدون جلسة موجودة.
• تأكد من أن التطبيق يعرض brandالقيمة المطلوبة بعد تسجيل الدخول.
• تحقق من تحميل السمة الافتراضية المحددة لملف تعريف المتصفح الجديد، وليس فقط لحساب قام بتغيير إعدادات مظهره مسبقًا.
• تحقق من نص قائمة الغرف، والغرف المحددة، والتسميات الثانوية، والجداول الزمنية، وعناصر التحكم في كتابة الرسائل، والتحذيرات، وحالات التركيز للتأكد من وجود تباين واضح للقراءة.
• إذا كنت تستخدم صفحة رئيسية أو صفحة ترحيب مخصصة، فاختبرها عندما تكون الصفحة الخارجية غير متاحة حتى تفهم سبب الفشل.
• افحص لوحة شبكة المتصفح وتأكد من config.jsonجلب البيانات المتوقعة بعد النشر؛ فوجود خادم وكيل عكسي قديم أو تخزين مؤقت لشبكة توصيل المحتوى (CDN) هو سبب شائع لعدم عمل التكوين الصحيح.
• بعد كل ترقية لـ Element Web، أعد اختبار السمات المخصصة وأي عمليات تكامل لواجهة برمجة تطبيقات الوحدات النمطية مقابل الإصدار الجديد قبل طرحها لجميع المستخدمين.

خلاصة القول

بالنسبة لمعظم تطبيقات Element Web ذاتية الاستضافة، التزم بطبقة التكوين المدعومة: brandو branding، default_themeو setting_defaults.custom_themes، و embedded_pages. هذا يجعل التحديثات أسهل بكثير من تعديل مكونات React أو الاعتماد على أدوات التخصيص القديمة. انتقل إلى واجهة برمجة تطبيقات الوحدة أو نسخة مُدارة فقط عندما يُغيّر طلبك سلوك التطبيق فعلاً وليس مظهره.