فئات الأدوات.

تعلّم DXPR Builderإدارة الموقعطابقوا علامتكم

يحمل كل عنصر حقل فئات HTML مع قائمة فئات مُسمّاة. وأدوات Bootstrap 5 المساعدة وظلال الإسقاط مدمجة. ويمكن لقالبكم إضافة مجموعة خاصة به عبر ملف .info.yml الخاص به، ولوحدة عبر خطاف تعديل. تشرح هذه الصفحة ما تحويه القائمة وكيف تسجّلون فئاتكم الخاصة، فيختار المحرّرون مظهر العلامة بالاسم بدل كتابة أسماء الفئات.

تطبيق فئة

  1. افتحوا إعدادات العنصر وجدوا فئات HTML أسفل لوحة عام.
  2. انقروا المربع واختاروا فئة من القائمة. فالكتابة في المربع ترشّح القائمة.
  3. لإدخال فئة ليست في القائمة، انقروا تحرير كنص واكتبوها.
  4. انقروا حفظ في مربع الحوار، ثم حفظ على شريط أدوات المنشئ.

تدخل الفئات في سمة class الخاصة بالعنصر في HTML المحفوظ. ويُرشد معرّف HTML والفئات المحرّرين عبر الاستخدامات الشائعة.

ما الذي تحويه القائمة

يبني المحرّر القائمة عندما يبدأ. وهو يدمج ثلاثة مصادر بهذا الترتيب:

  1. القائمة المدمجة. وهي تحمل مجموعة ظلال الإسقاط ومجموعة فئات Bootstrap قصيرة وأدوات Bootstrap 5 المساعدة، مجمّعة حسب المهمة: العرض والظهور والظهور المتجاوب والهوامش والحشوات وألوان النصوص وغيرها.
  2. مجموعة لكل قالب مثبّت يحمل ملف .info.yml الخاص به مفتاح dxpr_builder_classes. وتُسمّى المجموعة باسم القالب.
  3. تغييرات من الوحدات، انظر تسجيل الفئات من وحدة.

قائمة فئات HTML مفتوحة في اللوحة العامة الخاصة بعنصر نص، وقد مُرّر فيها إلى المجموعة المسماة DXPR Theme مع مدخلات مثل Inline Form ولون الخلفية: DXPR Theme accent1

فكل موقع يحمل فئات للمسافات، مثل mt-3 وpx-4، وللعرض، مثل d-none، وللنصوص، مثل text-center وfw-bold. ولا تُعِدّون شيئًا لها.

تسجيل الفئات في قالب

أضيفوا ربط dxpr_builder_classes إلى ملف .info.yml الخاص بالقالب. فكل مفتاح اسم فئة، أو عدة أسماء مفصولة بمسافات؛ وكل قيمة هي التسمية التي يراها المحرّرون. يسجّل قالب DXPR فئاته بهذه الطريقة:

dxpr_builder_classes:
  dxpr-theme-form-inline: 'Inline Form'
  dxpr-theme-util-background-accent1: 'Background color: DXPR Theme accent1'
  dxpr-theme-util-border-accent1: 'Border color: DXPR Theme accent1'

  1. أضيفوا الربط إلى themes/custom/mytheme/mytheme.info.yml:

    dxpr_builder_classes:
  brand-card: 'Brand card'
  brand-card shadow-lg: 'Brand card with shadow'

  2. اكتبوا CSS الخاص بالفئات في مكتبة يحمّلها القالب على كل صفحة؛ انظر CSS مخصص.

  3. امسحوا ذاكرات التخزين المؤقت باستخدام drush cr، ليقرأ Drupal ملف المعلومات مجددًا.

  4. افتحوا إعدادات عنصر وتأكدوا من أن فئات HTML تعرض مجموعة باسم قالبكم والمدخلين.

يضيف كل قالب مثبّت يحمل المفتاح مجموعته، لا القالب الافتراضي وحده. وتحمل المجموعة دائمًا اسم القالب؛ فلا يستطيع ملف المعلومات إعادة تسميتها.

تسجيل الفئات من وحدة

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

إصدار Bootstrap

القائمة المدمجة هي Bootstrap 5. وإذا كان قالبكم لا يحمّل Bootstrap 5، فاضبطوا تحميل ملفات Bootstrap جانبيًا على Bootstrap 5 ضمن Bootstrap في DXPR Studio > DXPR Builder > الإعدادات العامة، ليكون للفئات CSS خلفها. انظر الأداء لما يحمّله ذلك.

إذا لم تروا فئاتكم

  • مجموعة قالبكم غائبة عن فئات HTML. ما زال Drupal يستخدم النسخة القديمة من ملف معلومات القالب. انقروا مسح كل ذاكرات التخزين المؤقت في الإعدادات > التطوير > الأداء (/admin/config/development/performance)، أو شغّلوا drush cr.
  • قالب يحمل المفتاح لا يضيف مجموعة. تُحتسَب القوالب المثبّتة فقط. ثبّتوا القالب في المظهر (/admin/appearance)؛ ولا حاجة لأن يكون القالب الافتراضي.
  • يبدو العنصر متماثلًا بعد اختيار فئة. لا يُحمَّل CSS لتلك الفئة على الصفحة. أضيفوا القواعد إلى مكتبة يحمّلها قالبكم، انظر CSS مخصص. ولفئات Bootstrap، انظر إصدار Bootstrap.

ما الخطوة التالية؟