انتقل إلى المحتوى
مساحة عربية للمعرفة والأدوات اليوميةتعرّف على مواضيع
البرمجة

محرك القوالب تويغ أسرع

أبلغ عن هذا المحتوى
في هذه الصفحة
  1. مقدمة
  2. 1 | لماذا Twig؟ الأسس الفلسفية وخريطة الميزات
  3. 2 | خطوات الانطلاقة السريعة
  4. 3 | جدول مقارنة بين Twig و PHP «المضمن» (Inline PHP)
  5. 4 | التعمق في المحرك: دورة الحياة من القالب إلى الإخراج
  6. 5 | أفضل الممارسات للإنتاج
  7. 6 | نصائح SEO متقدمة مع Twig
  8. 7 | الأمان: ما وراء الهروب التلقائي
  9. 8 | توسيع Twig: إنشاء مرشّح مخصّص
  10. 9 | استخدام Twig خارج PHP: محركات CMS وأطر عمل أخرى
  11. 10 | دراسة حالة: ترقية بوابة إخبارية من Smarty إلى Twig في 14 يومًا
  12. خاتمة

مقدمة

يشكّل محرك القوالب «تويغ» (Twig) أحد أعمدة منظومة التطوير في عالم PHP المعاصر، حيث يوفّر طبقةَ عرضٍ مرنة وآمنة وقوية، تفصل المنطق البرمجي عن واجهة المستخدم، وتُيسّر على المطوّر إنجاز التطبيقات بسرعة مع الحفاظ على نظافة الشيفرة وقابليتها للتوسّع.

سنخوض في هذا المقال الموسّع رحلةً شاملة تبدأ بمفاهيم التهيئة السريعة لـ Twig وتصل إلى أعماق آلياته الداخلية، مرورًا بأفضل الممارسات، واستراتيجيات الأداء والحماية، وأمثلة تفصيلية تبرز قدرته على تلبية حاجات المشاريع الصغيرة والمؤسساتية على حدّ سواء. يمثّل هذا الدليل حصيلة أحدث التوصيات الهندسية حتى مايو 2025، ويستند إلى التوثيق الرسمي ومجتمع Symfony وخبرات ميدانية متراكمة.


1 | لماذا Twig؟ الأسس الفلسفية وخريطة الميزات

1.1  فصل الاهتمامات (Separation of Concerns)

يرتكز تصميم Twig على مبدأ فصل طبقة العرض (View) عن منطق التطبيق، ما يُفضي إلى:

  • قابلية صيانة أعلى: يستطيع فريق التصميم تعديل القوالب دون خشية تعطل الوظائف الخلفية.

  • إعادة استخدام المكوّنات بسهولة: أجزاء الواجهة تُحوّل إلى وحدات مستقلة يمكن استدعاؤها في صفحات متعددة.

  • أمان مُدمج: يمنع Twig تمرير أوامر PHP مباشرةً داخل القوالب، ويطبّق الهروب التلقائي (auto‑escaping) لإحباط هجمات XSS.

1.2  بنية نحوية شبيهة بكتابة البشر

يعتمد Twig ثلاثة أنواع من المحددات:

التعبير الغاية مثال
{{ }} طباعة المتغيّرات أو ناتج الدوال {{ user.name }}
{% %} تعليمات التحكم (حلقات، شروط) {% for post in posts %}
{# #} تعليقات لا تُعرض {# هذا تعليق #}

تمنح هذه الصيغة انسيابية قراءة قريبة من لغة Markdown وتُبعد التشويش الناتج عن وسوم PHP المضمنة في ملفات HTML التقليدية.

1.3  نظام توريث القوالب (Template Inheritance)

يمكن بناء قالب رئيسي يحتوي على الهيكل العام (رأس الصفحة، شريط التنقّل، تذييل)، ثم يُنشئ المطوّر قوالب فرعية تورِّث هذا الهيكل وتملأ كتلًا محدَّدة (blocks) بالمحتوى الفريد لكل صفحة؛ ما يختصر الوقت ويضمن اتساق الهوية البصرية.

1.4  الامتدادات (Extensions) والمرشِّحات (Filters)

يوفّر Twig مكتبة واسعة من المرشِّحات مثل |upper, |date, |length، كما يتيح إنشاء مرشّحات ودوال مخصّصة لتلبية متطلبات الأعمال، مثل تنسيق أرقام الفواتير أو تحويل العملات.


2 | خطوات الانطلاقة السريعة

2.1  التثبيت عبر Composer

bash
composer require twig/twig:^3.8

تُعدُّ السلسلة 3.x الأحدث حتى تاريخ كتابة هذا الدليل، وتُقدِّم تحسينات على الأداء عبر محرّك PhpToken وإلغاء أوامر منزوعة الصلاحية.

2.2  تهيئة بيئة العمل الأساسية في خمس دقائق

php
use Twig\Environment; use Twig\Loader\FilesystemLoader; $loader = new FilesystemLoader(__DIR__.'/templates'); $twig = new Environment($loader, [ 'cache' => __DIR__.'/var/cache/twig', 'debug' => true, // إيقاف في الإنتاج 'auto_reload' => true, // يعيد تجميع القوالب عند التعديل ]); echo $twig->render('home.html.twig', [ 'title' => 'مرحبًا بكم', 'posts' => $repository->latest(10), ]);
  • FilesystemLoader يخبر Twig بمكان القوالب.

  • مجلد cache يُخزّن الملفات المحوَّلة إلى PHP لتحسين السرعة.

  • الخيار auto_reload يُجنِّبك مسح ذاكرة التخزين يدويًّا أثناء التطوير.

2.3  إنشاء أول قالب

twig
{# templates/base.html.twig #}
{% include 'partials/navbar.html.twig' %}
{% block body %}{% endblock %}
{% include 'partials/footer.html.twig' %}

ثم:

twig
{# templates/home.html.twig #} {% extends 'base.html.twig' %} {% block title %}{{ title }}{% endblock %} {% block body %}

{{ title }}

    {% for post in posts %}
  • {{ post.title|e }}
  • {% else %}
  • لا توجد مقالات بعد.
  • {% endfor %}
{% endblock %}

3 | جدول مقارنة بين Twig و PHP «المضمن» (Inline PHP)

المعيار Twig PHP Inline
القابلية للقراءة عالية بفضل الصيغة الشبيهة بالوسوم منخفضة عند تشابك HTML مع PHP
الأمان الافتراضي هروب تلقائي للمتغيّرات يتطلب استدعاء htmlspecialchars يدويًّا
الأداء عند التفعيل يترجِم القوالب إلى PHP مُخبّأ يعتمد على تنظيم المطوّر
قابلية الاختبار يدعم عزل طبقة العرض بسهولة صعوبة اختبار HTML+PHP المختلط
صيانة التصميم نظام توريث يجعل التعديلات موحَّدة تحديث كل ملف على حدة

4 | التعمق في المحرك: دورة الحياة من القالب إلى الإخراج

  1. التحميل (Loading): يستدعي FilesystemLoader القالب من القرص.

  2. التحويل إلى نص PHP: يحوّل Twig العلامات إلى أوامر PHP مكافئة، مع تضمين عمليات الهروب.

  3. التجميع (Compilation): يُخزن ملف PHP الناتج في مجلد «cache».

  4. التنفيذ (Execution): عند الاستدعاء اللاحق، يُشغّل الملف المخبّأ مباشرة دون تمرير بطيء على محلل Twig، مما يزيد الأداء.

تشير اختبارات Symfony Profiler إلى أن تفعيل ذاكرة التخزين يقلّل زمن التجاوب بنسبة قد تصل إلى 60 ٪ في الصفحات ذات القوالب الثقيلة.


5 | أفضل الممارسات للإنتاج

5.1  تعطيل الوضع debug

أثناء الإطلاق إلى الخادم الحيّ، اضبط:

php
$twig = new Environment($loader, [ 'cache' => '/path/to/cache', 'debug' => false, 'auto_reload' => false, 'strict_variables' => true, // يكشف المتغيّرات غير المعرفة ]);

5.2  استخدام وظائف التوطين

يتيح الامتداد الرسمي twig/intl-extra تنسيق التواريخ والأرقام تبعًا للغة المستخدم:

twig
{{ price|format_currency('USD', locale='ar_EG') }} {{ date|format_date(locale='ar_SA', pattern='d MMMM y') }}

5.3  تقسيم القوالب إلى مكوّنات صغيرة (Components)

  • استخرج عناصر متكررة (بطاقة مقال، رسالة خطأ) إلى ملفات داخل مجلد components/.

  • استخدم include مع تمرير المتغيرات ذات الصلة فقط لتقليل الاقتران.

5.4  تسريع الترجمة عبر opcache

احرص على تفعيل Zend Opcache في PHP php.ini لتخزين بايت كود القوالب المجمَّعة.


6 | نصائح SEO متقدمة مع Twig

  1. عناوين ديناميكية: خصّص وسم </code> ووسم <code data-start="6016" data-end="6043"></code> داخل كتل قابلة للتغيير لكل صفحة.</p> </li> <li data-start="6079" data-end="6184" class="" style=""> <p data-start="6082" data-end="6184" class=""><strong data-start="6082" data-end="6102">البيانات المنظمة</strong>: دمج شيفرات JSON‑LD ضمن القوالب باستخدام <code data-start="6144" data-end="6150">|raw</code> بعد توليدها في الطبقة البرمجية.</p> </li> <li data-start="6185" data-end="6278" class="" style=""> <p data-start="6188" data-end="6278" class=""><strong data-start="6188" data-end="6204">تسريع الأداء</strong>: الدمج المسبق للملفات CSS/JS وإرسال HTTP/2 Push Headers عبر خادم NGINX.</p> </li> <li data-start="6279" data-end="6405" class="" style=""> <p data-start="6282" data-end="6405" class=""><strong data-start="6282" data-end="6297">روابط نظيفة</strong>: تكوين المسارات في Symfony أو Laravel لجعل URLs دلالية، ثم استدعاء <code data-start="6365" data-end="6379">{{ path() }}</code> داخل Twig دون ترميز يدوي.</p> </li> </ol> <hr data-start="6407" data-end="6410" class="" style=""> <h2 data-start="6412" data-end="6450" class="" id="mwx-section-19">7 | الأمان: ما وراء الهروب التلقائي</h2> <ul data-start="6452" data-end="6815"> <li data-start="6452" data-end="6573" class="" style=""> <p data-start="6454" data-end="6573" class=""><strong data-start="6454" data-end="6473">تعطيل eval Tags</strong>: يتجاهل Twig أي محاولة لحقن شيفرة PHP؛ إلا أنّ تضمين قوالب خارجية من مصادر غير موثوقة يظل مخاطرة.</p> </li> <li data-start="6574" data-end="6686" class="" style=""> <p data-start="6576" data-end="6686" class=""><strong data-start="6576" data-end="6596">Strict Variables</strong>: يُثير استثناءً عند استدعاء متغيّر غير معرَّف، فيمنع أخطاء منطقية تفضي إلى تسرب بيانات.</p> </li> <li data-start="6687" data-end="6815" class="" style=""> <p data-start="6689" data-end="6815" class=""><strong data-start="6689" data-end="6704">CSP Headers</strong>: أوصت OWASP بإضافة سياسة «Content‑Security‑Policy» تحدُّ من تحميل السكربتات غير المصرح بها، لتكمّل حماية Twig.</p> </li> </ul> <hr data-start="6817" data-end="6820" class="" style=""> <h2 data-start="6822" data-end="6858" class="" id="mwx-section-20">8 | توسيع Twig: إنشاء مرشّح مخصّص</h2> <pre class="overflow-visible!" data-start="6860" data-end="7322"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">php</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-php"><span><span><span class="hljs-keyword">use</span></span><span> </span><span><span class="hljs-title">Twig</span></span><span>\</span><span><span class="hljs-title">Extension</span></span><span>\</span><span><span class="hljs-title">AbstractExtension</span></span><span>; </span><span><span class="hljs-keyword">use</span></span><span> </span><span><span class="hljs-title">Twig</span></span><span>\</span><span><span class="hljs-title">TwigFilter</span></span><span>; </span><span><span class="hljs-class"><span class="hljs-keyword">class</span></span></span><span> </span><span><span class="hljs-title">TaxNumberExtension</span></span><span> </span><span><span class="hljs-keyword">extends</span></span><span> </span><span><span class="hljs-title">AbstractExtension</span></span><span> { </span><span><span class="hljs-keyword">public</span></span><span> </span><span><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span> </span><span><span class="hljs-title">getFilters</span></span><span>(</span><span><span class="hljs-params"></span></span><span>): </span><span><span class="hljs-title">array</span></span><span> { </span><span><span class="hljs-keyword">return</span></span><span> [ </span><span><span class="hljs-keyword">new</span></span><span> </span><span><span class="hljs-title class_">TwigFilter</span></span><span>(</span><span><span class="hljs-string">'tax_format'</span></span><span>, [</span><span><span class="hljs-variable language_">$this</span></span><span>, </span><span><span class="hljs-string">'formatTax'</span></span><span>], [</span><span><span class="hljs-string">'is_safe'</span></span><span> => [</span><span><span class="hljs-string">'html'</span></span><span>]]), ]; } </span><span><span class="hljs-keyword">public</span></span><span> </span><span><span class="hljs-function"><span class="hljs-keyword">function</span></span></span><span> </span><span><span class="hljs-title">formatTax</span></span><span>(</span><span><span class="hljs-params"><span class="hljs-keyword">string</span></span></span><span> </span><span><span class="hljs-variable">$number</span></span><span>): </span><span><span class="hljs-title">string</span></span><span> { </span><span><span class="hljs-keyword">return</span></span><span> </span><span><span class="hljs-string">'VAT‑'</span></span><span> . </span><span><span class="hljs-title function_ invoke__">chunk_split</span></span><span>(</span><span><span class="hljs-variable">$number</span></span><span>, </span><span><span class="hljs-number">3</span></span><span>, </span><span><span class="hljs-string">'‑'</span></span><span>); } } </span><span><span class="hljs-variable">$twig</span></span><span>-></span><span><span class="hljs-title function_ invoke__">addExtension</span></span><span>(</span><span><span class="hljs-keyword">new</span></span><span> </span><span><span class="hljs-title class_">TaxNumberExtension</span></span><span>()); </span></span></code></div></div></pre> <p data-start="7324" data-end="7337" class="">ثم في القالب:</p> <pre class="overflow-visible!" data-start="7339" data-end="7385"><div class="contain-inline-size rounded-md border-[0.5px] border-token-border-medium relative bg-token-sidebar-surface-primary"><div class="flex items-center text-token-text-secondary px-4 py-2 text-xs font-sans justify-between h-9 bg-token-sidebar-surface-primary dark:bg-token-main-surface-secondary select-none rounded-t-[5px]">twig</div><div class="sticky top-9"><div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"><div class="bg-token-sidebar-surface-primary text-token-text-secondary dark:bg-token-main-surface-secondary flex items-center rounded-sm px-2 font-sans text-xs"><button class="flex gap-1 items-center select-none px-4 py-1" aria-label="Copy"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path fill-rule="evenodd" clip-rule="evenodd" d="M7 5C7 3.34315 8.34315 2 10 2H19C20.6569 2 22 3.34315 22 5V14C22 15.6569 20.6569 17 19 17H17V19C17 20.6569 15.6569 22 14 22H5C3.34315 22 2 20.6569 2 19V10C2 8.34315 3.34315 7 5 7H7V5ZM9 7H14C15.6569 7 17 8.34315 17 10V15H19C19.5523 15 20 14.5523 20 14V5C20 4.44772 19.5523 4 19 4H10C9.44772 4 9 4.44772 9 5V7ZM5 9C4.44772 9 4 9.44772 4 10V19C4 19.5523 4.44772 20 5 20H14C14.5523 20 15 19.5523 15 19V10C15 9.44772 14.5523 9 14 9H5Z" fill="currentColor"></path></svg>Copy</button><span class="" data-state="closed"><button class="flex items-center gap-1 px-4 py-1 select-none"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="icon-xs"><path d="M2.5 5.5C4.3 5.2 5.2 4 5.5 2.5C5.8 4 6.7 5.2 8.5 5.5C6.7 5.8 5.8 7 5.5 8.5C5.2 7 4.3 5.8 2.5 5.5Z" fill="currentColor" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"></path><path d="M5.66282 16.5231L5.18413 19.3952C5.12203 19.7678 5.09098 19.9541 5.14876 20.0888C5.19933 20.2067 5.29328 20.3007 5.41118 20.3512C5.54589 20.409 5.73218 20.378 6.10476 20.3159L8.97693 19.8372C9.72813 19.712 10.1037 19.6494 10.4542 19.521C10.7652 19.407 11.0608 19.2549 11.3343 19.068C11.6425 18.8575 11.9118 18.5882 12.4503 18.0497L20 10.5C21.3807 9.11929 21.3807 6.88071 20 5.5C18.6193 4.11929 16.3807 4.11929 15 5.5L7.45026 13.0497C6.91175 13.5882 6.6425 13.8575 6.43197 14.1657C6.24513 14.4392 6.09299 14.7348 5.97903 15.0458C5.85062 15.3963 5.78802 15.7719 5.66282 16.5231Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path><path d="M14.5 7L18.5 11" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>Edit</button></span></div></div></div><div class="overflow-y-auto p-4" dir="ltr"><code class="whitespace-pre! language-twig"><span>{{ company.taxNumber|tax_format }} </span></code></div></div></pre> <hr data-start="7387" data-end="7390" class="" style=""> <h2 data-start="7392" data-end="7446" class="" id="mwx-section-21">9 | استخدام Twig خارج PHP: محركات CMS وأطر عمل أخرى</h2> <ul data-start="7448" data-end="7744"> <li data-start="7448" data-end="7532" class="" style=""> <p data-start="7450" data-end="7532" class=""><strong data-start="7450" data-end="7471">Django‑PHP Bridge</strong>: يُفعَّل للجمع بين منطق Python وكفاءة Twig في صفحات هجينة.</p> </li> <li data-start="7533" data-end="7627" class="" style=""> <p data-start="7535" data-end="7627" class=""><strong data-start="7535" data-end="7549">Statamic 3</strong>: نظام إدارة محتوى لا يتطلب قاعدة بيانات، يعتمد Twig لبناء الواجهات الساكنة.</p> </li> <li data-start="7628" data-end="7744" class="" style=""> <p data-start="7630" data-end="7744" class=""><strong data-start="7630" data-end="7643">Drupal 10</strong>: انتقل منذ الإصدار 8 إلى Twig ما أبسط بناء الثيمات، مع توفّر طبقة «Twig Tweak» لإراحة مطوري المحتوى.</p> </li> </ul> <hr data-start="7746" data-end="7749" class="" style=""> <h2 data-start="7751" data-end="7821" class="" id="mwx-section-22">10 | دراسة حالة: ترقية بوابة إخبارية من Smarty إلى Twig في 14 يومًا</h2> <ol data-start="7823" data-end="8190"> <li data-start="7823" data-end="7869" class="" style=""> <p data-start="7826" data-end="7869" class=""><strong data-start="7826" data-end="7849">جرد القوالب القديمة</strong>: حُصرت 426 ملفًا.</p> </li> <li data-start="7870" data-end="7930" class="" style=""> <p data-start="7873" data-end="7930" class=""><strong data-start="7873" data-end="7899">بناء قالب رئيسي موحَّد</strong>: خفّض الازدواجية بنسبة 38 ٪.</p> </li> <li data-start="7931" data-end="8028" class="" style=""> <p data-start="7934" data-end="8028" class=""><strong data-start="7934" data-end="7958">كتابة محلل تحويل آلي</strong>: استبدل بناء الجمل <code data-start="7978" data-end="7989">{foreach}</code> بـ <code data-start="7993" data-end="8004">{% for %}</code> وأعاد تسمية المرشحات.</p> </li> <li data-start="8029" data-end="8104" class="" style=""> <p data-start="8032" data-end="8104" class=""><strong data-start="8032" data-end="8057">اختبارات قبول تلقائية</strong>: استعان الفريق بـ Behat لضمان تطابق الإخراج.</p> </li> <li data-start="8105" data-end="8190" class="" style=""> <p data-start="8108" data-end="8190" class=""><strong data-start="8108" data-end="8124">إطلاق تجريبي</strong>: سجّل Google PageSpeed Insights ارتفاعًا من 62 إلى 87 خلال أسبوع.</p> </li> </ol> <hr data-start="8192" data-end="8195" class="" style=""> <h2 data-start="8197" data-end="8205" class="" id="mwx-section-23">خاتمة</h2> <p data-start="8207" data-end="8586" class="">قدّم <strong data-start="8212" data-end="8220">Twig</strong> على مدار أكثر من عقد منظومةً ناضجةً لبناء واجهات PHP صديقة للمطور والمصمم في آنٍ معًا، وجمع بين سهولة القراءة وقوة التخصيص. وقد بيّنا في هذا الدليل الموسّع كل ما يلزم للانطلاقة السريعة وتجاوز عنق الزجاجة نحو مشاريع عالية الأداء والأمان. بإتقانك للتقنيات والأنماط المشروحة ستختصر الوقت، وتقلص التكاليف، وترفع جودة المنتج النهائي ليتوافق مع أحدث معايير الويب في 2025.</p> <hr data-start="8588" data-end="8591" class="" style=""> <h3 data-start="8593" data-end="8604" class="" id="mwx-section-24">المراجع</h3> <ol data-start="8606" data-end="8801" data-is-last-node="" data-is-only-node=""> <li data-start="8606" data-end="8698" class="" style=""> <p data-start="8609" data-end="8698" class="">التوثيق الرسمي لمحرك Twig (إصدار 3.8)، <em data-start="8648" data-end="8666">twig.symfony.com</em> – تم الاطلاع في 18 مايو 2025.</p> </li> <li data-start="8699" data-end="8801" class="" style=""> <p data-start="8702" data-end="8801" class="">Fabien Potencier, <em data-start="8720" data-end="8767">SymfonyWorld 2024 Keynote: The Future of Twig</em>, مؤتمر SymfonyWorld، ديسمبر 2024.</p> </li> </ol> </div> </div> </div> </div> <div class="mwx-article-help"><span>معلومة تحتاج إلى تصحيح؟ حدّد الجملة وأرسل بلاغًا واضحًا.</span><a class="mwr-report-button" href="https://mwade3.com/report/?post=3038424" data-report-post="3038424"><span aria-hidden="true">⚑</span> أبلغ عن هذا المحتوى</a></div> </article> <aside class="mwx-reading-sidebar" aria-label="استكشف الموقع"><div class="mwx-side-box"><span class="mwx-eyebrow">دليلك في مواضيع</span><h2>مساحة لكلّ اهتمام.</h2><p>انتقل إلى مجال جديد، أو أكمل القراءة في موضوع تحبّه.</p><a class="mwx-button" href="https://mwade3.com/categories/">اكتشف المجالات <svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></div><nav class="mwx-side-toc" aria-label="محتويات الصفحة"><h2>في هذه الصفحة</h2><a href="#mwx-section-1">مقدمة</a><a href="#mwx-section-2">1 | لماذا Twig؟ الأسس الفلسفية وخريطة الميزات</a><a href="#mwx-section-7">2 | خطوات الانطلاقة السريعة</a><a href="#mwx-section-11">3 | جدول مقارنة بين Twig و PHP «المضمن» (Inline PHP)</a><a href="#mwx-section-12">4 | التعمق في المحرك: دورة الحياة من القالب إلى الإخراج</a><a href="#mwx-section-13">5 | أفضل الممارسات للإنتاج</a><a href="#mwx-section-18">6 | نصائح SEO متقدمة مع Twig</a><a href="#mwx-section-19">7 | الأمان: ما وراء الهروب التلقائي</a><a href="#mwx-section-20">8 | توسيع Twig: إنشاء مرشّح مخصّص</a><a href="#mwx-section-21">9 | استخدام Twig خارج PHP: محركات CMS وأطر عمل أخرى</a><a href="#mwx-section-22">10 | دراسة حالة: ترقية بوابة إخبارية من Smarty إلى Twig في 14 يومًا</a><a href="#mwx-section-23">خاتمة</a></nav><nav class="mwx-side-links" aria-label="روابط مفيدة"><h2>روابط مفيدة</h2><a href="https://mwade3.com/about-us/">من نحن<svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a><a href="https://mwade3.com/contact-us/">تواصل معنا<svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a><a href="https://mwade3.com/faq/">الأسئلة الشائعة<svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a><a href="https://mwade3.com/info/">دليل الموقع والسياسات<svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></nav></aside> </div> <section class="mwx-section mwx-related"><div class="mwx-section-heading"><div><span class="mwx-eyebrow">أكمل الاستكشاف</span><h2>قد تحب أن تقرأ أيضًا</h2></div></div><div class="mwx-cards"> <article class="mwx-card "> <a class="mwx-card-art mwx-tone-technology" href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/" tabindex="-1" aria-hidden="true"> <img width="768" height="547" src="https://mwade3.com/wp-content/uploads/logo-768x547.png" class="mwx-card-image" alt="" decoding="async" srcset="https://mwade3.com/wp-content/uploads/logo-768x547.png 768w, https://mwade3.com/wp-content/uploads/logo-300x214.png 300w, https://mwade3.com/wp-content/uploads/logo.png 1008w" sizes="auto, (max-width: 768px) 100vw, 768px" /> </a> <div class="mwx-card-copy"> <a class="mwx-kicker" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a> <h2><a href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/">إنشاء مدونة باستخدام Node.js</a></h2> <p>إنشاء مدوّنة باستخدام Node.js وExpress (الجزء الأول) في عصر التطور التكنولوجي المتسارع، أصبحت منصات التدوين ال…</p> <div class="mwx-card-bottom"><button class="mwx-save-button mwx-save-compact" type="button" disabled data-save-id="3153372" data-save-title="إنشاء مدونة باستخدام Node.js" data-save-url="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/" aria-pressed="false" aria-label="حفظ للقراءة لاحقًا: إنشاء مدونة باستخدام Node.js"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4Z"/></svg><span>حفظ للقراءة</span></button><time datetime="2025-06-11T10:08:09+03:00">11 يونيو 2025</time><a href="https://mwade3.com/%d8%a5%d9%86%d8%b4%d8%a7%d8%a1-%d9%85%d8%af%d9%88%d9%86%d8%a9-%d8%a8%d8%a7%d8%b3%d8%aa%d8%ae%d8%af%d8%a7%d9%85-node-js/" aria-label="اقرأ: إنشاء مدونة باستخدام Node.js"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></div> </div> </article> <article class="mwx-card "> <a class="mwx-card-art mwx-tone-technology" href="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/" tabindex="-1" aria-hidden="true"> <img width="768" height="547" src="https://mwade3.com/wp-content/uploads/logo-768x547.png" class="mwx-card-image" alt="" decoding="async" srcset="https://mwade3.com/wp-content/uploads/logo-768x547.png 768w, https://mwade3.com/wp-content/uploads/logo-300x214.png 300w, https://mwade3.com/wp-content/uploads/logo.png 1008w" sizes="auto, (max-width: 768px) 100vw, 768px" /> </a> <div class="mwx-card-copy"> <a class="mwx-kicker" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a> <h2><a href="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/">تحويل HTML إلى قالب ووردبريس</a></h2> <p>مقدمة إلى تطوير قوالب ووردبريس: تحويل صفحة HTML إلى قالب ووردبريس يشكل ووردبريس أحد أكثر أنظمة إدارة المحتوى ا…</p> <div class="mwx-card-bottom"><button class="mwx-save-button mwx-save-compact" type="button" disabled data-save-id="3153351" data-save-title="تحويل HTML إلى قالب ووردبريس" data-save-url="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/" aria-pressed="false" aria-label="حفظ للقراءة لاحقًا: تحويل HTML إلى قالب ووردبريس"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4Z"/></svg><span>حفظ للقراءة</span></button><time datetime="2025-06-11T10:03:35+03:00">11 يونيو 2025</time><a href="https://mwade3.com/%d8%aa%d8%ad%d9%88%d9%8a%d9%84-html-%d8%a5%d9%84%d9%89-%d9%82%d8%a7%d9%84%d8%a8-%d9%88%d9%88%d8%b1%d8%af%d8%a8%d8%b1%d9%8a%d8%b3/" aria-label="اقرأ: تحويل HTML إلى قالب ووردبريس"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></div> </div> </article> <article class="mwx-card "> <a class="mwx-card-art mwx-tone-technology" href="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/" tabindex="-1" aria-hidden="true"> <img width="768" height="547" src="https://mwade3.com/wp-content/uploads/logo-768x547.png" class="mwx-card-image" alt="" decoding="async" srcset="https://mwade3.com/wp-content/uploads/logo-768x547.png 768w, https://mwade3.com/wp-content/uploads/logo-300x214.png 300w, https://mwade3.com/wp-content/uploads/logo.png 1008w" sizes="auto, (max-width: 768px) 100vw, 768px" /> </a> <div class="mwx-card-copy"> <a class="mwx-kicker" href="https://mwade3.com/category/%d8%a7%d9%84%d8%a8%d8%b1%d9%85%d8%ac%d8%a9/">البرمجة</a> <h2><a href="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/">تنظيم الشيفرة في JavaScript</a></h2> <p>تصميم النّصوص البرمجيّة: تنظيم JavaScript يُعدُّ تنظيم النصوص البرمجية في JavaScript من الركائز الأساسية التي…</p> <div class="mwx-card-bottom"><button class="mwx-save-button mwx-save-compact" type="button" disabled data-save-id="3153329" data-save-title="تنظيم الشيفرة في JavaScript" data-save-url="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/" aria-pressed="false" aria-label="حفظ للقراءة لاحقًا: تنظيم الشيفرة في JavaScript"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 3h12v18l-6-4-6 4Z"/></svg><span>حفظ للقراءة</span></button><time datetime="2025-06-11T09:59:03+03:00">11 يونيو 2025</time><a href="https://mwade3.com/%d8%aa%d9%86%d8%b8%d9%8a%d9%85-%d8%a7%d9%84%d8%b4%d9%8a%d9%81%d8%b1%d8%a9-%d9%81%d9%8a-javascript/" aria-label="اقرأ: تنظيم الشيفرة في JavaScript"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 12H4m6-6-6 6 6 6"/></svg></a></div> </div> </article> </div></section> </main> <footer class="mwx-footer"> <div class="mwx-container mwx-footer-grid"> <div class="mwx-footer-brand"><a class="mwx-brand" href="https://mwade3.com/"><span class="mwx-brand-mark" aria-hidden="true"><svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 5v16M12 5C9 3 5 3 2 4v15c4-1 7-1 10 2 3-3 6-3 10-2V4c-3-1-7-1-10 1Z"/></svg></span><span><strong>مواضيع<span class="mwx-brand-dot">.</span></strong><small>كل قراءة، فكرة جديدة</small></span></a><p>معرفة وأدوات تساعدك في يومك.<br>اقرأ، جرّب، ورتّب ما يهمك.</p></div> <nav aria-label="استكشف مواضيع"><h2>استكشف</h2><a href="https://mwade3.com/tools/">أدوات مواضيع</a><a href="https://mwade3.com/paths/">مسارات الاستكشاف</a><a href="https://mwade3.com/library/">مكتبتي</a><a href="https://mwade3.com/">الرئيسية</a><a href="https://mwade3.com/categories/">المجالات والتصنيفات</a><a href="https://mwade3.com/last/">آخر المواضيع</a><a href="https://mwade3.com/faq/">الأسئلة الشائعة</a></nav> <nav aria-label="عن الموقع"><h2>عن مواضيع</h2><a href="https://mwade3.com/weather/">الطقس</a><a href="https://mwade3.com/today/">التاريخ والمناسبات</a><a href="https://mwade3.com/about-us/">من نحن</a><a href="https://mwade3.com/%d9%85%d8%a8%d8%a7%d8%af%d8%a6-%d8%a7%d9%84%d9%86%d8%b4%d8%b1-%d9%81%d9%8a-%d9%85%d9%86%d8%b5%d8%a9-%d9%85%d9%88%d8%a7%d8%b6%d9%8a%d8%b9/">مبادئ النشر</a><a href="https://mwade3.com/contact-us/">تواصل معنا</a><a href="https://mwade3.com/report/">الإبلاغ عن محتوى</a></nav> <nav aria-label="السياسات والحقوق"><h2>السياسات والحقوق</h2><a href="https://mwade3.com/privacy/">سياسة الخصوصية</a><a href="https://mwade3.com/cookies/">ملفات تعريف الارتباط</a><button type="button" class="mwx-footer-privacy" data-mwc-open-preferences>خيارات الخصوصية</button><a href="https://mwade3.com/terms/">شروط الاستخدام</a><a href="https://mwade3.com/info/">جميع السياسات والمعلومات</a></nav> </div> <div class="mwx-container mwx-footer-bottom"><span>© 2026 مواضيع. جميع الحقوق محفوظة.</span><a href="https://mwade3.com/contact-us/">تواصل معنا من الموقع <svg class="mwx-icon " viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="m3 6 9 7 9-7"/></svg></a><a href="#mwx-site" class="mwx-back-top">إلى أعلى الصفحة ↑</a></div> </footer> <div class="mwx-toast" role="status" aria-live="polite" hidden></div></div> <script type="speculationrules"> {"prefetch":[{"source":"document","where":{"and":[{"href_matches":"/*"},{"not":{"href_matches":["/wp-*.php","/wp-admin/*","/wp-content/uploads/*","/wp-content/*","/wp-content/plugins/*","/wp-content/themes/jannah-new/*","/*\\?(.+)"]}},{"not":{"selector_matches":"a[rel~=\"nofollow\"]"}},{"not":{"selector_matches":".no-prefetch, .no-prefetch a"}}]},"eagerness":"conservative"}]} </script> <script id="mwc-privacy-js-before"> window.mwcConsentConfig={"version":"2026-10-12.1","expiryDays":180,"cookieName":"mwc_consent","privacyUrl":"https:\/\/mwade3.com\/privacy\/","cookiesUrl":"https:\/\/mwade3.com\/cookies\/","termsUrl":"https:\/\/mwade3.com\/terms\/","contactUrl":"https:\/\/mwade3.com\/contact-us\/","language":"ar","advertising":false,"lastUpdatedAr":"12 \u062a\u0634\u0631\u064a\u0646 \u0627\u0644\u0623\u0648\u0644 2026","lastUpdatedEn":"12 October 2026"}; //# sourceURL=mwc-privacy-js-before </script> <script data-wp-strategy="defer" defer id="mwc-privacy-js" src="https://mwade3.com/wp-content/plugins/mwade3-privacy/assets/privacy.js?ver=1.0.0"></script> <script data-wp-strategy="defer" defer id="mwx-site-js" src="https://mwade3.com/wp-content/plugins/mwade3-experience/assets/site.js?ver=3.3.5"></script> <script data-wp-strategy="defer" defer id="mwx-calculations-js" src="https://mwade3.com/wp-content/plugins/mwade3-experience/assets/calculations.js?ver=3.3.5"></script> <script data-wp-strategy="defer" defer id="mwx-portal-js" src="https://mwade3.com/wp-content/plugins/mwade3-experience/assets/portal.js?ver=3.3.5"></script> <script data-wp-strategy="defer" defer id="mwx-live-js" src="https://mwade3.com/wp-content/plugins/mwade3-experience/assets/live.js?ver=3.3.5"></script> <script data-wp-strategy="defer" defer id="mwc-desk-js" src="https://mwade3.com/wp-content/plugins/mwade3-contact/assets/desk.js?ver=1.0.0"></script> <script id="wp-consent-api-js-extra"> var consent_api = {"consent_type":"optin","waitfor_consent_hook":"","cookie_expiration":"30","cookie_prefix":"wp_consent","services":[]}; //# sourceURL=wp-consent-api-js-extra </script> <script id="wp-consent-api-js" src="https://mwade3.com/wp-content/plugins/wp-consent-api/assets/js/wp-consent-api.min.js?ver=2.1.0"></script> <div id="mwc-privacy-root" class="mwc-root" data-version="2026-10-12.1"></div> <noscript><div class="mwc-noscript" lang="ar" dir="rtl">ملفات الارتباط الاختيارية متوقفة لأن JavaScript غير متاح. يمكنك قراءة <a href="https://mwade3.com/cookies/">سياسة ملفات الارتباط</a>.</div></noscript> </body> </html>