أنشئ قائمة ضخمة باستخدام Ultimenu و Bootstrap في دروبال 8

نشرت: 2022-02-16

سأل أحد عملائنا عن كيفية إنشاء قائمة ضخمة في دروبال 8.

القوائم الضخمة عبارة عن قوائم بها تنقل متعدد الأعمدة. لقد أصبحوا بسرعة اتجاهًا في تصميم الويب.

تتيح لك وحدة Ultimenu إدراج كتل دروبال في القائمة. يمكنك استخدامه بسهولة لبناء تخطيطات قائمة معقدة إلى حد ما.

في هذا البرنامج التعليمي ، ستتعلم كيفية إنشاء قائمة ضخمة بسيطة باستخدام وحدة Ultimenu و Bootstrap.

كان العميل يهدف إلى إنشاء قائمة ضخمة مماثلة لتلك الموجودة في الصورة أدناه:

يجب أن يكون عرض القوائم المنسدلة الضخمة 100٪. يجب أن يكون محتواها كتل دروبال.

نهج Ultimenu

تقوم وحدة Ultimenu بإنشاء كتلة لكل قائمة تضيفها في صفحة القوائم الخاصة بتثبيت Drupal (المسؤول / الهيكل / القائمة).

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

بهذه الطريقة يمكنك إدراج الكتل (الكتل المخصصة ، العروض ، إلخ) في هذه المناطق.

كتلة تحتوي على مناطق تحتوي على كتل:

الخطوة 1. قم بتثبيت الوحدة النمطية

قم بتثبيت الوحدة باستخدام الملحن:

composer require drupal/ultimenu

بعد التنزيل ، انقر فوق " تمديد " وقم بتمكين الوحدة. لا مزيد من التبعيات مطلوبة:

الخطوة 2. قم بإنشاء القائمة

انقر فوق هيكل> القوائم .
ابحث عن الملاحة الرئيسية
انقر فوق قائمة التحرير .

انقر فوق الزر "إضافة ارتباط"
أضف عناصر قائمة المستوى الأول:

يشير ارتباط السفر إلى route:<nolink> . هذا العنصر الأصل موجود فقط لاحتواء عناصر أخرى:

الخطوه 3. تكوين كتلة Ultimenu

انقر فوق الهيكل> القائمة النهائية .
حدد علامة التبويب التنقل الرئيسي في كتل Ultimenu الرأسية
انقر فوق حفظ التكوين :

انقر فوق مناطق Ultimenu.
اختر Ultimenu: main: Travel

سيقوم Ultimenu بإنشاء هذه المنطقة ديناميكيًا في صفحة Block Layout ، بحيث يمكنك وضع الكتل فيها.

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

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

الخطوة رقم 4. كتلة الصورة

من أجل وضع صورة في قالب ، تحتاج إلى إنشاء نوع كتلة مخصص مع حقل الصورة .

انقر فوق هيكل> تخطيط الكتلة> مكتبة كتلة مخصصة> أنواع الكتل .
انقر فوق الزر إضافة نوع كتلة مخصصة :

امنح نوع الكتلة اسمًا مناسبًا.
انقر فوق حفظ:

انقر فوق إدارة الحقول.
احذف حقل النص الأساسي.
انقر فوق إضافة حقل.
أضف حقل الصورة .
احفظه مع الإعدادات الافتراضية.
انقر فوق إدارة العرض.
إخفاء تسمية الكتلة :

انقر فوق هيكل> تخطيط الكتلة> مكتبة كتلة مخصصة> إضافة كتلة مخصصة :

انقر فوق حظر بالصورة :

قم بتحميل صورة.
انقر فوق حفظ:

الخطوة رقم 5. كتلة الروابط

توجد طرق عديدة للحصول على كتلة بها ارتباطات في أربعة أعمدة ، على سبيل المثال باستخدام طرق العرض.

أنا أعمل مع موضوع Bootstrap الفرعي في هذا البرنامج التعليمي. سأستخدم كتلة أساسية مع ترميز Bootstrap والفئات.

تحقق من هذا البرنامج التعليمي لتتعلم كيفية إنشاء موضوع فرعي Bootstrap في دروبال.

انقر فوق إضافة كتلة مخصصة مرة أخرى.
حدد الكتلة الأساسية هذه المرة.
أعط الكتلة الاسم المناسب.
حدد Full HTML كتنسيق نص في المحرر.
انقر فوق الزر المصدر .
الصق الكود التالي في نافذة المحرر:

 <div class="row"> <div class="col-sm-3"> <h3>Top destinations</h3> <ul> <li><a href="#">North America</a></li> <li><a href="#">Latin America</a></li> <li><a href="#">Middle East</a></li> <li><a href="#">Europe</a></li> <li><a href="#">Africa</a></li> </ul> </div> <div class="col-sm-3"> <h3>Editor's choice</h3> <ul> <li><a href="#">Best Hotel Deals</a></li> <li><a href="#">Cruise Deals</a></li> <li><a href="#">City Breaks</a></li> <li><a href="#">Activities</a></li> <li><a href="#">Culture</a></li> </ul> </div> <div class="col-sm-3"> <h3>City breaks</h3> <ul> <li><a href="#">Paris</a></li> <li><a href="#">Hong Kong</a></li> <li><a href="#">Rome</a></li> <li><a href="#">London</a></li> <li><a href="#">Tokyo</a></li> </ul> </div> <div class="col-sm-3"> <h3>Custom menu</h3> <ul> <li><a href="#">Disclaimer</a></li> <li><a href="#">Privacy</a></li> <li><a href="#">Advertisement</a></li> <li><a href="#">Contact us</a></li> </ul> </div> </div>

انقر فوق حفظ.

الخطوة رقم 6. ضع كتلة Ultimenu

انقر فوق هيكل> كتلة التخطيط .
تعطيل مجموعة التنقل الرئيسية الافتراضية.
ضع Ultimenu: التنقل الرئيسي في منطقة التنقل (القابلة للطي).
قم بإلغاء تحديد عنوان العرض .
انقر فوق حفظ الكتلة .

الخطوة رقم 7. ضع الكتل في منطقة "السفر"

قم بالتمرير لأسفل إلى أسفل الصفحة.

سترى المنطقة التي تم إنشاؤها ديناميكيًا التي قمت بتعيينها عند تكوين Ultimenu الخاص بك.

انقر فوق وضع الكتلة :

ضع قالب الصورة المخصص في هذه المنطقة.
قم بإلغاء تحديد عنوان العرض.
انقر فوق حفظ الكتلة.
كرر العملية باستخدام كتلة ترميز Bootstrap :

أعد ترتيب الكتل إذا لزم الأمر.
انقر فوق حفظ الكتل :

انتقل الآن إلى الصفحة الأولى لموقعك وألق نظرة على القائمة. اثنين من تعديلات CSS مطلوبة.

الخطوة رقم 8. CSS

بشكل افتراضي ، يشير ملف المكتبات الخاص بالموضوع الفرعي الخاص بك إلى ملف style.css داخل css / المجلد داخل موضوع Bootstrap الفرعي.

أضف الكود التالي إلى هذا الملف:

 /* Google fonts */ @import url('https://fonts.googleapis.com/css?family=Roboto:400,700'); /* Menu Links */ .ultimenu__link { text-transform: uppercase; font-family: 'Roboto', sans-serif; color: #000; font-size: 1.1em; display: inline-block; font-weight: 700; padding: 0.8em; } .has-ultimenu:hover { background-color: #FFF; } /* Image Block */ #block-megamenuimage { width: 100%; } #block-megamenuimage img { width: 100%; } /* Links block */ #block-multicolumnblock { width: 100%; } #block-multicolumnblock h3 { text-transform: uppercase; font-family: 'Roboto', sans-serif; background: #000; color: beige; font-size: 1em; display: inline-block; font-weight: 700; padding: 0.8em; border-radius: 10px; } #block-multicolumnblock li { list-style: none; border-top: 0.5px dashed #333; } #block-multicolumnblock li:last-child { border-bottom: 0.5px dashed #333; } #block-multicolumnblock li a { text-decoration: none; color: #333; display: block; line-height: 2.5em; }

الآن يجب أن تكون قد لاحظت بالفعل كيفية تعديل القائمة بنفسك:

ملخص

لقد تعلمت للتو كيفية إنشاء قوائم ضخمة في دروبال باستخدام وحدة Ultimenu و Bootstrap وطريقة سهلة لفهم أسلوب "Drupal block".

شكرا للقراءة!