تنسيق DXPR Builder.

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

ما ينسّقه قالبكم

يرث محتوى المنشئ المنشور أنماط قالبكم:

• تستخدم العناوين والنصوص والروابط أنماط قالبكم.
• يستخدم التخطيط صفوف Bootstrap 5 وأعمدته، لذا يتماشى معه قالب Bootstrap 5. ومع أي قالب آخر، انتقلوا إلى DXPR Studio > DXPR Builder > الإعدادات العامة واضبطوا تحميل ملفات Bootstrap على Bootstrap 5.
• لكل عنصر فئة واحدة لكل نوع، مثل az-card أو az-button، ومعظمها يحمل أيضًا az-element؛ راجعوا بنية CSS.

إضافة الفئات إلى المحرر

في ملف info.yml للقالب

ادرجوا الفئات تحت dxpr_builder_classes في ملف .info.yml لقالبكم. تظهر في قائمة فئات HTML لكل عنصر، في مجموعة خيارات مسماة باسم القالب، ما دام القالب مفعّلًا:

# mytheme.info.yml
dxpr_builder_classes:
  brand-header: 'Brand header style'
  brand-cta: 'Call to action style'
  bg-gradient-primary: 'Primary gradient background'

من وحدة

نفّذوا hook_dxpr_builder_classes_alter(). يجب أن ينتهي الاسم بـ _alter؛ راجعوا مرجع واجهة الخطافات.

/**
 * Implements hook_dxpr_builder_classes_alter().
 */
function mymodule_dxpr_builder_classes_alter(&$classes) {
  $classes['optgroup-custom'] = t('Custom Styles');
  $classes['custom-card'] = t('Custom card');
  $classes['custom-hero'] = t('Custom hero');
}

أنماط الأزرار

يقدّم عنصر الزر أنماط Bootstrap: الأساسي والثانوي والنجاح والمعلومات والتحذير والخطر والرابط والفاتح والداكن. القائمة ثابتة في المحرر؛ ولا يغيّرها خطاف مجلدات الأزرار. ولإعطاء الأزرار مظهر علامتكم، نسّقوا فئات btn-* في قالبكم، أو أضيفوا فئتكم عبر فئات HTML.

تجاوزات CSS

تجاوزوا ناتج المنشئ في CSS قالبكم:

/* Section padding */
.az-section {
  padding-top: 4rem;
  padding-bottom: 4rem;
}

/* Card shadows */
.az-card {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

تُكتب الإعدادات التي يضبطها المحرر في تبويب النمط كأنماط مضمّنة. وتتغلب الأنماط المضمّنة على قواعد القالب التي لا تستخدم !important، لذا استخدموا CSS القالب للقيم الافتراضية ودعوا المحررين يتجاوزونها لكل عنصر.

المحرر وقالبكم

يعمل المحرر على الصفحة التي يُعرض فيها الحقل، أي داخل قالب الواجهة الأمامية، لا قالب الإدارة. وتحمل أشرطة التحكم والقوائم ومربعات الحوار الخاصة به الفئة dxpr-builder-ui وتحمّل ورقة أنماطها الخاصة، dxpr_builder_backend.css. لكن قواعد القالب التي تستهدف محددات واسعة مثل button أو .modal قد تصل إليها؛ لذا احصروا قواعدكم في مناطق المحتوى لتجنب ذلك.