كيفية إنشاء سمة مخصصة لـ Drupal 9 في 9 خطوات بسيطة

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

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

وصل دروبال 8 الآن إلى موسوعة الحياة. حان الوقت الآن للانتقال إلى دروبال 9. ومع ذلك ، إذا كنت لا تزال تحاول إنشاء قالب مخصص في دروبال 8 ، فستعمل هذه الخطوات مع إعداد دروبال 8 أيضًا.

الشروع في تطوير موضوع Drupal 9 المخصص

لنبدأ في إنشاء سمة دروبال 9 لموقعنا على الويب دروبال.
الخطوة 1: أولاً ، نحتاج إلى إنشاء سمة مخصصة ضمن مجلد "web / theme / custom" . سنقوم بتسمية المجلد باسم custom_theme .

الخطوة 2: بعد ذلك ، سنحتاج إلى إنشاء ملف info.yml . نحن بحاجة إلى تحديد المفاتيح الأساسية لذلك. دعونا نحددها هنا -

 الشفرة:
الاسم : موضوع مخصص
النوع : موضوع
الوصف : "سمة مخصصة لموقع الويب الخاص بي".
الحزمة : أخرى
core_version_requirement : ^ 8 || ^ 9

الخطوة 3 : الآن ، لنقم بإنشاء ملف libraries.yml لتحديد جميع المكتبات التي نحتاجها (CSS و JS) لموضوع دروبال 9 المخصص. سننشئ أيضًا دليل CSS و JS وملفاته لربطه هنا. سنقوم بتسمية المكتبة كتصميم عالمي .

 الشفرة:
التصميم العالمي :
الإصدار : 1.x
شبيبة :
js / script.js : {}
المغلق :
الموضوع :
css / style.css : {}

الخطوة 4: بعد إنشاء ملف libraries.yml ، نحتاج إلى ربطه بموضوعنا. لهذا ، سنقوم بإضافته في ملف info.yml والتي ستطبقها بعد ذلك على الموضوع بأكمله.

 الشفرة:
المكتبات :
- custom_theme / تصميم عالمي

لذلك ، سيكون المفتاح هو المكتبات وسيكون المسار هو اسم السمة - " custom_theme " / اسم المكتبة - "التصميم العالمي" .

الخطوة 5: بعد ذلك ، نحتاج إلى أن نرث "السمة الأساسية" ، في حالتنا ، سوف نرث السمة " الأنيقة " التي هي سمة دروبال الأساسية. لذلك ، سيكون المفتاح هو الموضوع الأساسي في info.ym l.

 الشفرة:
الموضوع الأساسي : أنيق

الخطوة 6: الآن ، سوف نحدد "المناطق" لموضوعنا. في info.yml ، علينا تعريفه تحت مفتاح "المناطق".

 الشفرة:
المناطق :
العلامة التجارية : العلامة التجارية
الملاحة : الملاحة الرئيسية
البحث : بحث
مميز : مميز
المحتوى : المحتوى
right_sidebar : الشريط الجانبي الأيمن
footer_first : التذييل أولاً
footer_second : التذييل الثاني
footer_third : التذييل الثالث
footer_bottom : تذييل سفلي

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

الخطوة 7: بعد أن حددنا مناطقنا لموضوع دروبال المخصص ، نحتاج إلى تجاوز page.html.twig للاستيلاء على "مناطقنا" بدلاً من السمات الأنيقة. سننشئ دليل القوالب / النظام الذي سننشئ بموجبه الصفحة .html.twig .

 الشفرة:
< header aria-label = "رأس الموقع" class = "header" id = "header" role = "banner" >
{{page.branding}}
{{page.navigation}}
{{page.search}}
</ رأس >
< section class = "المميز" id = "المميز" الدور = "التكميلي" >
{{page.featured}}
</ قسم >
< section class = "main" id = "main" >
< main aria-label = "Site main content" class = "content" id = "content" role = "main" >
{{ محتوى الصفحة }}
</ رئيسي >
< aside class = "right - sidebar" id = "sidebar" role = "completeary" >
{{page.right_sidebar}}
</ جانبا >
</ قسم >
< footer aria-label = "تذييل الموقع" class = "footer" id = "footer" role = "contentinfo" >
< div class = "footer - top" >
{{page.footer_first}}
{{page.footer_second}}
{{page.footer_third}}
</ div >
< div class = "footer - bottom" >
{{page.footer_bottom}}
</ div >
</ تذييل >

في page.html.twig ، سننشئ بنية HTML لمناطقنا. كما ترى في {{page.branding}} - هنا ،

الصفحة - هي مفتاح عرض "المناطق" في الصفحة

العلامة التجارية- هي المنطقة التي حددناها في ملف info.yml .

الآن ، قمنا بإنشاء مناطقنا وعرضناها على الصفحة.

الخطوة 8: اذهب إلى Appearance في موقع Drupal الخاص بك. يمكنك رؤية سمة دروبال المخصصة الموجودة في قسم السمات غير المثبتة.

تحتاج إلى النقر فوق الخيار " تثبيت وتعيين كخيار افتراضي " لتثبيت سمة دروبال الخاصة بك على الموقع.

بعد تثبيته ، انتقل إلى Structure -> Block Layout . سيظهر نسقك المخصص تحت قالب التخطيط.

سترى رابطًا لـ " إظهار مناطق الحظر (سمة مخصصة) " ، انقر فوق الارتباط. يمكنك رؤية جميع المناطق التي قمت بإعلانها في info.yml وإضافتها في page.html.twig

الخطوة 9: لقد أوشكت الآن على الانتهاء من استخدامهم في دروبال 9! بعد ذلك ، تحتاج إلى تطبيق أنماط في CSS لكل منطقة حسب تصميمك. سنستخدم CSS في هذه الحالة ؛ يمكنك حتى استخدام SCSS إذا كنت ترغب في ذلك. ما عليك سوى فحص منطقة العلامة التجارية - يجب أن ترى فئة المنطقة ثم تضيف CSS إلى تلك الفئة.

 . رأس {
 عرض : فليكس ؛
 تبرير المحتوى : مسافة بين ؛
 الحشو : 10 بكسل ؛
}


. رأس . المنطقة {
 الحشو : 5 بكسل ؛
}


. رأس . العلامة التجارية للمنطقة {
 المرن : 0 1 20 ٪ ؛
}


. رأس . منطقة التنقل {
 المرن : 0 1 50 ٪ ؛
}


. رأس . البحث عن المنطقة {
 المرن : 0 1 30 ٪ ؛
}
		



. المنطقة . منطقة الكتلة {
 الحشو : 15 بكسل ؛
}


. مميزة {
 الحشو : 40 بكسل 20 بكسل ؛
 لون الخلفية : Indianred ؛
}


. رئيسي {
 الحشو : 50 بيكسل 0 ؛
 عرض : فليكس ؛
 تبرير المحتوى : مسافة بين ؛
}


. رئيسي . المحتوى {
 المرن : 0 1 65 ٪ ؛
}


. رئيسي . اليمين - الشريط الجانبي {
 المرن : 0 1 30 ٪ ؛
}


. تذييل - أعلى {
 عرض : فليكس ؛
 تبرير المحتوى : مسافة بين ؛
 الحشو : 10 بكسل ؛
}


. تذييل - أعلى . المنطقة {
 الحشو : 5 بكسل ؛
}


. منطقة تذييل أولاً ،. منطقة تذييل ثانية ،. المنطقة-التذييل-الثالث {
 المرن : 0 1 30 ٪ ؛
}

النتائج:

موضوع Drupal 9 المخصص جاهز!

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