Bootstrap 4 في Drupal 8/9 مع Bootstrap Barrio

سنستخدم Bootstrap 4 في Drupal 8/9 مع Bootstrap Barrio. تتكامل سمة Bootstrap Barrio الخاصة بـ Drupal 8/9 مع Bootstrap 4 (أو Bootstrap 5 إذا أردت) مع موقع Drupal الخاص بك.

يعد Bootstrap إطارًا شائعًا جدًا لبناء مواقع الويب. يوفر للمصممين والمطورين لغة مشتركة للتواصل ، مما يجعل عملية التطوير أسهل كثيرًا.

يعد إنشاء موضوع فرعي لـ Barrio عملية مباشرة. سيستكشف هذا البرنامج التعليمي خيارات التكوين الأساسية للموضوع ، والتي تتم إدارتها من خلال واجهة مستخدم رسومية كاملة.

استمر في القراءة لتتعلم كيف!

الخطوة # 1. - قم بتثبيت السمة

قبل أن نبدأ ، تأكد من أن موقعك يحتوي على مقال واحد على الأقل ، حتى تتمكن من إجراء مقارنة بعد تغيير إعدادات السمة. ضع أيضًا كتلة داخل الشريط الجانبي للمنطقة ثانيًا (الهيكل> تخطيط الكتلة> وضع الكتلة).

• افتح التطبيق الطرفي لنظام التشغيل الخاص بك.
• ضع المؤشر في جذر تثبيت دروبال الخاص بك.
• النوع : يتطلب الملحن دروبال / bootstrap_barrio

سيؤدي هذا إلى تنزيل أحدث إصدار ثابت من السمة إلى: / web / theme / Contrib / bootstrap_barrio

الخطوة رقم 2. - إنشاء موضوع فرعي

• ضع المؤشر على دليل سمة bootstrap_barrio
• نوع :

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

 chmod +x scripts/create_subtheme.sh
 ./scripts/create_subtheme.sh

سيؤدي هذا إلى جعل البرنامج النصي المسمى create_subtheme داخل مجلد البرامج النصية قابلاً للتنفيذ ، وسيعمل أيضًا على تنفيذه.

سيطلب البرنامج النصي اسم آلة واسمًا وصفيًا لموضوعك الفرعي المخصص.

أدخل القيم التي تناسبك. تذكر أن اسم الجهاز يجب أن يكون صغيرًا ولا يحتوي على مسافات.

هذه الخطوة اختيارية:

• افتح دليل الموضوع الفرعي الخاص بك (/ web / theme / custom / mytheme) في محرر التعليمات البرمجية
• استبدل جميع مثيلات "Bootstrap Barrio" بـ "اسم السمة الخاصة بك"
• احفظ كل الملفات

هنا ، نقوم فقط بتغيير النص الوصفي ، لذلك لن تكون هناك مشكلة على الإطلاق إذا تركت هذا كما هو.

الخطوة # 3.- إعدادات Bootstrap Barrio

• انقر فوق المظهر في الواجهة الخلفية لموقع Drupal الخاص بك
• قم بالتمرير لأسفل إلى المظهر المخصص الخاص بك
• انقر فوق تثبيت وتعيين كافتراضي

بمجرد تثبيت السمة ،

• انقر فوق ارتباط إعدادات السمة

سترى مجموعة من علامات التبويب العمودية على الجانب الأيسر من الشاشة مع الخيارات التالية:

1. تخطيط (علامة التبويب النشطة)
2. عناصر
3. اللصق
4. انتقل الجاسوس
5. الخطوط والرموز
6. الألوان

تخطيط

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

ضمن قسم "المنطقة" ، من الممكن تعيين فئات CSS مخصصة لمناطق الموقع.

• أضف فصلك المخصص إلى منطقة معينة

• أغلق قسم "المنطقة"
• افتح "موضع الشريط الجانبي"
• غيّر قيمة "موضع الشريط الجانبي" إلى اليسار
• افتح "التخطيط الأول للشريط الجانبي" و "التخطيط الأول للشريط الجانبي"
• قم بتغيير القيم إلى 3 عمودي و 2 عمود على التوالي

عناصر

• انقر فوق علامة التبويب العمودية "المكونات"
• قم بتغيير عنصر الزر إلى تنسيق المخطط التفصيلي
• حدد تطبيق نمط إمج فلويد على جميع صور المحتوى

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

يتعامل قسم "بنية Navbar" مع حجم حاوية navbar. عليك أن تفرق بين اثنين من أشرطة التنقل (navbar-top و navbar). Navbar هي قائمة التنقل الرئيسية لموقعك.

• قم بتغيير موضع Navbar إلى Fixed bottom ولون رابط Navbar إلى Dark
• حدد شريط التنقل المنزلق في قسم "سلوك Navbar" لعرض قائمة منزلقة منزلقة على الشاشات الصغيرة

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

اللصق

مع الملصق ، من الممكن إصلاح عنصر ، أي ضبط قيمة خاصية موضع CSS على ثابت.

Scrollspy

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

الخطوط والأيقونات

هنا لديك خيارات للاختيار من بين مجموعات خطوط Google المختلفة لنص موقعك. علاوة على ذلك ، يمكنك الاختيار من بين مجموعات الرموز المحددة مسبقًا لاستخدامها في مشاركاتك.

• اختر مجموعة الخطوط ومجموعة الرموز التي ترضيك

الألوان

لديك هنا خيارات لتخصيص لون رسائل دروبال الداخلية. هناك خيارات لتخصيص جداول الموقع ، على سبيل المثال ، تلك التي تم إنشاؤها باستخدام وحدة المشاهدات.

إذا واصلت التمرير لأسفل ، فستجد "نظام الألوان" لموضوعك الفرعي. يمكنك تخصيص ألوان النص والخلفية لمناطق النسق الافتراضية.

يمكنك تخصيص لون كل عنصر حسب رغبتك وحظره باستخدام أيقونة القفل.

عرض عنصر الصفحة وصورة الشعار والأيقونة المفضلة

هذه هي الخيارات الافتراضية في جميع سمات دروبال.

تحميل مكتبة

يمكنك الاختيار من بين العديد من مكتبات Bootswatch الجاهزة للاستخدام عبر الإنترنت لتحسين مظهر المظهر وجوهره بنقرة واحدة فقط. هذه الخيارات تستحق التدقيق.

من الممكن الاختيار هنا إذا كنت تريد تحميل Bootstrap (Bootstrap CSS و JS) محليًا أو عبر CDN. لا ينبغي تغيير هذا التكوين هنا. من الأفضل تغيير الكود في ملف .info.yml .

• انقر فوق حفظ التكوين

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

ومع ذلك ، يمكنك الآن البدء من تصميم ومحاولة تكييف السمة معه.

آمل أن تكون قد أحببت هذا البرنامج التعليمي. شكرا للقراءة!