البحث في الموقع

لقد تم بناء تويغ ليكون قابلًا للتوسيع بشكل كامل حيث يمكنك التحكم في كل شيء فيه كما يمكنك ضبط بيئة العمل بما يناسب المستخدم و تعريف دوال ومرشحات مخصصة تلبية أي متطلبات تريدها. خيارات بيئة العمل في تويغ عند استدعاء تويغ فإننا نكتب السطر التالي: $options = array(); $twig = new \Twig\Environment($loader, $options); يحوي الوسيط الثاني options خيارات التحكم بطريقة عمل تويغ مثلا لتفعيل وضع تصحيح الأخطاء: $options = ['debug' => true]; حيث تخزن خيارات بيئة العمل على شكل مصفوفة كل عنصر منها يشمل خيارًا محددًا هي: debug: تفعيل وضع تصحيح الأخطاء، القيمة الافتراضية غير مفعل false، وفي حال استخدام تويغ مع ووردبريس فيرتبط بتفعيل الخيار wp_denug في ووردبريس. charset: تحديد طريقة ترميز الأحرف القيمة الافتراضية utf8. cache: فيه نجد المسار الذي سوف نخزن به ملفات PHP الناتجة عن القالب أو نستعمل القيمة false في حال عدم رغبتنا بتخزينها وهذا هو الوضع الافتراضي. auto_reload: يطلب من محرك القالب أن يعيد توليد أو تصريف ملف PHP الناتج عن القالب كل مرة حتى في حال عدم تغير القالب. strict_variables: في حال كون قيمته true، فإن تويغ يعطي خطأ في حال استخدام اسم متغير غير موجود أما في حال ضبطه على false وهو الوضع الافتراضي فإن تويغ يعيد قيمة فارغة في حال لم يعثر على المتغير المطلوب. autoescape: يطلب من تويغ القيام بعملية تهريب آمنة مناسبة عند إخراج أي متغير. استخدام الدالة dump في وضع تصحيح الأخطاء يختلف عمل هذه الدالة تبعا للخيار debug وهو الخيار المسؤول عن تفعيل وضع تصحيح الأخطاء في بيئة عمل تويغ، وإذا كان وضع تصحيح الأخطاء غير مفعل لا تعيد الدالة dump أي قيمة أما عندما يكون وضع تصحيح الأخطاء مفعلًا فإن للدالة السابقة استخدامين اثنين، الأول عند استدعائها دون تمرير أي وسيط فإنه تظهر كافة المتغيرات المتعلقة بالقالب مع قيمتها مثل: {{ dump() }} أما الطريقة الثانية فهي أن نمرر لها متغيرًا ما، فإنها تعيد قيمة ذلك المتغير وفي حال كان المتغير مصفوفة فإنها تطبع جميع عناصر المصفوفة: {{ dump( user ) }} يفيد استعمال هذه الدالة كثيرًا في استكشاف الأخطاء. حيث تستخدم لطباعة البيانات في وضع تصحيح الأخطاء، كما تتميز بطباعة كل محتويات المتغير مهما كان نوعه، فإذا كان المتغير مصفوفة طبعت كافة محتويات المصفوفة و إذا كان المتغير كائن طبعت جميع خصائص الكائن. لنفرض أن التعبير التالي لا يعيد قيمة {{ post.title }} فإننا يمكن أن نعدل الكود ليصبح على الشكل التالي: {{ post.title }} {{ dump( post ) }} {# the last line output: object (post) public ‘title’ => string ‘’ public content => string ‘my post’ #} لاحظ أن الدالة السابقة تعيد جميع خصائص الكائن post مع نوع كل خاصية مما يسهل تتبع الأخطاء. توسيع عمل تويغ يهدف توسيع تويغ إلى تمكين المستخدِم من العديد من التقنيات غير المتوفرة بشكل افتراضي في تويغ. التوسيع بواسطة مكتبات جاهزة Twig مرن جدا بحيث يسمح للمطور بسهول بتعريف مرشحات ودوال خاصة، كما توجد العديد من المكتبات الجاهزة التي تدعم تويغ وتضيف له العديد من المرشحات والدوال الإضافية مثلا يمكن الاطلاع من هذه الصفحة على قائمة ببعض المكتبات الشهيرة وتحميلها. استخدام التوسعات Extensions توسعات Twig هي حزم تضيف مزايا جديدة إليه، وتستطيع تسجيل توسعة من خلال التابع addExtension()‎: عند العمل بدون composer $twig->addExtension(new ExtensionClassName()); كما يمكن أن يتم تسجيل التوسعة من خلال composer: $ composer require twig/extension-file بعد إضافة توسعة إلى تويغ يمكن استخدام الدوال أو المرشحات الجديدة التي تحتويها، مثلا المكتبة markdown-extra تضيف عددًا من المرشحات التي تتعامل مع نصوص من نوع ماركدون: {% apply html_to_markdown %} <h2>Title 2</h2> <h3>Title 3</h3> {% endapply %} {# output: ## Title 2 ### Title 3 #} التوسيع بواسطة الشيفرة الجامعة macro أن أبسط طريقة لتوسيع تويغ هو استخدام تويغ نفسه ويتم ذلك من خلال الوسم macro حيث يمكننا من تعريف شيفرة جامعة خاصة بنا يمكننا إعادة استخدامها: {% macro EcoHello( student ) %} Hello {{ student }}! {% endmacro %} {{ _self.EcoHello('Ziad') }} {# output: Hello Ziad! #} يمكن تعريف الشيفرات الجامعة في ملف تويغ منفصل ثم استيراده في الملف الحالي، مثلا ننشأ ملف اسمه macros.twig، ونكتب به ما يلي: {# macros.twig #} {% macro EcoHello( student ) %} Hello {{ student }}! {% endmacro %} ثم عند الرغبة في استخدام هذا الماكرو نستورد الملف على النحو التالي: {% import "macros.twig" as mymacros %} {% if mymacros.EcoHello is defined %} {{ mymacros.EcoHello('Ziad') }} {% endif %} {{ mymacros.EcoHello('Ziad') }} {# output: Hello Ziad! #} كما لا حظنا في المثال السابق يمكن أن نتحقق من وجود شيفرة جامعة قبل استخدامها للتأكد من أنها مُعرَّفة في الملف الذي استوردته. ملاحظة: يمكن كتابة السطر الأول على النحو التالي وذلك يؤدي نفس الهدف: {% from "macros.twig" import mymacros %} المتغيرات العامة هي متغيرات متاحة في جميع قوالب تويع ويمكن أن نضيفها إلى تويغ بعدة طرق أبسطها هو الشكل التالي: $twig = new Twig_Environment($loader); $twig->addGlobal('MyWebsite', 'example.com'); بعد ذلك يمكن استعمال المغير السابق في أي قالب على النحو التالي: {{ MyWebsite }} إنشاء مرشحات مخصصة لإضافة أي مرشح إلى تويغ نقوم بتعديل الملف الذي نستدعيه لتثيبت تويغ أو لإخراج القالب ونضيف المرشح عليه، ويمكنك مراجعة المقال الأول لمعرفة المزيد عن تثبيت تويغ. مثلا في الأسطر الثلاث الأخيرة من الشيفرة التالية سوف نلاحظ أننا قمنا بتعريف مرشح ثم أضفناه إلى تويغ ثم أعطينا الأمر بإخراج المستند المنسق: <?php spl_autoload_register(function ($classname) { $filename = './' . str_replace('\\', '/', $classname) .'.php'; if (file_exists($filename)) require_once $filename; }; require_once 'Twig\Loader\FilesystemLoader.php'; $loader = new Twig\Loader\FilesystemLoader('.'); $twig = new Twig\Environment($loader); $filter = new Twig\TwigFilter('countchars', 'count_chars'); $twig->addFilter($filter); echo $twig->render('template.twig', ['var1' => 'value1', 'var2' => 'value2']); لقد أضفنا مرشح أسميناه countchars يستدعي هذا المرشح دالة PHP موجدة اسمها count_chars وهي تعيد عدد الأحرف في نص ما و لاستدعاء هذا المرشح في ملف تويغ نستعمله مثل أي مرشح آخر قد تم استدعائها في القالب التالي عند كتابة اسم المرشح الذي اضفناه countchars مسبوقا بـ | : {{ 'Ziad'|countchars }} {# output: 4 #} يمكن لإنشاء المرشح استخدام دالة PHP جاهزة أو إنشاء دالة PHP خاصة بنا، ثم إضافتها مثل مرشح في تويغ، أي أن المرشحات في تويغ هي عبارة عن دوال في PHP. قد تكون تلك الدوال مبية في لغة PHP وقد تكون دوال من إنشاء المطور نفسه. إضافة دوال خاصة يمكن بسهول إضافة دالة إلى تويغ بطريقة مشابهة لإضافة مرشح وكمثال يمكن أن نكتب التالي: $function = new \Twig\TwigFunction('SayHello', function () { return 'Hello'; }); $twig->addFunction($function); بعد ذلك يمكن استدعائها في أي قالب على النحو التالي: {{ SyaHello() }} {# output: Hello #} تهدف المرشحات والدوال الخاصة إلى اضافة مزايا إضافية غير متوفرة مباشرة في بنية تويغ بحيث تلبي الاحتياجات للموقع. كلمة الختام لقد تحدثنا في هذا المقال عن تهيئة بيئة العمل في تويغ وعن استخدام الدالة dump في وضع تصحيح الأخطاء ثم انتقلنا إلى كيفية اضافة مرشحات ودوال خاصة بنا إلى تويغ. بهذا القدر من المفترض بك عزيزي القارئ أن تكون قد وصلت فكرة واضحة عن تويغ بحيث يمكن الانطلاق بقوة في العمل مع تويغ وفي حال رغبتك بالمزيد من التفاصيل يمكنك مراجعة الترجمة العربية للتوثيق الرسمي لتويغ في موسوعة حسوب.

سنتعرف في بداية هذا المقال إلى تطبيقات شائعة يُستخدَم فيها محرك القوالب تويغ، ثم سنشرح طريقة استخدام تويغ في ووردبريس كنوع من التطبيق العملي على تويغ. تطبيقات شهيرة تستخدم تويغ يتنوع استخدام تويغ بشكل كبير ولا ينحصر فهو يُستخدم في إطار عمل سيمفوني symfony ويستخدم أيضا في عدد من أنظمة إدارة المحتوى مثل دروبال وبلوت Bolt بالإضافة إلى إمكانية استخدامه في ووردبرس. سيمفوني يُعَدّ سيمفوني symfony أحد إطارات العمل المتكاملة التي توفر العديد من المزايا لمصممي تطبيقات الويب المتكاملة حيث يوفر على المبرمج الوقت والجهد يستخدم سيمفوني تويغ لتوليد قوالب الصفحات. دروبال دروبال Drupal نظام لإدارة المحتوى، ويمكن أن يعمل أيضًا كنظام للتدوين أو كنظام لبناء تطبيقات الويب متكاملة بسبب خصائص عديدة منها المرونة والتصميم الجيد التي يمكن التحكم بها وتطويرها بسهولة. في دروبال تم اعتماد تويغ في تصميم القوالب بدءًا من الإصدار الثامن، لمزيد من المعلومات يمكنك الرجوع إلى هذه الصفحة. بلوت بلوت Bolt هو نظام إدارة محتوى خفيف وقد اعتمد تويغ لتصميم قوالب الصفحات، الفرق بين بلوت و ووردبرس هو أن بلوت لا يستهلك إلا القليل جدا من موارد النظام يمكنك الرجوع إلى هذه الصفحة لمزيد من المعلومات. ووردبرس يعمل ووردبرس على تقديم بيئة سهلة لبناء المدونات ومواقع الويب و يمتاز بغناه بقوالب يمكن من خلالها تعديل مظهره بسهولة ويمكن استخدام تويغ في تصميم وبناء تلك القوالب والتصميمات. تصميم قوالب فرعية في ووردبريس نظرا لشعبية ووردبريس فلقد اخترنا أن ننشئ قالبًا فرعيا في ووردبريس كتطبيق عملي على تويغ ولكن ما هو القالب الفرعي؟ القالب والقالب الفرعي في ووردبريس لنسأل أنفسنا، ما هو القالب في ووردبريس WordPress Theme؟ القالب هو وسيلة لتغيير تخطيط وتصميم موقع الويب الخاص بك، إذ تقوم القوالب بتخصيص مظهر موقعك، بما في ذلك التخطيط والطباعة واللون وعناصر التصميم الأخرى، ويمكن أن يؤدي اختيار المظهر الصحيح إلى جعل موقع الويب الخاص بك أكثر جاذبية وسهولة في الاستخدام وتحسين تفاعل الزوار. في ووردبريس لست مضطرًا لتبدأ من الصفر عند تصميم أي قالب ووردبريس خاص بك، ويمكنك الانطلاق من قالب ووردبرس موجود مع تعديل بعض الصفحات أو الخصائص به بما يناسبك، وهذه التعديلات والإضافات التي تجرى تدخل ضمن ما يسمى بالقالب الفرعي أو الابن WordPress Child Theme. عملية بناء وإنشاء قالب فرعي أي إدخال التعديلات المطلوبة على قالب موجود مسبقًا أسهل بالتأكيد من بناء قالب كامل من لا شيء ويبقى الخيار عائدًا لك أي مرحلة تختار. اتبع الخطوات التالية التي اخترناها لك في هذا المقال لتصميم قالب فرعي خاصة بك: كامل الكود الناتج متوفر للتحميل بشكل مباشر في نهاية المقال من خلال مدير الملفات في خطة الاستضافة الخاصة بك اذهب إلى المجلد الحاوي على ووردبريس ثم انتقل إلى المجلد التالي: /wp-content/themes/ ضمن المجلد السابق أنشئ مجلد فرعيًا وسمه باسم twig-child-theme أو أي اسم تريده بشرط أن لا يحوي مسافات فيه في المجلد السابق أنشئ الملفين التاليين: style.css وfunctions.php أضف أية ملفات أخرى تحتاجها: في مثالنا نحتاج ثلاث ملفات إضافية هي: single.php وsingle.twig وmain-file.twig المحتويات الأساسية لملفات القالب الفرعي: الملف style.css: @charset "UTF-8"; /* Theme Name: Twig Child Theme Template: twentytwentyone Version: 1.0 Text Domain: twig-child-theme */ الملف functions.php: <?php //functions.php add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' ); function enqueue_parent_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' ); } ووردبريس و تويغ لكي نتمكن من استخدام تويغ مع وردبرس يجب تركيب إضافة تسمى Timber تمكنك هذه الإضافة من الاستفادة من الجمع بين وردبريس وتويغ ويمكننا آنذاك كتابة قوالب ووردبريس بواسطة تويع عند تنصيب Timber. يُعَد Timber نافذة وردبرس باتجاه تويغ، حيث يؤمن طريقةً أسرع وأسهل وأكثر فاعلية لبناء قوالب ووردبريس، إذ يساعدك تيمبر Timber على إنشاء قوالب ووردبريس مخصصة بالكامل بسرعة أكبر مع كود أكثر بساطةً و استخدامًا. يؤدي هذا إلى إنشاء كود نظيف وواضح بحيث يمكن لملف PHP التركيز على توفير البيانات، بينما يمكن لملف تويغ التركيز طريقة عرض البيانات. تنصيب تويغ ضمن ووردبريس بعد إضافة تويغ إلى ووردبريس أمرًا أكثر سهولةً من تنصيب تويغ بطريقة منفصلة، فكل ما عليك فعله الانتقال إلى قسم الإضافات في لوحة تحكم ووردبرس ثم اختيار أضف جديد واختيار Timber عند تنصيب الإضافة Timber فيُنصَّب تويغ تلقائيًا كما تؤمن الإضافة Timber العديد من مزايا ربط تويغ بموقع ووردبريس. يرجى ملاحظة أن timber هي إضافة ووردبريس عادية مثل أي اضافة أخرى يمكن تركيبها مثل أي إضافة أخرى وهي متوفرة عبر الرابط التالي Timber. بعد تنصيب الإضافة السابقة لا نحتاج أي أوامر خاصة ولا نحتاج أية إعدادات فتعمل هذه الإضافة مباشرة عند تنصيبها من مدير الإضافات في ووردبرس. بناء القالب الفرعي أي قالب ووردبرس مستقل يجب أن يحوي على الأقل ملفين أساسيين: ملف style.css ملف index.php أما في القوالب الفرعية، فيمكن الاستغناء عن الملف الثاني حيث يُستخدم الملف index.php الموجود في القالب الأب نفسه. عندما يظهر ووردبريس أي صفحة فإنه يبحث في ملفات القالب عن أنسب ملف لعرض تلك الصفحة وفق مبدأ أولية الملفات، يُعَدّ الملف index.php الخيار الأخير حيث يتم اختياره فقط في حال عدم توفر أي ملف أكثر تحديدا وأكثر ملائمةً للمقال. قد يحتوي قالب ووردبريس على ملف مخصص لعرض الصفحات الثابتة وآخر لعرض المقالات وآخر لعرض الأرشيف مثلا عن الرغبة بعرض مقال ما فإن ووردبرس يبحث عن ملف single.php هو يعني مقال مفرد، اختصار للاسم single-post، فإذا وجده استخدمه لعرض المقال أما عندما لا يجده فإنه يبحث عن ملف singular.php وهو يعني مقال أو صفحة ثابتة فإذا وجد الملف singular.php فإنه يستخدمه، أخيرا في حال لم يجد أي من الملفين السابقين فإن ووردبرس يستخدم الخيار الأخير وهو index.php. لقد اصطلح ووردبريس ذلك التسلسل وتلك الأسماء في بنيته الداخلية ويمكن مراجعة ملفات قوالب ووردبريس عبر الرابط التالي WordPress Post Template Files. يسمى المبدأ السابق مبدأ أولوية الملفات في قوالب ووردبرس وبذات الطريقة يمكن الحديث أن أي صفحة في قالب ووردبرس مثلا عند الرغبة بعرض المقالات الموجودة في دليل ما فإن ووردبريس يبحث عن ملف اسمه category.php، فإن وجده استخدمه لعرض المقالات وإن لم يجده يبحث عن ملف اسمه archive.php فإن وجده استخدمه في عرض المقالات وإن لم يستخدمه فإنه يستخدم الملف index.php. لمعرفة تفاصيل أكثر عن ملفات القالب في ووردبرس يمكن زيارة الرابط التالي Template Files Section. يحوي ووردبرس على متغير عام اسمه posts يحوي جميع المقالات الموجود في الدليل أو الأرشيف الحالي ويمكن استخدامه في حلقات for. لسنا مضطرين لإنشاء ملفًا خاصًا بنا لعرض الأرشيف حيث أن غياب الملف في القالب الفرعي يخبر ووردبرس أن عليه أن يستخدم الملف الأصلي في القالب الأب، والهدف الأساسي من القالب الفرعي الخاص بنا هو تعديل طريقة إظهار المقالات الفرعية في قالب محددة لذا سوف يكون عملنا أساسًا على الملف single.php وعدد محدود من الملفات الأخرى. لا يهدف استخدام تويغ إلى الاستغناء كليًا عن PHP، بل يهدف إلى جعل استخدمها في إعداد البيانات وإعطاء الأوامر لمحرك القالب بإظهار البيانات لذا حتى عند استخدام تويغ لابد كتابة عدد محدود من تعليمات PHP لكي نقوم بإظهار قالب تويغ، مثلا أن اكتب الأسطر التالية في ملف single.php الخاص بالقالب الفرعي: <?php /** * file name: single.php * The Template for displaying all single posts */ $context = Timber::context(); $timber_post = Timber::get_post(); $context['post'] = $timber_post; Timber::render( 'single.twig', $context ); أما ملف تويغ single.twig فسوف يحوي تعليمات تويغ التي نريدها لإظهار القالب، وفي مثال على ذلك، لدينا الآتي: {# single.twig #} <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="description" content="{{ site.description }}"> <link rel="stylesheet" href="{{ site.theme.link }}/style.css" type="text/css" /> </head> <body> <article> <h1>{{ post.title }}</h1> <img src="{{ post.thumbnail.src }}"> <div class="article-body"> {{post.content}} </div> </article> </body> </html> في السطر الأول تمت كتابة ملاحظة مع اسم الملف وهي لا تظهر عند إخراج صفحة ويب بل هي مجرد ملاحظة لنا. في السطر التالي من القالب: <meta name="description" content="{{ site.description }}"> تم الطلب من محرك القالب أن يخرج قيمة وصف الموقع حيث لدينا متغير اسم site وهذا المتغير يحتوي على عدة معلومات فرعية أو خصائص منها description ومن أجل وصف الموقع قمنا بكتابة {{ site.description }}. في السطر السابع تم استخدام عبارة مشابهة لإخراج المسار الكامل للقالب الذي نعمل به وربط ملف css بالموقع، وقد تم استخدام الشيفرة {{ post.title }} لإظهار عنوان المقال وبطريقة مشابهة تم إظهار صورة المقال ومحتوياته. قد لا يبدو الأمر بسيطًا ولكنه في الواقع أبسط من استخدام PHP لتحقيق ذات الأهداف كما أنه يحقق مرونة أكبر ويؤمن فصل جيد لملف إظهار الصفحة عن كود تهيئة البيانات مما يعطي سرعة أكبر في الإنتاجية ويسمح لنا باستخدام محررات HTML لتنسيق ملف تويغ بالشكل الذي نريده. الأمر لم ينته لقد بدأنا للتو هناك الكثير يمكن عمله والكثير علينا تعلمه قبل إنشاء قالب ووردبريس بواسطة تويغ. الكتل ووراثة القوالب في تويغ أحد الأمور الرائعة في تويغ هي الكتل Blocks وهي تمكننا من تعريف كتلة ما من القالب ثم إعادة استخدامها في أي مكان نريد سواء في ذات القالب أو في أي قالب مشتق من ذلك القالب. لتعريف كتلة ما نقوم باستخدام الصيغة {% %} التي تخبر محرك القالب أن عليه أن يفعل شيئًا ما وفي حالتنا هو تعريف كتلة محددة. تبدأ كل كتلة بعبارة من الشكل {% block name %} حيث نضع اسم الكتلة بعد الكلمة block، وتنتهي كل كتلة بعبارة {% endblock %}، وتخزن التعليمات داخل الكتلة واستدعائها عند الحاجة. تعمل الكتل ووراثة القوالب بشكل متناغم في تويغ فنحن نقوم عادة بتعريف الكتل في القالب الأب ثم نعدل محتويات الكتلة في القوالب المشتقة منه ويفدينا ذلك بشكل كبير في تقسيم الملفات مما يسهل العمل. فمثلا يُستخدم قالب ووردبريس WordPress theme لعرض مجموعة مختلفة من الصفحات والمقالات والأرشيف لكن لها جميعا بنية متشابه مثل ترويسة الموقع وشريط القوائم والشريط الجانبي وغيرها، نقوم بتعريف البنية الأساسية في قالب تويغ رئيسي ثم ننشئ قوالب تويغ مشتقة منه لكل نوع فرعي. لنطبق ذلك، يمكن تقسيم ملف تويغ الذي ذُكِر بالفقرة السابقة إلى قسمين: الأول الملف الرئيسي ويحوي البنية الأساسية للملفات مع وضع تعريف للكتل في مكانها الصحيح: {# main-file.twig #} <!doctype html> <html> <head> <meta charset="utf-8" /> <meta name="description" content="{{ site.description }}"> <link rel="stylesheet" href="{{ site.theme.link }}/style.css" type="text/css" /> </head> <body> {% block content %}{% endblock %} </body> </html> أما الملف الفرعي الثاني فهو يحوي الإشارة إلى الملف الرئيسي مع تعريف محتويات الكتل فيه: {# single.twig #} {% extends "main-file.twig" %} {% block content %} <article> <h1>{{ post.title }}</h1> <img src="{{ post.thumbnail.src }}" alt="{{ post.thumbnail.alt }}" > <div class="article-body">{{ post.content }}</div> </article> {% endblock %} يفيد هذا التقسيم في اختصار الكتابة كثيرًا، حيث أن ملف تويغ الرئيسي يبقى نفسه سواءً كنا نريد عرض مقال أم أرشيف أم صفحة البحث أو غيرها لكن كتلة المحتويات هي التي تتغير ويكون ملف تويغ المخصص لعرض المقال مختلفًا عن المخصص لعرض أرشيف المقالات. بطريقة مشابهة يمكننا أيضا تعديل الملف achive.php أو أي قسم من قالب ووردبريس الفرعي، لاستخدام القالب الفرعي الذي صممناه ننتقل إلى لوحة تحكم موقع ووردبرس ثم ننتقل إلى قسم المظهر ونختار علامة التبويب قوالب، وإن كنت قد اتبعت الخطوات أعلاه ستجد اسم القالب الفرعي Twig Child Theme في قائمة القوالب المتوفرة لديك ويمكنك النقر على تفعيل القالب أو اختيار معانية له. بهذه الطريقة نكون قد صممنا قالبًا فرعيًا لـ ووردبريس باستخدام تويغ لكن الأمر لم ينتهي هنا بل هذه مجرد بداية يمكنك الانطلاق منها نحو تصميم مميز وفريد وبجودة عالية محققًا لمتطلباتك الخاصة. لمزيد من المعلومات عن الكتل والوراثة في تويغ يمكن زيارة قسم وراثة القوالب في Twig في موسوعة حسوب. الخلاصة لقد تحدثنا في هذا المقال عن تطبيقات شهيرة تستخدم تويغ ثم تحدثنا عن استخدام تويغ مع ووردبرس من خلال الإضافة timber، ثم بدأنا بالتطبيق العملي لتصميم قالب فرعي في ووردبريس باستخدام تويغ كنوع من التطبيق العملي على ما تعلمناه. في المقال القادم سوف نلقي نظرةً على بنية تويغ وطريقة تخصيص بيئة العمل الخاصة به. twig-child-theme-main.zip

يقدم تويغ تقنيات أكثر بكثير مما تم شرحه في المقالين السابقين، مدخل إلى محرك القوالب تويغ Twig، وانطلاقة سريعة مع محرك القوالب تويغ. إذ يتألف القالب في تويغ من أربع فئات أساسية هي: الوسوم والمرشحات والدوال والاختبارات، وهو ما سنتحدث عنه في هذا المقال. الوسوم Tags في تويغ الوسوم في Twig هي الأوامر التي تستخدم في صيغة افعل شيئا ما {% %} وهي بنيات تحكم، تتحكم في طريقة عمل القوالب وسيرها، فيعد كل من if و for التي تحدثنا عنها في المقال السابق انطلاقة سريعة مع محرك القوالب تويغ، نوعًا من الوسوم في تويغ ولكنها ليست الوحيدة المتاحة هناك حوالي 20 وسمًا مختلفًا في تويغ يمكنك الاطلاع عليها في الرابط التالي ولن نتناول كل تلك الوسوم فالهدف من هذه المقالات هو تمكين القارئ من المضي قدمًا في تويغ وليس الإحاطة بكل ما فيه من تقنيات. نذكر أن كل وسم في تويغ يحتاج إلى كتلة إغلاق للوسم وتتكون وتكون كتلة الإغلاق: {% endtag %} حيث تتبع end باسم الوسم دون فراغ. مثلا يحتاج الوسم if إلى كتلة الإغلاق {% endif %} ويحتاج الوسم for إلى كتلة الإغلاق {% endfor %} وهكذا. الوسم set والمتغيرات الداخلية في القالب يمكننا أن نعرف متغير ما داخل القالب نفسه باستخدام الوسم set مثلا في السطر التالي تم تعريف المتغير student، وتم إسناد القيمة ziad له: {% set student = 'ziad' %} Hello {{ student }} {# output: Hello ziad #} يمكن للمتغير أن يكون رقما أو نصا أو مصفوفة، مثل: {% set age = 20 %} {% set colors = ['red', yellow'] %} هناك طريقة ثانية في تويغ لإسناد قيمة للمتغير وهي على النحو التالي: {% set student %} Ziad {% endset %} لاحظ في الطريقة الأولى أننا تضع علامة المساواة بعد اسم المتغير ثم نضع بعدها قيمة المتغير أما في الطريقة الثانية فإننا نغلق تعليمة تعريف المتغير ثم نكتب قيمته ثم نضع عبارة {% endset %}. الوسم include يُستخدَم الوسم include لإدراج محتويات قالب آخر ضمن القالب الحالي مما يتيح لنا تقسيم الملفات أو إعادة استخدام أجزاء منها، فيمكن أيضا إدراج محتويات أي ملف نصي عادي أيضًا وليس فقط ملف تويغ. لنفرض مثلًا أننا نريد أن نكتب صفحات ويب ونريد اختصار الجهد بتفادي كتابة ترويسة html في كل صفحة عندها ننشئ ملف نسميه header.twig: {# file name: header.twig #} <!doctype html> <html> <head> <meta charset="utf-8" /> <title>{{ title }}</title> </head> <body> <h1>{{ title }}</h1> بعد ذلك يمكننا كتابة أي صفحة نريدها على النحو التالي: {# كتابة صفحة بطريقة سريعة #} {% include ‘header.twig’ %} My 1st article </body> </html> يمكننا أيضا أن نمرر متغير إلى ملف الترويسة بحيث نحدد عنوان صفحة ويب: {# تمرير متغير إلى الملف المطلوب إدراجه #} {% include ‘header.twig’ with {'title': 'My 1st page'} %} My 1st article </body> </html> يمكننا أيضا تخزين محتويات الملف في متغير ما، لنفرض أننا قمنا بكتابة وصف عام للشركة في ملف نصي ثم نريد أن نستخدم هذا الوصف كقيمة لمتغير داخلي في قالب تويغ: {# خزن ملف نصي في متغير #} {% set description %} {% include ‘description.txt’ %} {% endset %} {# or #} {% set description = include('description.txt') %} لمزيد من المعلومات عن الوسوم في تويغ يمكن زيارة صفحة الوسوم على موسوعة حسوب. ما هي المرشحات في تويغ تقوم المرشحات في تويغ بمعالجة البيانات قبل عرضها أو قبل إسنادها إلى متغير داخلي أما البيانات نفسها فلا تتأثر محتوياتها وتبقى كما هي، وتستخدم في صيغة أظهر شيء ما {{ }} حيث نضع بعد اسم المتغير | ثم نكتب المرشح المطلوب استخدامه، انظر إلى المثال التالي: {% set student = 'ziad' %} Welcome {{ student|upper }} Hello {{ student }} {# outputs: Welcome ZIAD Hello ziad #} المثال السابق يُستخدم المرشح upper لجعل الأحرف كبيرة قبل إظهار قيمة المتغير name، مع ملاحظة أن القيم المخزنة في المتغير لم تتغير بل بقيت كما هي عندما تم استدعائها مرة ثانية دون المرشح السابق. يمكننا أيضا استخدام الوسم apply للتعامل مع المرشحات على النحو التالي: {% apply upper %} Hello ziad {% endapply %} {# output: HELLO ZIAD #} وباختصار عندما نستدعي أي مرشح في تويغ فإنه يمرر قيمة المتغير ويستخدمه كمدخل لعملية محددة ثم يظهر لنا نتيجة تلك العملية. المرشحات upper وlower وcapitalizes لقد شاهدنا أن المرشح upper يقوم بتحويل النص إلى الحروف الكبيرة بينما المرشح lower يعطي النص مكتوبًا بالحروف الصغيرة أما capitalizes فهو يحول أول حرف من الجملة فقط إلى حرف كبير: {{ 'my first car'|capitalize }} {# outputs 'My first car' #} مرشح التنسيق Format يقوم المرشح format بوضع نص محدد بدلا عن نائب النص s% انظر مثلًا: {{ "Hello student %s"|format('Ziad') }} {# output: Hello student Ziad #} مرشح هروب الأمان Escape يعد من أهم المرشحات حيث يستخدم للتخلص من أية وسوم قد تسبب مشاكل في الإظهار ويفضل استخدامه دوما مع المتغيرات النصية. يمكن اختصار استخدام المرشح escape إلى e حيث يمكن كتابته على النحو التالي: {# escape for Html safty #} <div>{{ description|e }}</div> كما يمكن كتابته على النحو التالي أيضًا: {# escape for Html safty #} <div>{{ description|escape }}</div> يمكن تمرير وسيط للمرشح السابق لتحديد نوع يناسب المكان الذي سوف يظهر به المتغير مثال: {# escape for js safety #} <script> function getDescription() { return {{ description|e('js') }}; } </script> {# escape for css safety #} <style> {{ mystyles|e('css') }} </style> لمزيد من المعلومات عن هذا المرشح وبقية المرشحات، يمكن زيارة توثيق المرشحات في موسوعة حسوب. الدوال في تويغ الدوال في تويغ هي مجموعة من التعليمات البرمجية التي تؤدي مهمة ما ينتج عنها قيمة. يمكن استدعاء الدالة وإعادة استخدامها عدة مرات. نستدعي الدوال عن طريق كتابة أسمائها متبوعة بأقواس، ويمكن أن نمرر لها وسيطًا واحدًا أو أكثر داخل تلك الأقواس وذلك بهدف تمرير المعلومات إلى الدالة. كمثال الدالة range تعيد مصفوفة تحتوي على أعداد صحيحة محصورة بين رقمين: {% for i in range(0, 3) %} {{ i }}, {% endfor %} {# outputs 0, 1, 2, 3, #} عند استدعاء الدالة السابقة نقوم بتمرير ثلاث وسطاء لها، الوسيط الأول هو بداية المجال والثاني نهاية المجال وأما الوسيط الثالث فهو الخطوة أو الفارق بين رقمين في المجال وهو اختياري. الوسم والدالة block في تويغ يمكن أن يكون لدينا دالة لها ذات الاسم المستخدم للوسم، فالكلمة block في تويغ قد تشير إلى الوسم block، كما قد تشير إلى الدالة block ويمكن التمييز بين الحالتين بسهولة عبر المثال التالي: <html> <head> <title> {% block title %} Hello Twig {% endblock %} </title> </head> <body> <h1>{{ block('title') }}</h1> </body> </html> نلاحظ أن الوسم يكون ضمن صيغة افعل شيئا ما {% %} ويستخدم لتعريف الكتلة وتحديد محتوياتها بينما الدالة تكون ضمن صيغة أظهر شيئا ما {{ }} يتم اتباعها بقوسين يوجد بينهما وسيط يمرر للدالة حيث تستخدم الدالة block لإظهار محتويات كتلة سبق أن تم تعريفها بالوسم block. المرشح والدالة date يقوم المرشح date بتغير تنسيق التاريخ عند إظهار قيمة متغير ما حسب الصيغة المعطاة له {{ birth|date("m/d/Y") } أما الدالة date فإنها تعيد التاريخ الحالي عند استدعائها بدون وسطاء: {{ date() }} {# تظهر التاريخ الحالي #} يمكن أن تمرر وسيط للدالة date ويمكن لقيمة الوسيط أن تكون تعبير نصي عن التاريخ مثلا النص "2022/01/01" يحول إلى التاريخ المقابل له كما يمكن أن يكون فرق بالتاريخ عن التاريخ الحالي: {{ date('2022/01/01') }} {# تعيد التاريخ المحدد 2022/01/01 #} {{ date('-2days') }} {# تعيد التاريخ الحالي مطروح منه يومين #} يمكن أن نمرر لها وسيطين حيث يحوي الوسيط الثاني على المنطقة الزمنية التي سوف يكون التاريخ فيها: {{ date('-2days', 'Europe/Paris') }} يمكن موازنة التواريخ المعادة بواسط تعبير شرطي: {% if post.date > date('-30days') %} This is a new post {% endif %} الفرق بين المرشح والدالة تتصف المرشحات في تويغ بالخصائص التالية: المرشحات مخصصة لمعالجة البيانات المرشح يعيد قيمة دوما القيمة التي يعيدها المرشح تكون نص دومًا يأخذ المرشح وسيط واحد أو أكثر يكتب الوسيط الأول قبل المرشح ويوضع بينهما | مثال: {{ student|upper }} عندما يحتاج إلى وسيط واحد لا يتم إتباعها بأقواس عندما يحتاج أكثر من وسيط يتم اضافة قوسين بعد اسم المرشح مع وضع الوسيط بينهما {{ description|escape('html') }} يرجى ملاحظة أن الوسيط الأول هو المتغير نفسه الذي يأتي قبل علامة | أما ما بين ' ' فهو الوسيط الثاني. أما الدوال، فتتصف بالخصائص التالية: الدوال مخصصة لإعادة قيمة غير مرتبطة بالبيانات عادة يمكن أن تكون القيمة تعيدها الدالة نصا أو رقما أو تاريخا أو مصفوفة الدوال في تويغ تعيد قيمة دوما وهذا يختلف عن تعريف الدوال في لغات البرمجة يمكن للدوال أن لا تأخذ أي وسيط ويمكن أن تأخذ وسيط واحد أو أكثر حتى عندما لا تأخذ الدالة أي وسيط فإنها تتبع بأقواس {{ date() }} عندما تحتاج الدالة إلى وسيط واحد أكثر فإنها تمرر إليها بين الأقواس: {% set list = range(1, 6) %} الاختبارات في تويغ الاختبارات في تويغ هي عبارة عن عوامل تختبر قيمة متغير ما وتستخدم على النحو التالي: {% if line is odd %} ....... {% endif %} حيث تستخدم مع عبارة is و تتحق من كون المتغير يحقق شرط محدد والاختبارات المعرفة مسبقا في تويغ هي: defined, divisible by, even, iterable, odd, same as لمزيد من المعلومات عن الاختبارات يمكن الرجوع إلى صفحة الاختبارات في موسوعة حسوب. ختامًا لقد تحدثنا في هذا المقال عن مكونات تويغ من وسوم ومرشحات ودوال واختبارات وهي المكونات الأساسية التي يقوم عليها القالب، وفي المقال القادم سوف نقوم بالتطبيق العملي على ما تعلمناه حيث نتعلم إنشاء قالب فرعي لووردبرس باستخدام تويغ.

سوف نتحدث في هذا المقال عن طريقة تثبيت تويغ وعن الصيغ الثلاث المستخدمة في بناء قوالب تويغ بالاضافة إلى عدد من المفاهيم الأساسية متطلبات تويغ للعمل يمكن استعمال بيئة عمل سحابية على الويب أو بيئة عمل محلية على الحاسوب مباشرة: على استضافة ويب: تحتاج إلى خطة استضافة تدعم تشغيل PHP وأن يكون الإصدار المركب فيها 7.3 أو إصدار أعلى تقريبا جميع الاستضافات تدعم ذلك بما في الاستضافات المجانية. على الحاسوب المحلي: إن كنت سوف تستخدم استضافة فلست بحاجة لتركيب أي شيء على حاسوب محلي لكن يمكن أن تجعل من كمبيوترك المحلي مخدم ويب وتركيب عليه تويغ وفي هذه الحالة تحتاج إلى خادم ويب يدعم PHP مثلًا XAMPP لمزيد من المعلومات يمكن الرجوع إلى المقال التالي. تثبيت تويغ يتوفر خياران لتثبيت تويغ وهو إما التثبيت المباشر من خلال تنزيله وتركيبه يدويًا أو من خلال كومبوزر composer وسنشرح كلا الطريقتين تاليًا. التثبيت المباشر تحميل الإصدار الأخير من تويغ وذلك من خلال الرابط التالي أو من خلال GitHub فك المجلد المضغوط السابق على الحاسوب المحلي ثم افتح المجلد الناتج وهو Twig-3.x في حالتي الآن أثناء كتابة المقال في داخل المجلد السابق يوجد مجلد اسمه src أعد تسميته إلى Twig ثم قم برفعه إلى المجلد العام www أو public_html في الاستضافة الخاصة بك. في المجلد public_html لموقعك أنشئ ملفًا باسم index.php وأضف له النص التالي ini_set('display_errors',1); # comment if you do not need debugging spl_autoload_register(function ($classname) { $dir = '.'; $filename = $dir . str_replace('\\', '/', $classname) .'.php'; if (file_exists($filename)) require_once $filename; }); require_once '\Twig\Loader\FilesystemLoader.php'; كل ما سبق من خطوات يمكن اختصارها في حال التركيب من خلال composer التثبيت بواسطة composer ثبت Composer وشغل الأمر التالي في الطرفية من أجل الحصول على الإصدار الأخير: composer require "twig/twig" البدء باستخدام تويغ أصبح تويغ جاهز الآن ويمكنك تجريبه بالشكل التالي، أضف السطور التالية على ملف index.php الذي أنشأته عند تركيب تويغ بدون استخدام composer أو على ملف index.php فارغ في حال استخدام composer: $loader = new \Twig\Loader\FilesystemLoader('.'); $twig = new \Twig\Environment($loader); echo $twig->render('template1.twig', [‘name’ => 'سامر']); في ذات المجلد public_html أنشئ ملفًا آخر باسم template1.twig واكتب العبارة التالية فيه: مرحبا بالطالب المجد {{ name }} لا بد أنك عزيزي القارئ تود رؤية مثال عن قوالب تويغ وتتساءل كيف يمكن أن ننطلق باستخدام تويغ في الواقع إن نموذج بسيط للقالب قد تم إيراده بالفعل في أعلى المقال دون أن نحتاج أن نقدم شرح له: مرحبا بالطالب المجد {{ name }} لاحظ أن الأقواس المربعة قد استخدمت للتعبير عن وجود متغير في القالب فقراءة قوالب تويغ سهلة للغاية ويمكن فهم الكثير من قوالب تويغ بسهولة. في الواقع ليس من الضروري أن تعلم كل شيء عن تويغ قبل الانطلاق باستخدامه يكفي في البداية أن تتعلم الأساسيات فقط ثم توسع مدى معرفتك بالتدريج بعد ذلك والهدف من هذا المقال هل جعلك تمتلك تلك الأساسيات التي تمكنك من الانطلاق والبدء باستخدام تويغ. بنية قالب تويغ وصيغ التعبيرات فيه لفهم تويغ يتوجب علينا معرفة دلالة ثلاث صيغ فقط هي {{ }}، {% %}، {# #} سنشرحها بالترتيب: 1- صيغة إخراج المتغيرات وإظهار النتائج الصيغة الأولى المهمة من صيغ Twig التي عليك تعلمها هي: {{ }} تستخدم هذه الصيغة لإظهار نتيجة ما للمستخدم مثلا قيمة متغير أو ناتج دالة ما. المتغيرات في القالب هي أي شيء تريد تريد تبديله حسب إدخالات المستخدم أو حسب البيانات المقدمة للقالب يمكن أن يكون عنوان المقال أو اسم المستخدم أو رقم هاتفه أو أي شيء آخر. لإخراج أي متغير في القالب يكفي أن يتم وضع اسم المتغير بين قوسين مقوسين على النحو التالي: {{ name }} {{ foo.bar }} انتبه من المثال أنه يمكن استخدام النقطة (.) للوصول إلى عناصر المصفوفة أو خصائص كائن ما. لمعرفة المزيد عن المتغيرات في تويغ يمكن زيارة قسم المتغيرات من صفحة محرك تويغ لمصممي القوالب في موسوعة حسوب. 2- صيغة التعليقات من المهم في كثير من الأحيان أن نكتب ملاحظة لكننا لا نريدها أن تظهر في المستند المنسق ولتحقيق ذلك يكفي أن نكتب تلك الملاحظة أو التعليق بالصياغة التالية: {# ملاحظة #} لمعرفة المزيد عن الملاحظات في تويغ يمكن زيارة قسم التعليقات من صفحة محرك تويغ لمصممي القوالب في موسوعة حسوب. 3- صيغة افعل شيئا ما يستخدم التركيب التالي: `{% ...... %} للطلب من محرك القالب القيام بشيء محدد مثل التحقق من شرط ما أو تنفيذ تكرار ما. لا يظهر التركيب السابق نتائج للمستخدم لفم التركيب السابق بشكل جيد سوف نأخذ مثالين هما if و for. الشروط والحالات الشرطية لنعد إلى مثال الطالب المجد بالتأكيد لقد حصل على علامات مرتفعة، لذا يتوجب علينا اختبار علامته قبل إظهار رسالة الترحيب به. بين التعبيرين السابقين يتم وضع ما نريد عرضه عند تحقق الشرط وإليك مثال عنه: {# كل شرط يبدأ بالتركيب التالي #} {% if mark > 90 %} Hello smart student {{ name }} {# كل شرط ينتهي بالتركيب التالي #} {% endif %} {# لاحظ أن العبارة الأخيرة هي كلمة واحدة #} في السطر الأول يتحقق تويغ من علامة الطالب التي يمثلها المتغير mark فإن كانت أكثر من 90 فإنه ينتقل للسطر التالي حيث يظهر رسالة الترحيب أما السطر الأخير endif فهو يغلق الشرط. كما أنه يمكن أن تتحقق عبارة if في Twig مما إذا كان للمتغير قيمة ما حيث يمكننا إضافة شروط لعرض أي نص. لنفترض أن لدينا متغيرا باسم agent ونريد عرض نص عندما يحتوي على نص، يمكننا تمثل ذلك بالمثال التالي: {% if agent %} We have an agent in your area Our agent: {{ agent }} {% endif %} مثال آخر؛ دعنا نقول أن لدينا متغير يسمى السعر. نريد عرض نص إذا كان السعر صفرًا. {% if price == 0 %} This product is free {% elseif price > 10 %} This product is cheap {% else %} You have to pay {{ price }} {% endif %} يرجى ملاحظة أننا نستخدم العامل التالي == للتحقق من المساواة وأننا يمكننا التحقق من أكثر من حالة للشرط باستعمال elseif ووضع حالة أخيرة للشرط إن لم تتحقق أي حالة من الحالات السابقة عبر else. استخدم دائمًا {% endif %} لإغلاق شرط if السابق، فكل عبارة if يجب أن تغلقها عبارة endif. للمزيد من المعلومات عن استخدام اطلع على صفحة الوسم if في توثيق تويغ العربي. الحلقات التكرارية وتكرار أمر ما إذا كان حقلنا أو متغيرنا عبارة عن مصفوفة فيها عناصر أو أي نوع بيانات لديه عناصر يمكن المرور عليها واحدة واحدة، فيمكننا تنفيذ أمر ما أو عرض معلومة ما لكل عنصر من تلك العناصر باستخدام for كما في المثال التالي: {% for name in names_list %} Hello: {{ name }} {% endfor %} حيث names_list هو اسم المصفوفة أما name فهو اسم تم إطلاقه على كل عنصر من عناصر المصفوفة. في السطر التالي يتم تنفيذ الأوامر التي بين for وبين edfor على كل عناصر المصفوفة وبالتالي في مثالنا السابق تظهر عبارة ترحيب لكل اسم من الأسماء التي تحتويها المصفوفة، أما السطر الأخير فهو لإغلاق الحلقة وإعلام محرك القالب أن عليه المتابعة بشكل اعتيادي لباقي تعليمات القالب اي أن التعليمات التي تأتي بعد {% endfor %} لن تكون خاصة بالحلقة. كل عبارة for يجب حتما أن تنتهي بعبارة {% endfor %} ويرجى ملاحظة أن endfor هي كلمة واحدة وليس كلمتين. ماذا بعد؟ بالتأكيد هذا ليس كل شيء في تويغ فهناك الكثير لكن بهذا القدر البسيط من المعلومات يمكنك الانطلاق مع تويغ والبدء بكتابة قالب ما وتجربته. إن كنت قد وصلت إلى هذه النقطة بشكل متسلسل فيفترض أنك أصبحت مستعدا لكتابة قالبك الأول وتجربته عمليا نقدم لك فيما يلي نموذج لقالب تويغ لعرض قائمة منتجات مع سعرها: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Products</title> </head> <body> <h1>Products</h1> {# This is a comment and will not render #} {% for product in products %} Product name: {{ product.name }}<br> {% if product.price == 0 %} Free {% else %} Procust price {{ product.price }} {% endif %} {% endfor %} </body> </html> الخلاصة لقد تحدثنا في هذا المقال عن طريقة تثبيت تويغ مع وبدون استخدام composer ثم انتقلنا إلى بنية قالب تويغ وصيغ التعبيرات فيه: صيغة إخراج المتغيرات وإظهار النتائج، صيغة التعليقات و صيغة افعل شيئا ما ثم تحدثنا عن العبارات الشرطية وعن حلقات التكرار في المقال التالي سوف نتعمق أكثر ونتحدث عن الوسوم، المرشحات، والاختبارات.

لا نهدف في هذه المقالات إلى ترجمة الموقع الرسمي لمحرك قوالب Twig والتي تجدها في موسوعة حسوب، توثيق Twig، لكننا نهدف إلى توليد فهم عميق وبسيط لهذه التقنية يمكنك من الاستفادة القصوى منها، بحيث يكون مفيدًا للمبتدئين وممتعًا للمتقدمين. مفهوم محرك القالب وعمله معالج القوالب المعروف أيضًا باسم محرك القوالب template engine، هو وسيلة لأتمتة إنشاء المستندات بما في ذلك صفحة الويب، حيث تسمح أنظمة الأتمتة بتقليل إدخال البيانات إلى الحد الأدنى، وكذلك تقليل الوقت الذي يستغرقه إنشاءها أو تعديلها، وتقليل المخاطر المرتبطة بالخطأ البشري. من أهم الفوائد الناتجة عن استخدام محرك القالب هو جعل جملة من المستندات أو صفحات الويب ضمن فئة واحدة بحيث يؤدي تعديل القالب إلى تعديل كامل المستندات المنسقة المرتبة به. كما يمكن أن نعرف محرك القوالب الخاص بصفحات الويب على أنه أسلوب يمنح المطورين القدرة على فصل HTML / CSS عن الكود المنطقي للتطبيق لصفحة ويب مثلًا كود PHP. لتوضيح الصورة عن عمل محرك القالب، لنفرض أن لدينا عشرة طلاب نريد أن نرسل لكل منها رسالة ترحيب على النحو التالي: نسمي العبارة السابقة بالقالب نسمي أسماء الطلاب المتمثلة بالحقل name بالبيانات أما عبارات الترحيب الناتجة فهي المستند المنسق وأخيرًا فإن محرك القالب هو البرنامج الحاسوبي الذي قام بدمج القالب السابق مع البيانات والتي هي أسماء الطلاب في مثالنا حيث يتم استبدال اسم الطالب في موضعه حسب الحاجة. ناتج القالب السابق إن كان لدينا قائمة باسمي طالبين ما يلي: مرحبا بالطالب المجد سامر مرحبا بالطالب المجد زياد وهكذا بحيث يختلف الاسم تبعا لبيانات المقدمة للقالب. أشهر محركات القوالب المستخدمة في برمجة صفحات الويب لا ينحصر مجال عمل محركات القالب في الويب، وفي الواقع يمكن أن تشمل أي نص أو رسم يمكن توليده وتنسيقة سواء كانت صفحة كتاب أو إعلان بسيط. تؤمن لغة البرمجة بي إتش بي PHP آليات سهلة لمعالجة القوالب حيث يمكن كتابة القالب بلغة PHP على النحو التالي مثلًا: Hello student <?php echo $student; ?> بالرغم من كون PHP تؤمن خصائص محرك القالب إلا أنها من النادر أن تستخدم لهذا الغرض من قبل المبتدئين وينحصر استخدامها من قبل من يتقن تلك اللغة. لقد تنوعت التقنيات وتقدمت كثيرا ويوجد الكثير من محركات القوالب سوف نذكر أشهر محركات القوالب: سمارتي Smarty: محرك قالب شهير سهل التركيب مكتوب بلغة PHP وهو يأتي في المرتبة الثانية بعد تويغ من حيث شيوع الاستخدام بليت Plates: محرك قالب له طريقة كتابة معقدة بعض الشيء وهو أقل قابلية للقراءة من قبل المبتدئين فولت Volt: محرك قالب مكتوب بلغة سي وطريقة كتابة القالب به تشبه تويغ تويغ Twig محرك قالب سريع ومرن وشائع جدا مكتوب بلغة بي اتش بي الفرق بين محرك القالب والقالب ولغة القالب نود أن نوضح شيئا مهما يوضح الفرق بين المفاهيم المتداخلة، محرك القالب والقالب ولغة القالب: محرك القالب templating engine هو برنامج كتبته الشركة التي صممت محرك القالب ويمكن تحميله من الموقع الرسمي للشركة. القالب template هو أوامر التنسيق أو الإخراج التي التي نكتبها نحن ونقدمها إلى محرك القالب مثلا الملف single.twig يدعى قالب. لغة القالب template syntax فهي طريقة الكتابة التي يطلب منا محرك القالب الالتزام بها ليفهم ما نكتبه. أي القواعد التي علينا مراعاتها عند كتابة القالب مثلا طريقة اخراج المتغيرات وطريقة استدعاء الدوال والمرشحات وغيرها من التقنيات التي يوفرها القالب مثلا يمكن القول بأن لغة القالب فولت تشابه كثيرا لغة القالب تويغ. لكل محرك قالب طريقة خاصة به لكتابة القوالب عادة تسمى باسم محرك القالب نفسه ونحن هنا لا نقصد لاحقة الملف بل نقصد طريقة الكتابة ضمن الملف نفسه أي template syntax. تعريف تويغ Twig ومزاياه يُعَدّ تويغ Twig محرك قالب مجاني، مفتوح المصدر، سريع، آمن، مرن وسهل التعلم وهو مبني على لغة PHP ويتم استخدامه بشكل أساسي لإخراج صفحات HTML، ولكن يمكن استخدامه أيضًا لإخراج أي تنسيق نصي آخر. ويعتبر تويغ Twig مكون مستقل يمكن دمجه بسهولة في أي مشروع PHP، ويتمتع تويغ Twig بالمزايا التالية: السرعة قد يتبادر إلى الذهن أن استعمال قوالب تويغ Twig سوف يبطئ صفحة ويب مقارنة باستخدام PHP لكن في الواقع هذا غير صحيح لأن تويغ يقوم يتصريف أو ترجمة القالب إلى لغة بي إتش بي ثم ينفذ الكود الناتج مباشرة. لا يكتفي تويغ بترجمة الكود إلى PHP بل يقوم بعدد من عمليات تحسين صياغة الكود بهدف زيادة السرعة في التنفيذ. الحفاظ على البيانات عندما يستخدم مصمم السمة أو pack end تويغ فإنه يمكن من المسؤول عن شكل الموقع أو front end أن يقوم هو بتعديل القوالب حسب ما يراه مناسبا دون المخاطرة بالبيانات حيث أن التعليمات المكتوبة في قوالب تويغ تكون آمنة وهي تستخدم لقراءة البيانات وإظهارها وليس لتعديلها لا للتعليمات الخطرة والأخطاء الحرجة يمنحك تويغ أمانا إضافيا مقارنة باستخدام PHP مباشرة حيث أن التعليمات المتاحة في قوالب تويغ لا يمكنها أن تتسبب في انهيار الموقع. هل توقف موقعك عن العمل نتيجة كود بي اتش بي خاطئ؟ يحتوي Twig على وضع صندوق الاختبار (Sandbox) من أجل تقييم شيفرات القوالب غير الموثوق بها قبل تنفيذها. شيوع الاستخدام عندما نتعلم تقنية ما فمن المهم أن نكون قادرين على استخدامها في مجالات شتى وهذا يؤمنه تويغ بسهولة فهو مستخدم في الكثير من المشاريع مفتوحة المصدر والكثير من أطر العمل على سبيل المثال: Symfony وDrupal8 وphpBB وLaravel. بالإضافة إلى إمكانية استخدامه في تصميم قوالب وردبرس وهذا ما سوف نتطرق له كمثال عملي لاحقا المرونة ودعم الوراثة يتمتع تويغ بالمرونة حيث أنه من السهولة توسيع عمل تويغ وإضافة فلاتر أو دوال له كما يدعم الوراثة فإذا كان لدينا قالبان متشابهان فيمكن أن لا نحتاج كتابة كلا القالبين يكفي أن نكتب أحدهما ثم نكتب الفروق في القالب الثاني بحيث يمكن أن يكون القالب الابن مجرد تعديل بسيط للقالب الأب. مقارنة بين تويغ ومحركات القوالب الأخرى سوف نقوم بمقارنة محركات القالب من حيث سهولة الاستخدام وشيوع محرك القالب وسرعة التنفيذ سهولة القراءة والتعلم يحتل تويغ و فولت المنزلة الأولى في سهولة القراءة حيث أن لهما ذات المعايير في كتابة القالب يليه سمارتي وأخيرا PHP وبليت وكمثال عن طريقة إخراج متغير: {# Twig #} {{ name }} volt {# volt #} {{ name }} smarty {* smarty *} {$name} <?php echo $name; ?> <!-- plate --> Hello <?=$this->e($name)?> كلما كان بناء القالب بسيطا وأقرب إلى اللغة العامة كانت سهولة العلم أسرع وكما نلاحظ من المثال أعلاه فنلاحظ أن استخدام تويغ لا يتطلب إضافة أحرف خاصة لـ اسم المتغير على عكس باقي محركات القالب. الاستخدام الشائع بين المطورين بهدف اختبار شيوع استخدام كل من محركات القالب الثلاث، فقد تمت موازنة ترتيب أليكسا للموقع الرسمي لكل من محركات القالب باستثناء PHP؛ أما بالنسبة إلى PHP، فإن شهرتها باعتبارها لغة برمجة تجعل ترتيب موقعها في أليكسا لا يعطي انطباعًا صحيحًا عن مدى شهرتها كمحرك قالب يقيم إليكسا المواقع بالاعتماد على مدى شيوعها وعدد الزوار شهريا للموقع فمثلا يحتل غوغل الرقم 1، وكلما كان عدد زوار الموقع أكبر كان ترتيب الموقع أقل وبمعنى آخر هناك 56000 ألف موقع تتفوق على سمارتي من حيث عدد الزوار أما بالنسبة لموقع تويغ الرسمي فهناك 13000 موقع فقط تتفوق عليه من حيث عدد الزوار أما تقيم alexa فأن الموقع الرسمي لـ تويغ يحتل فهر يسبق جميع محركات القالب المذكورة حيث كان 13000 بينما يحتل سمارتي المركز الثاني 56000. في المنزلة قبل الأخيرة تأتي فولت بتقييم 127000 أما محرك القالب بلوت فكان له التريب التالي في إليكسا وهو أقل محركات القوالب السابقة شيوعا بتقييم 1,600,000. السرعة عند الاستخدام تقوم محركات القالب بتوليد شيفرة PHP مقابل للقالب ثم تقوم تنفيذ الشفرة الناتجة مما يجعل سرعة الأداء متقاربة. لقد تم الرجوع إلى الموقع المختص بمقارنة الأداء phpbenchmarks.com فكانت سرعة الإصدار الأخير من محركات القالب الشهيرة متقاربة جدا عند عند استخدامها مع الإصدار 7.3 من PHP. سهولة التركيب في هذه النقطة تتفوق سمارتي Smarty على Twig حيث يتم تركيب سمارتي بصفته مكون مستقل أما تويغ طريقة تنصيبه الرسمية تتضمن استعمال composer وعادة ما يكون جزءًا من مشروع آخر . لكن في المقال التالي سوف نقوم بتقديم طريقة سهلة لتركيب تويغ بشكل مستقل وبدون استخدام composer بحيث يصبح الفرق أقل أهمية. أما PHP فهي لا تحتاج إلى أي تركيب حيث تكون ممكنة مسبقًا على مختلف مواقع الويب المبنية فيها. كلمة أخيرة تتنوع محركات القوالب كثيرا و في العصر الحالي تحتل الإنتاجية وسرعة الأداء أهمية بالغة وهذا ما يوفره Twig، كما يسهل استخدام Twig الحصول على كود نظيف واضح وبسيط يسهل صيانتها عند الحاجة. بحيث نركز في القالب على الشكل العام للمستند المنسق وعلى بناء المستند. لقد تطرقنا في هذا المقال إلى مدخل سريع عن تويغ وتم بيان عدد من مزاياه مثل السرعة والحفاظ على البيانات وغيرها كما أجرينا مقارنة بين عدد من محركات البحث وفي النهاية قمنا بشرح الفرق بين محرك القالب والقالب ولغة القالب وفي المقال الثاني سوف نقوم بانطلاقة سريعة مع تويغ تهدف إلى تعريفنا بمتطلبات العمل وبطريقة تثبيت تويغ مع لمحة سريعة عن طريقة استخدامه.