فيديو مدته 5 دقائق يعرض ميزات موضوع DXPR

مقدمة

موضوع DXPR هو موضوع دروبال المميز لدينا. إنه موضوع فرعي لموضوع Bootstrap الأساسي ويستخدم إطار عمل Bootstrap 3 . الشيء الذي قد لا يكون واضحًا للعملاء المحتملين الجدد هو أن سمة DXPR لا تتضمن DXPR Builder . DXPR Builder عبارة عن وحدة منفصلة. يمكن استخدام سمة DXPR و DXPR Builder بشكل مستقل.

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

1. سمة Bootstrap الأساسية وموضوع DXPR

قررنا استخدام السمة الأساسية لـ Bootstrap لأنها مشروع Drupal شائع جدًا ومألوف. أحد الأشياء الرائعة في هذا الموضوع الأساسي هو أنه يتعامل مع تحويل جميع نماذج Drupal ورسائله وعلامات التبويب والمكونات الأساسية الأخرى إلى Bootstrap HTML. يساعد هذا في إنشاء تصميم شامل ومتسق حتى إذا أضفت وحدات نمطية جديدة إلى موقعك لم يتم تصميمها للعمل مع Bootstrap 3. هناك أيضًا بعض العيوب لاستخدام هذا القالب الأساسي، فهو مُبالغ في هندسته ويأتي مزودًا بواجهة برمجة تطبيقات إعدادات السمات الخاصة به. لقد عمل المطور بجد لإنشاء هذا الوحش الأساسي ولكن التطوير الآن متقطع ولم يتقدم أحد لترحيل هذا الوحش إلى Bootstrap 4: https://www.drupal.org/project/bootstrap/issues/ 2554199 .

قوالب

نظرًا لأن سمة DXPR عبارة عن سمة أساسية لـ Bootstrap، في كل مرة تقوم فيها بإنشاء قالب جديد، يجب عليك نسخه من السمة الأساسية لـ bootstrap ثم تعديله.

2. تطوير جافا سكريبت في موضوع DXPR

في موضوع DXPR، نستخدم الكثير من jQuery، ولكن في بعض الأماكن التي يكون فيها الأداء أمرًا بالغ الأهمية، نستبدل jQuery بكود جافا سكريبت العادي.

يستخدم موضوع DXPR Grunt.js كمشغل مهام. سوف يقوم Grunt بتنفيذ المهام التالية:

  1. سوف يقوم Watch Grunt بمراقبة التغييرات وتشغيل المهام
  2. تجميع ملفات Sass في CSS مضغوطة
  3. Postcss لإضافة بادئات البائع، ودعم المتصفحات الأقدم (آخر إصدارين من كل متصفح، أي 9)
  4. Uglify (ضغط) جميع ملفات جافا سكريبت

أداء جافا سكريبت

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

  • ستعمل الدالة _.debounce في مثال رد الاتصال أعلاه على تشغيل التعليمات البرمجية مرة واحدة فقط، بعد انتهاء المستخدم من تغيير حجم إطار العرض.
  • ستعمل وظيفة _.throttle في رد اتصال التمرير بمعلمة 100 مللي ثانية على تشغيل الكود الخاص بنا بحد أقصى 10 مرات في الثانية، أثناء قيام المستخدم بالتمرير.

الوظيفتان المذكورتان أعلاه هما جزء من مكتبة الشرطة السفلية . يتم تضمين الشرطة السفلية في DXPR Builder ولكن ليس في سمة DXPR . لذلك، في موضوع DXPR نكتشف ما إذا كانت هذه الوظائف موجودة ونقوم بإنشائها عند الحاجة. يتم تضمين Undercsore أيضًا في Drupal 8 core ولكن ليس في Drupal 7 core.

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

3. CSS & SASS في موضوع DXPR

في موضوع DXPR، نستخدم SASS من أجل البرمجة بشكل أكثر كفاءة. بدلًا من كتابة محددات طويلة جدًا، يمكن أن يكون لدينا محددات متداخلة تنشئ تسلسلًا هرميًا بديهيًا بصريًا في كود sass الخاص بنا. قمنا بتقسيم كود sass الخاص بنا إلى 4 مجلدات:

  1. القاعدة (التخطيط على مستوى الموقع ورمز التصميم)
  2. المكونات (العناصر التي لا تظهر في كل صفحة)
  3. المساعدون (فئات الأدوات المساعدة، واختصارات ألوان العلامة التجارية، وما إلى ذلك)
  4. امتدادات البائع (تجاوزات أو امتدادات ملفات CSS المضمنة في مكونات برامج الجهات الخارجية، مثل إطار عمل Bootstrap، وjQuery UI، وأي وحدات نمطية وسمات Drupal التي تحتاج إلى تجاوزات)

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

أسماء الفصول

لسوء الحظ، لا يستخدم السمة الأساسية لـ bootstrap 3 أسماء فئات عالية التنظيم. في موضوع DXPR نحاول استخدام أسماء فئات أكثر تنظيماً. نحن لا نتبع أي اصطلاحات تسمية بشكل كامل، مثل SMACSS أو BEM ولكننا نستلهم من هذه الأطر ونطبق البنية حيثما نراها مناسبة. فئات المثال:

 .body--glazed-nav-desktop
.الرأس المزجج
.الزجاج رأس--ثابت
.glazed-header-overlay
.القائمة الرئيسية المزججة 
.glazed-megamenu__heading
.dxpr-theme-util-float-left

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

نحن نستخدم الشرطة السفلية المزدوجة بشكل مقتصد لإضافة المزيد من السياق إلى اسم الفصل، في شكل glazed-parent-element__child-element ولكننا لا نريد تطبيق هذا في كل مكان لتجنب تضخيم الكود الخاص بنا أكثر من اللازم.

4. تكامل وحدة الألوان

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

تحول اللون

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

https://github.com/jjroelofs/glazed/blob/8.x-1.1.3/color/color.inc#L39

يضمن هذا أن جميع الألوان متطابقة تمامًا وأن وحدة الألوان لن تحاول تغيير الألوان في مساحة ألوان HSL. من الممكن إضافة ألوان لا تريد تضمينها في اللوحة، على سبيل المثال لن تلتقط وحدة الألوان قيم الألوان rgba().

هام: ستقوم وحدة الألوان بتخزين ملفات CSS الخاصة بك مؤقتًا

إذا كنت تقوم بتحرير ملفات CSS لموضوع DXPR وكنت تتساءل عن سبب عدم ظهور التغييرات، فمن المحتمل أن يكون السبب في ذلك هو أن وحدة الألوان تحتفظ بنسخة من ملفات CSS المعاد تلوينها في مجلد الملفات. لتجديد هذه الملفات عليك حفظ نموذج إعدادات السمة. لا يؤثر مسح ذاكرة التخزين المؤقت الآن على هذه الملفات.

ستجد أن جميع العروض التوضيحية للموضوع ستقوم بتحميل ملفات DXPR css من مجلد الملفات باستثناء العرض التوضيحي الرئيسي. وذلك لأن العرض التوضيحي الرئيسي يستخدم لوحة الألوان الافتراضية، وبالتالي لن تقوم وحدة الألوان بإعادة كتابة ملفات CSS وتخزينها مؤقتًا. وهذا يجعل العرض التوضيحي الرئيسي أكثر جاذبية لتطوير CSS .

5. إعدادات الموضوع ونموذج إعدادات الموضوع

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

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

بنية إعدادات الموضوع

نظرًا لأن لدينا العديد من إعدادات السمات في سمة DXPR، فقد قمنا بتقسيم التعليمات البرمجية الخاصة بنا إلى ملفات، وقسمنا تلك الملفات إلى مجلدات "مميزة". تم العثور على مجلدات الميزات التالية في glazed/features:

  • تصميم كتلة sooper
  • sooper-custom-css
  • com.sooper-fonts
  • sooper-header
  • تخطيط sooper
  • عنوان الصفحة sooper
  • محفظة sooper
  • sooper-prevnext
  • الطباعة السوبر

يمكن أن يحتوي كل مجلد من هذه المجلدات على واحد أو أكثر من الملفات الثلاثة التالية:

  • feature -theme-settings.inc (تعليمات برمجية تنشئ عناصر النموذج في نموذج إعدادات السمة)
  • feature -theme-settings-controller.inc (يتم استدعاء هذه الملفات في حلقة في template.php (D7) وفي DXPR.theme (D8)
  • feature -theme-settings-css.inc (الكود الذي ينشئ كود CSS بناءً على إعدادات السمة)

كيف تصبح إعدادات السمة نافذة المفعول

هناك آليات مختلفة يمكن من خلالها تفعيل إعدادات السمة:

  1. كود CSS الذي تم إنشاؤه
  2. المنطق في وظائف المعالجة المسبقة للموضوع أو ملفات الغصين
  3. المنطق في كود جافا سكريبت

كود CSS الذي تم إنشاؤه

عندما يتم حفظ نموذج إعدادات السمة، تمر حلقة فوق جميع ملفات *-theme-settings-css.inc وتجمع كل مخرجات CSS. يتم حفظ هذا الإخراج في ملف في مجلد الملفات. يتم استخدام هذه الآلية عندما لا يتمكن مجرد تبديل الفئة من تغطية جميع الخيارات، على سبيل المثال مع إعدادات السمة التي تأخذ قيمًا رقمية (عرض التخطيط، حجم الخط، وما إلى ذلك).

يتم تخزين هذه الوظيفة في ملف منفصل، لأننا نحتاج أيضًا إلى استدعائها أثناء عملية تثبيت موقع Drupal، عند تثبيت توزيع يتضمن إعدادات سمة DXPR المخصصة:

مثال

المنطق في وظائف المعالجة المسبقة للموضوع أو ملفات الغصين

نقوم بإجراء الكثير من التغييرات على السمات ببساطة عن طريق تبديل الفئات. في Drupal 7 كقاعدة، يجب أن تكون فئات HTML التي تتحكم في المنطق موجودة في وظائف المعالجة المسبقة وستكون ملفات القالب خالية من المنطق. في Drupal 8، تغير هذا وسينتقل المنطق إلى ملفات twig.

دروبال 7 مثال | مثال دروبال 8

المنطق في كود جافا سكريبت

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

مثال دروبال 7 في admin js | مثال دروبال 8

في Drupal 7 نقوم بتخزين الإعدادات الزجاجية في drupal.settings.glazed وفي Drupal 8 في Drupalsettings.glazed. في Drupal 8، نقوم بإرفاق الإعدادات بالعناصر باستخدام الخاصية #attached. في Drupal 7 نستخدم وظيفة drupal_add_js.

مثال دروبال 7:

 drupal_add_js(array('glazed' => array('palette' => theme_get_setting('palette', 'glazed'))), 'setting');

مثال دروبال 8:

 $form['#attached']['drupalSettings']['glazedSettings'] = ['palette' => $palette];

7. دعم المتصفح

أعتقد أنه منذ حوالي 4 سنوات كانت آخر مرة تلقيت فيها شكوى بشأن بعض المشكلات الخطيرة في المتصفح. لحسن الحظ، ولت أيام دعم إنترنت إكسبلورر. هناك بالطبع تحدي جديد في دعم الأجهزة المحمولة، والأجهزة اللوحية، وأجهزة التلفزيون، ومن يدري ماذا سيحدث في المستقبل، ولكن حتى الآن لم يكن دعم المتصفح مصدر قلق كبير لموضوع DXPR. في تكوين PostCSS الخاص بنا في GruntJS، ندعم IE9 ولكننا لا نختبره أبدًا.

8. نظام القائمة

@لكى يفعل

9. تحديث glazed_starterkit

في كل مرة تقوم فيها بإجراء تحديث في dxpr.css، ملف CSS الرئيسي لدينا، يجب استنساخ نسخة من dxpr.css في المجلد glazed_starterkit. يعد هذا مطلوبًا نظرًا لوجود خطأ في وحدة الألوان، والذي سيؤدي إلى نسخ الملف من هناك بدلاً من مجلد السمات المصقول.