تنسيق محتوى المنشئ باستخدام CSS الخاص بقالبكم.

Learn DXPR BuilderManage the siteJe huisstijl toepassen

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

قبل أن تبدؤوا

  • تحتاجون إلى الوصول إلى ملفات قالبكم وطريقة لنشرها.
  • استخدموا قالبًا مخصصًا أو قالبًا فرعيًا. فتحديث قالب مُساهَم به يستبدل ملفاته، ومعها CSS الخاصة بكم.

الإعداد

  1. أنشئوا css/custom.css في مجلد قالبكم، مثلًا themes/custom/mytheme/css/custom.css.

  2. أعلنوا الملف في mytheme.libraries.yml:

    global-styling:
  css:
    theme:
      css/custom.css: {}

  3. حمّلوا المكتبة على كل صفحة من mytheme.info.yml:

    libraries:
  - mytheme/global-styling

  4. اكتبوا قاعدة لاسم فئة من اختياركم:

    .brand-hero {
  background: linear-gradient(135deg, #1a4d8f, #0f2a4d);
  color: #ffffff;
}

  5. امسحوا ذاكرة التخزين المؤقت في الإعدادات > التطوير > الأداء (/admin/config/development/performance) باستخدام مسح كل ذاكرات التخزين المؤقت، أو شغّلوا drush cr.

  6. في المنشئ، افتحوا إعدادات مقطع وأضيفوا brand-hero ضمن فئات HTML. يعرض معرّف HTML والفئات كيفية كتابة فئة من اختياركم.

يستطيع المحرّرون أيضًا اختيار الفئة من قائمة فئات HTML متى سردها قالبكم هناك؛ انظر فئات الأدوات.

ما الذي ترونه

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

الفئات التي يكتبها DXPR Builder

فئتكم الخاصة هي الهدف الأكثر أمانًا. وهذه الفئات في HTML المحفوظ أيضًا:

المنتقي يطابق
.az-container غلاف كل حقل DXPR Builder؛ وهو يحمل أيضًا .dxpr-editor بينما يحرّره شخص ما
.az-section كل مقطع؛ وداخله يقع .container، أو .container-fluid عندما يكون العرض الكامل مفعّلًا
.row كل صف؛ يستخدم DXPR Builder فئة Bootstrap نفسها ولا يضيف az-row
.col-* كل عمود، مثلًا .col-12.col-md-6؛ ولا يوجد az-column
.az-text، .az-image، .az-button، .az-card نوع عنصر واحد: az- إضافة إلى اسم العنصر، مثل .az-separator للفاصل
.az-element معظم عناصر المحتوى، لكن ليس الصورة ولا الأيقونة ولا الزر

تكتب لوحة النمط سمات style مضمّنة، التي تتغلب على قاعدة فئة على الخاصية نفسها. وفئات أدوات Bootstrap موسومة بـ !important وتتغلب على كليهما.

إذا لم تروا النمط

  • الفئة على العنصر، لكن لا شيء يتغير. المكتبة غير محمّلة، أو ما زالت ذاكرة التخزين المؤقت تحمل CSS القديم. تحققوا من أن mytheme.info.yml يسرد المكتبة، ثم امسحوا ذاكرات التخزين المؤقت في /admin/config/development/performance.
  • تنطبق بعض الخصائص فقط. تتغلب قيمة لوحة النمط على الخاصية نفسها. امسحوا تلك القيمة في لوحة النمط الخاصة بالعنصر، أو انقلوا المظهر كله إلى فئتكم.
  • يظهر النمط في المحرّر لكن ليس للزوار. تطبيق مرشّحات صيغة النص على محتوى الواجهة مفعّل، وصيغة نص الحقل تجرّد سمات class. أغلقوه ضمن مرشّحات النصوص في /admin/dxpr_studio/dxpr_builder/settings، أو اسمحوا بالفئات في الصيغة.
  • لا تطابق قاعدة لـ .az-row أو .az-column أبدًا. لا يكتب DXPR Builder تلك الفئات. استهدفوا .row أو فئات .col-* أو فئتكم الخاصة.

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