كيفية إنشاء مُنشئ تخطيط مخصص في دروبال 8

دروبال 8 يجعل الأمور أسهل بكثير لمؤلفي المحتوى. أحد أهم الأسباب هو إضافة وحدة Layout Builder في Core Drupal 8. مع واجهة السحب والإفلات السهلة ، وإمكانيات المعاينة والتخصيص ، أصبح منشئ التخطيط قريبًا الأداة المفضلة لبناء الصفحات وتصميمها.

في مقالتي السابقة ، كتبت عن كيف يمكنك البدء في تثبيت واستخدام مُنشئ تخطيط Drupal 8. هنا ، أرغب في مشاركة معرفتي حول تخصيص منشئ تخطيط للمتطلبات الفريدة.

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

الشروع في العمل مع Layout Builder:

سننشئ أولاً وحدة منشئ التخطيط المخصص لمنشئ التخطيط المخصص الخاص بنا ، وسنسمي المجلد باسم custom_layout. بعد ذلك ، سننشئ ملف info.yml. يجب أن نحدد المفاتيح الأساسية لذلك. سيكون لمنشئ التخطيط المخصص في دروبال 8 تبعية على وحدة منشئ التخطيط. دعونا نحددها هنا.

 رمز:
الاسم: "تخطيط مخصص"
النوع: وحدة
الوصف: "يوفر طريقة لإنشاء تخطيط"
النواة: 8.x
الحزمة: "مخصص"
التبعيات:
 - layout_builder: layout_builder

بعد ذلك سننشئ ملف layouts.yml لتحديد المناطق لتخطيطنا المخصص.

• custom_layout: مفتاح لتخطيط منشئ التخطيط المخصص.
• التسمية: تسمية لتخطيط منشئ التخطيط المخصص الخاص بنا.
• الفئة: فئة لتخطيط منشئ التخطيط المخصص لدينا.
• default_region: المنطقة الافتراضية هي المناطق الافتراضية في كل أنواع التخطيط.
• icon_map: الرمز الذي سيظهر أثناء اختيار التصميم الخاص بنا.

على سبيل المثال:

لإنشاء خريطة الرمز أعلاه ، نحتاج إلى اتباع الخطوات أدناه.

1. الصف الأول هو "رأس يسار" و "رأس يمين"
لقد حددنا - [ header_left، header_left، header_right ] - header_left هو
تم تحديده مرتين ، لذا سيستغرق الأمر جزأين من العرض الكلي للشاشة ، ثم يأخذ header_right باقي الجزء ، لذا ستكون النسبة "75٪ / 25٪".
2. الصف الثاني هو "المحتوى" و "الشريط الجانبي"
لقد حددنا - [ المحتوى ، المحتوى ، الشريط الجانبي ] نفس المنطق المطبق هنا.
3. الصف الثالث هو "التذييل الأيسر" و "التذييل الأيمن"
لقد حددنا - [ footer_left، footer_right] - نظرًا لوجود منطقتين فقط ، سيستغرق الأمر 50٪ لكل منهما.

• المناطق: المناطق التي نحتاجها لتخطيطنا. لدينا header_left ، header_right ، الشريط الجانبي ، المحتوى ، footer_left ، footer_right.

رمز:

 تخطيط مخصص:
 التسمية: "تخطيط مخصص"
 الفئة: "التنسيقات المخصصة"
 default_region: المحتوى
 icon_map:
   - [header_left، header_left، header_left]
   - [محتوى ، محتوى ، شريط جانبي]
   - [محتوى ، محتوى ، شريط جانبي]
   - [محتوى ، محتوى ، شريط جانبي]
   - [footer_left، footer_right]

 المناطق:
   header_left:
     التسمية: رأس اليسار
   رأس_حق:
     التسمية: رأس اليمين
   الشريط الجانبي:
     التسمية: الشريط الجانبي
   المحتوى:
     التسمية: المحتوى
   footer_left:
     التسمية: تذييل اليسار
   التذييل_الحق:
     التسمية: التذييل الأيمن

بعد ذلك ، دعنا ننشئ بنية html لتخطيطنا. سننشئ مجلدًا باسم "Layouts" داخل وحدتنا. سننشئ في المجلد مجلدًا آخر باسم "custom_layout"

وضمن هذا المجلد ، سننشئ ملفًا باسم "custom-layout.html.twig".

يتعين علينا تحديد ملف الغصين في layouts.yml

• المسار: يحدد في أي مجلد سيتم كتابة هيكل html الخاص بك
• template: يحدد أي قالب غصين لاستخدامه لهذا التخطيط أسفل المسار.

 رمز:

تخطيط مخصص:
 التسمية: "تخطيط مخصص"
 المسار: تخطيطات / custom_layout
 الفئة: "التنسيقات المخصصة"
 النموذج: تخطيط مخصص
 default_region: المحتوى
 icon_map:
   - [header_left، header_left، header_left]
   - [محتوى ، محتوى ، شريط جانبي]
   - [محتوى ، محتوى ، شريط جانبي]
   - [محتوى ، محتوى ، شريط جانبي]
   - [footer_left، footer_right]

 المناطق:
   header_left:
     التسمية: رأس اليسار
   رأس_حق:
     التسمية: رأس اليمين
   الشريط الجانبي:
     التسمية: الشريط الجانبي
   المحتوى:
     التسمية: المحتوى
   footer_left:
     التسمية: تذييل اليسار
   التذييل_الحق:
     التسمية: التذييل الأيمن

بعد ذلك سنكتب بنية html لمناطقنا في ملف “custom-layout.html.twig”.
سنقوم بتعيين الفئات بها "تخطيط" و "تخطيط - تخطيط مخصص" وسنقوم بتغليف المحتوى بالكامل بداخله.
سنحدد المناطق التي تم تحديدها في layouts.yml ، يمكننا الوصول إلى تلك المناطق مثل "{{content.header_left}}"

رمز:

{٪ مجموعة فئات = [
'نسق'،
"تخطيط - تخطيط مخصص" ،
]٪}
{٪ if content٪}
<div {{attributes.addClass (class)}}>
{٪ if content.header_left٪}
<div {{region_attributes.header_left.addClass ('layout__region'، 'layout__region - header_left')}}>
{{content.header_left}}
</div>
{٪ إنهاء إذا ٪}
{٪ if content.header_right٪}
<div {{region_attributes.header_right.addClass ('layout__region'، 'layout__region - header_right')}}>
{{content.header_right}}
</div>
{٪ إنهاء إذا ٪}
{٪ if content.content٪}
<div {{region_attributes.content.addClass ('layout__region'، 'layout__region - content')}}>
{{content.content}}
</div>
{٪ إنهاء إذا ٪}
{٪ if content.sidebar٪}
<div {{region_attributes.sidebar.addClass ('layout__region'، 'layout__region - sidebar')}}>
{{content.sidebar}}
</div>
{٪ إنهاء إذا ٪}
{٪ if content.footer_left٪}
<div {{region_attributes.footer_left.addClass ('layout__region'، 'layout__region - footer_left')}}>
{{content.footer_left}}
</div>
{٪ إنهاء إذا ٪}
{٪ if content.footer_right٪}
<div {{region_attributes.footer_right.addClass ('layout__region'، 'layout__region - footer_right')}}>
{{content.footer_right}}
</div>
{٪ إنهاء إذا ٪}
</div>
{٪ إنهاء إذا ٪}

بعد كتابة بنية html ، سيتعين علينا كتابة css لكل منطقة. سنقوم الآن بإنشاء مكتبات libraries.yml في الوحدة النمطية الخاصة بنا.

رمز:

 تخطيط مخصص:
الإصدار: VERSION
المغلق:
   سمة:
     css / custom_layout.css: {}

سوف نحدد تلك المكتبة في layouts.yml

رمز:

 تخطيط مخصص:
 التسمية: "تخطيط مخصص"
 المسار: تخطيطات / custom_layout
 الفئة: "التنسيقات المخصصة"
 النموذج: تخطيط مخصص
 المكتبة: custom_layout / custom_layout
 default_region: المحتوى
 icon_map:
   - [header_left، header_left، header_left]
   - [محتوى ، محتوى ، شريط جانبي]
   - [محتوى ، محتوى ، شريط جانبي]
   - [محتوى ، محتوى ، شريط جانبي]
   - [footer_left، footer_right]

 المناطق:
   header_left:
     التسمية: رأس اليسار
   رأس_حق:
     التسمية: رأس اليمين
   الشريط الجانبي:
     التسمية: الشريط الجانبي
   المحتوى:
     التسمية: المحتوى
   footer_left:
     التسمية: تذييل اليسار
   التذييل_الحق:
     التسمية: التذييل الأيمن

الآن لنبدأ بتصميم كتلة مناطقنا. سنحدد هيكل لكل منطقة على النحو التالي-

رمز:

 .layout - تخطيط مخصص {
 عرض: -webkit-box.
 عرض: -ms-flexbox.
 عرض: فليكس ؛
 -ms- فليكس التفاف: التفاف.
 التفاف المرن: التفاف.
}

شاشةmedia و (الحد الأدنى للعرض: 40em) {
 .layout - تخطيط مخصص .layout__region - header_left {
   -webkit-box- فليكس: 0 ؛
   -ms- فليكس: 0 1 70٪ ؛
   المرن: 0 1 70٪ ؛
 }

 .layout - تخطيط مخصص .layout__region - header_right {
   -webkit-box- فليكس: 0 ؛
   -ms- فليكس: 0 1 30٪ ؛
   المرن: 0 1 30٪ ؛
 }

 .layout - تخطيط مخصص .layout__region - محتوى {
   -webkit-box- فليكس: 0 ؛
   -ms- فليكس: 0 1 70٪ ؛
   المرن: 0 1 70٪ ؛
 }

 .layout - تخطيط مخصص .layout__region - شريط جانبي {
   -webkit-box- فليكس: 0 ؛
   -ms- فليكس: 0 1 30٪ ؛
   المرن: 0 1 30٪ ؛
 }

 .layout - تخطيط مخصص .layout__region - footer_left {
   -webkit-box- فليكس: 0 ؛
   -ms- فليكس: 0 1 50٪ ؛
   المرن: 0 1 50٪ ؛
 }

 .layout - تخطيط مخصص .layout__region - footer_right {
   -webkit-box- فليكس: 0 ؛
   -ms- فليكس: 0 1 50٪ ؛
   المرن: 0 1 50٪ ؛
 }
}

بعد ذلك ، دعنا نقوم بتمكين الوحدة المخصصة الخاصة بنا

دعنا ننتقل إلى الهيكل -> أنواع المحتوى وانقر على " إدارة العرض " لأي نوع من أنواع المحتوى. في الوقت الحالي سوف نستخدم نوع المحتوى " مقال ".

بعد أن نختار تخطيطنا المخصص-