كيفية استخدام وحدة إضافات عناصر القائمة لدروبال 8

لم تعد القوائم الضخمة اتجاهًا للتصميم بعد الآن ، ولكنها جزء أساسي من معظم مواقع الويب المتعلقة بالأخبار أو التجارة الإلكترونية.

تعمل وحدة Menu Item Extras الخاصة بـ Drupal 8 على تحسين نظام القائمة الافتراضي في Drupal ، من خلال السماح لمنشئ الموقع بإضافة حقول إلى عناصر القائمة. بهذه الطريقة ، يمكن إنشاء قائمة ضخمة بخطوتين بسيطتين.

تابع معنا لمعرفة كيفية استخدام هذه الوحدة. لنبدأ!

الخطوة # 1: قم بتثبيت الوحدات المطلوبة

بالإضافة إلى وحدة عناصر القائمة الإضافية ، ستحتاج إلى تثبيت Viewfield. يوفر Viewfield حقلاً يحتوي على مرجع لطريقة عرض ويعرضه عندما يتم عرض الكيان الذي يحتوي على الحقل.

• افتح التطبيق الطرفي لجهاز الكمبيوتر الخاص بك.
• نوع :
  • يتطلب الملحن دروبال / مجال الرؤية
  • يتطلب الملحن دروبال / menu_item_extras

قم بتمكين كلا الوحدتين بعد التنزيل.

• انقر فوق "تمديد".
• تحقق من كلا الوحدتين.
• انقر فوق تثبيت.

الخطوة # 2: إنشاء نظام تصنيف

ربما لا تكون كلمة "نظام" مناسبة جدًا لأننا سننشئ مفردات واحدة فقط من عشرة مصطلحات مرتبطة. ومع ذلك ، سيشرح هذا المثال الأساسيات ، بحيث يمكنك العمل مع أنظمة تصنيف أكثر تعقيدًا في المستقبل.

• انقر فوق هيكل> تصنيف> إضافة مفردات.
• أدخل اسم "المواضيع" وانقر على حفظ.
• انقر فوق إضافة مصطلح وإضافة جميع المصطلحات المفصلة أدناه واحدة تلو الأخرى.
  • المواضيع
    • د 8
    • سيمفوني
    • الفسفور الابيض
    • ماجنتو
    • CSS
    • لغة البرمجة
    • شبيبة
    • بي أتش بي
    • بايثون
    • DevOps

الخطوة # 3: أنشئ أنواع المحتوى

لغرض هذا البرنامج التعليمي ، سنستخدم نوعين من المحتوى مع الحقول التالية:

• خدمات
  • صورة الخدمة / الصورة / عدد القيم المسموح بها: 1
  • نص المقدمة / نص (منسق) / عدد القيم المسموح به: 1
  • الوصف / الحقل الافتراضي

• مدونة
  • الفئة / مصطلح التصنيف / عدد القيم المسموح به: غير محدود
  • الوصف / الحقل الافتراضي

تأكد من تحديد نوع المرجع (المواضيع) عند إنشاء حقل التصنيف.

الخطوة رقم 4: إنشاء المحتوى

سنقوم بإنشاء 3 عقد من نوع الخدمة:

• دروس
• أشرطة فيديو
• كتب

سيتم ربط كل واحدة من هذه العقد بعنصر من المستوى الثاني في القائمة الضخمة. من ناحية أخرى ، سنقوم بإنشاء حوالي 10 عقد من نوع مدونة بمصطلحات مختلفة مرتبطة بها. تأكد من تضمين اثنين من المصطلحات (على سبيل المثال: D8 ، WP) بتكرار أكثر من المصطلحات الأخرى.

يجب أن تنظر شاشة المحتوى في نهاية هذه العملية بشكل أو بآخر مثل الصورة أدناه.

الخطوة # 5: قم بإنشاء عناصر القائمة

يحتوي المستوى الأول من القائمة الرئيسية على عناصر القائمة التالية:

• مسكن
• عن
• موارد
• اتصل

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

• انقر فوق هيكل> القوائم.
• انقر فوق قائمة "تحرير" لتحرير التنقل الرئيسي.

• انقر فوق إضافة ارتباط 3 مرات لإضافة عناصر قائمة المستوى الأول المفقودة.
• انقر فوق حفظ في كل مرة تقوم فيها بإدخال اسم عنصر القائمة.

استخدم العلامة الخاصة لعرض نص الارتباط فقط.

بمجرد إنشاء روابط القائمة وإعادة ترتيبها ،

• انقر فوق إدارة الحقول> إضافة حقل لإضافة حقل إلى عناصر القائمة.
• حدد حقلاً من النوع Viewfield.
• أعطه اسمًا وتسمية مناسبين.
• انقر فوق حفظ ومتابعة.

• اضبط عدد القيم المسموح بها على Unlimited.
• انقر فوق حفظ إعدادات الحقول

سيكون لديك خيار ربط طريقة عرض افتراضية بهذا الحقل المحدد. اترك هذه الحقول فارغة.

• قم بالتمرير لأسفل وانقر فوق حفظ الإعدادات
• انقر فوق إدارة العرض.

• إخفاء تسمية بطاقة القائمة.
• انقر فوق حفظ.

الخطوة رقم 6: أنشئ طرق العرض

• انقر فوق هيكل> طرق عرض> إضافة طريقة عرض
• إظهار المحتوى من نوع الخدمات.
• قم بإنشاء كتلة بقائمة حقول غير منسقة.
• اختر إظهار 3 عناصر في كل كتلة.
• انقر فوق حفظ وتحرير.

• أضف حقل صورة الخدمة
• اضبط نمط الصورة على Thumbnail واربط الصورة بالمحتوى.
• انقر فوق تطبيق

• أضف حقل نص المقدمة أيضًا.
• أعد ترتيب الحقول.
• انقر فوق حفظ.

• انقر فوق هيكل> طرق عرض> إضافة طريقة عرض
• إظهار محتوى من نوع مدونة.
• قم بإنشاء كتلة بقائمة حقول غير منسقة.
• اختر إظهار عنصر واحد لكل كتلة.
• انقر فوق حفظ وتحرير.

• أضف فئة الحقل.
• انقر فوق إضافة الحقول وتكوينها.
• انقر فوق إعدادات الحقول المتعددة.
• حدد قائمة غير مرتبة.
• اضبط عدد القيم المراد عرضها على 3.
• انقر فوق تطبيق.

• قم بإزالة معيار الفرز
• انقر فوق تطبيق.
• انقر فوق حفظ لحفظ العرض.

الخطوة # 7: أضف كتل العرض إلى عناصر القائمة

• انقر فوق هيكل> القوائم
• قم بتحرير شريط التنقل الرئيسي.
• تحرير الموارد عنصر القائمة.
• أضف الكتلتين اللتين أنشأتهما في الخطوة رقم 5.
• انقر فوق حفظ.

الخطوة رقم 8: أنماط CSS

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

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .field--name-field-menu-card .field__items {
 display: flex;
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 top: 166px;
 width: 100%;
 z-index: 10;
 }

 #block-bartik-main-menu a,
 #block-bartik-main-menu li span {
 background: transparent;
 text-shadow: unset;
 color: whitesmoke;
 }

 #block-bartik-main-menu .menu-item {
 display: grid;
 align-content: center;
 justify-content: center;
 }

 #block-bartik-main-menu .menu-level-0 {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 }

 #block-bartik-main-menu .menu-dropdown-0 {
 position: absolute;
 left: 0;
 width: 100%;
 padding-top: 16px;
 background-color: rgba(141,139,132, 0.9);
 }

 .view-tutorials .view-content {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 }

 .view-tutorials .views-row {
 display: grid;
 justify-items: center;
 }

 .view-tutorials .views-row span > a {
 font-size: 1.3rem
 }

 .view-tutorials .views-row .views-field-field-intro-text {
 font-size: 1rem;
 }

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