كيفية إنشاء وحدة مخصصة وإضافة مكتبات CSS في دروبال 9

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

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

تطوير وحدة دروبال 9 المخصصة في 5 خطوات سهلة

فيما يلي بعض الخطوات الأساسية التي يجب عليك اتباعها للبدء في إنشاء وحدة مخصصة في دروبال 9.

الخطوة 1: قم بإنشاء مجلد مخصص للوحدة النمطية الخاصة بك

دروبال 9 هيكل الملف

الخطوة 2: اختر اسمًا قصيرًا أو اسم آلة للوحدة النمطية الخاصة بك

بعض القواعد المهمة التي يجب اتباعها قبل اختيار اسم لوحدتك:

• يجب أن تبدأ بحرف.
• يجب أن يحتوي فقط على أحرف صغيرة وأرقام وشرطات سفلية.
• يجب ألا تحتوي على أي مسافات.
• يجب ألا يزيد طوله عن 50 حرفًا.
• يجب أن تكون فريدة من نوعها. يجب ألا يكون للوحدة النمطية الخاصة بك نفس الاسم المختصر مثل أي وحدة نمطية أخرى أو سمة أو محرك موضوع أو ملف تعريف تثبيت ستستخدمه على الموقع.
• يجب ألا يكون أيًا من المصطلحات المحجوزة: src أو lib أو البائع أو الأصول أو CSS أو الملفات أو الصور أو js أو متفرقات أو القوالب أو التضمينات أو التركيبات أو دروبال .

دعنا نسميها: "hello_module".

الخطوة الثالثة: قم بإنشاء ملف .info.yml

يحتوي ملف .info.yml الخاص بك على معلومات الوحدة النمطية والتوافق ومعلومات التبعيات. يتم إنشاء ملف .info.yml لإعلام دروبال بوجوده في النظام وتوفير معلومات لصفحات إدارة دروبال ويب UI.

اسم الملف الخاص بنا: hello_module.info.yml

 name: Hello Module type: module description: 'First custom drupal 9 module' package: custom core_version_requirement: ^9 || ^10

يتكون ملف .info.yml من 3 أشياء: مفتاح ، فاصل ، قيمة.
حيث يكون المفتاح هو الاسم ، يكون الفاصل ":" (نقطتان) والقيمة هي "Hello Module".

الخطوة 4: إنشاء وحدة تحكم

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

لنقم الآن بإنشاء ملف في مجلد منظم كـ /src/Controller/WelcomeController.php

اسم الملف الخاص بنا: WelcomeController.php

 <?php namespace Drupal\hello_module\Controller; class WelcomeController { public function welcome() { $body = "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."; return [ '#markup => $body ]; } }

الخطوة الخامسة: إنشاء ملف routing.yml:

يحدد المسار الكود الذي يجب تنفيذه لتوليد الاستجابة عند طلب URI.

يتم إنشاء ملف .routing.yml لتعريف المسارات. يتم تعريف كل مسار على أنه اسم آلة في شكل my_module_name.route_name (على سبيل المثال hello_module.welcome )

 hello_module.welcome: path: '/welcome' defaults: _controller: 'Drupal\hello_module\Controller\WelcomeController::welcome' _title: 'Welcome to techX session' requirements: _permission: 'access content'

هذه هي الطريقة التي يبدو بها هيكل الوحدة النمطية hello_module العام لدينا:

أخيرًا ، ستتصل الزيارة / الترحيب بوحدة التحكم التي أنشأتها وستعرض الجسم بالعنوان.

نتيجة:

إرفاق مكتبات لتطبيق CSS

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

لإنشاء مكتبة ، تحتاج إلى إنشاء ملف جديد باسم " module_name.libraries.yml " ووضعه في مجلد الوحدة النمطية الخاص بك. أنت الآن بحاجة إلى ملف CSS ستكتب فيه كود CSS الخاص بك. قم بإنشاء مجلد يسمى CSS ووضع " style.css " داخل هذا المجلد. الآن ستحتاج أيضًا إلى إنشاء قالب مخصص. أنشئ نموذجًا مخصصًا باسم " welcome-body.html.twig " وضعه داخل مجلد القوالب (كما هو موضح أدناه).

ملفنا: hello_module.libraries.yml

 custom: version: 1.x css: theme: css/style.css: {}

حتى الآن ، دروبال لا يعرف أن هذا القالب موجود. لإعلام دروبال ، تحتاج إلى إنشاء ملف " module_name.module " لأية تغييرات مخصصة واستخدام hook_theme () للتنفيذ.

اسم ملفنا: hello_module.module

 function hello_module_theme() { return [ 'welcome_body' => [ 'template' => 'welcome-body', 'variables' => [ 'body' => 'Default body text' ] ] ]; }

ملف النموذج الخاص بنا: welcome-body.html.twig

 <div class="welcome-body"> <p class="body-text"> {{ body }}</p> </div>

الآن ، دعنا نضيف اللون الأحمر إلى النص الأساسي للقالب الخاص بنا ونستهدف فئة " النص الأساسي " في القالب.

ملف CSS الخاص بنا: style.css

 .body-text { color: red }

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

 namespace Drupal\hello_module\Controller; class WelcomeController { public function welcome() { $body = "Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularized in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum."; return [ '#theme' => 'welcome_body', '#body' => $body, '#attached' => [ 'library' => [ 'hello_module/custom', ], ] ]; } }

ها هي النتيجة بعد تطبيق CSS:

افكار اخيرة

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

إذا كنت تبحث عن وكالة تطوير Drupal يمكنها مساعدتك في بناء وحدات مخصصة لتلائم احتياجات عملك المتنامية ، فنحن نحب التحدث!