الفرق بين المراجعتين ل"Twig/embed"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(1.0: إضافة عنوان الصفحة.)
 
(إدخال 2.0 تمام المحتوى وانظر أيضًا والتصانيف والمصادر.)
سطر 1: سطر 1:
 
<noinclude>{{DISPLAYTITLE:الوسم embed في Twig}}</noinclude>
 
<noinclude>{{DISPLAYTITLE:الوسم embed في Twig}}</noinclude>
 +
يج{{DISPLAYTITLE:الوسم embed في Twig}}مع وسم embed سلوك كل من الوسمين [[Twig/include|<code>include</code>]] و <code>[[Twig/extends|extends]]</code>، إذ يسمح لك بإدراج محتويات قالب آخر كما يفعل include، لكنه كذلك يسمح لك بتخطي أي كتلة معرفة داخل القالب المدرَج كما يحدث عند توسيع قالب ما، ويمكن النظر إلى القالب المضمَّن على أنه هيكل واجهة مصغر (micro layout skeleton).<syntaxhighlight lang="twig">
 +
{% embed "teasers_skeleton.twig" %}
 +
    {# "teasers_skeleton.twig" هذه الكتل معرفة في #}
 +
    {# ونحن نتخطاها من هنا:                    #}
 +
    {% block left_teaser %}
 +
        بعض المحتوى للصندوق الأيسر
 +
    {% endblock %}
 +
    {% block right_teaser %}
 +
        بعض المحتوى للصندوق الأيسر
 +
    {% endblock %}
 +
{% endembed %}
 +
</syntaxhighlight>ينقل الوسم <code>embed</code> مبدأ وراثة القالب ليجعله على مستوى أجزاء المحتوى، فإن كانت وراثة القالب تسمح لك بإنشاء ما يشبه هياكل المستندات التي تُملأ بقوالب فرعية، فإن وسم <code>embed</code> يسمح لك بإنشاء هياكل لوحدات صغيرة من المحتوى، وتعيد استخدامها في أي مكان تريد.
 +
 +
انظر المثال المبسط التالي الذي يوضح حالة استخدام لوسم <code>embed</code>، والذي يُشارَك فيه قالب أساسي بواسطة عدة صفحات HTML، ويعرّف كتلة وحيدة اسمها "content":<syntaxhighlight lang="twig">
 +
 +
┌─── تخطيط الصفحة ────────────────────┐
 +
│                                    │
 +
│          ┌── "content" كتلة  ──┐  │
 +
│          │                    │  │
 +
│          │                    │  │
 +
│          │ (ضع قالبًا فرعيًا هنا)│  │
 +
│          │                    │  │
 +
│          │                    │  │
 +
│          └─────────────────────┘  │
 +
│                                    │
 +
└─────────────────────────────────────┘
 +
</syntaxhighlight>تتشارك بعض الصفحات -لتكن "foo" و "bar"- نفس بنية المحتوى، وهي صندوقين رأسيين فوق بعضهما:<syntaxhighlight lang="twig">
 +
 +
┌─── تخطيط الصفحة ────────────────────┐
 +
│                                    │
 +
│          ┌── "content" الكتلة ─┐  │
 +
│          │ ┌─ "top" الكتلة ──┐ │  │
 +
│          │ │                │ │  │
 +
│          │ └─────────────────┘ │  │
 +
│          │ ┌ "bottom" الكتلة ┐ │  │
 +
│          │ │                │ │  │
 +
│          │ └─────────────────┘ │  │
 +
│          └─────────────────────┘  │
 +
│                                    │
 +
└─────────────────────────────────────┘
 +
</syntaxhighlight>وتتشارك صفحات أخرى -مثل "boom" و "baz"- بنية مختلفة للمحتوى، على هيئة صندوقين متجاورين:<syntaxhighlight lang="twig">
 +
┌─── تخطيط الصفحة ────────────────────┐
 +
│                                    │
 +
│          ┌── "content" الكتلة ─┐  │
 +
│          │                    │  │   
 +
│          │ ┌─ كتلة ┌ ┐ كتلة ─┐ │  │
 +
│          │ │"left" │ │"right"│ │  │
 +
│          │ │      │ │      │ │  │
 +
│          │ │      │ │      │ │  │
 +
│          │ └───────┘ └───────┘ │  │
 +
│          └─────────────────────┘  │
 +
│                                    │
 +
└─────────────────────────────────────┘
 +
</syntaxhighlight>سيكون لديك طريقتان تصمم بهما قوالبك من غير استخدام وسم <code>embed</code>:
 +
 +
* إنشاء قالبين أساسيين وسيطين (intermediate) يوسعان تخطيط القالب الأصلي، واحد بصناديق رأسية لتستخدمه صفحتي <code>foo</code> و <code>bar</code>، والآخر بصناديق جنبًا إلى جنب لتستخدمه صفحتي <code>boom</code> و <code>baz</code>.
 +
 +
* تضمين ترميز الصناديق في قالب كل صفحة مباشرة.
 +
 +
غير أن هاتين الطريقتين فيهما أوجه قصور كبيرة:
 +
 +
فالطريقة الأولى وإن كانت ستنجح في هذا المثال البسيط، إلا أننا لو أضفنا شريطًا جانبيًا سيحتوي على هياكل أخرى مختلفة ومتكررة للمحتوى، فسنحتاج إلى إنشاء قوالب أساسية وسيطة لكل تجميعات هياكل المحتوى تلك، ولهيكل الشريط الجانبي، وهكذا.
 +
 +
أما الطريقة الثانية فيدخل فيها تكرار لشيفرة مشتركة، وعيب ذلك أن أي تغيير سيعني إيجاد جميع نسخ الهيكل الذي تم عليه التغيير وتعديلها جميعًا، ويجب أن يحقَّق التصحيح في كل نسخة، وربما تخرج النسخ عن المزامنة بسبب تعديلات غير منضبطة، وهكذا.
 +
 +
وهنا في مثل تلك الحالة تبرز أهمية وسم <code>embed</code>، إذ يمكن أن تظل شيفرة التخطيط المشتركة في قالب أساسي واحد، ثم تذهب هياكل المحتوى المختلفة التي يمكن أن نسميها هنا "تخطيطات مصغرة" إلى قوالب منفصلة تضمَّن عند الحاجة:
 +
 +
قالب الصفحة <code>foo.twig</code>:<syntaxhighlight lang="twig">
 +
{% extends "layout_skeleton.twig" %}
 +
 +
{% block content %}
 +
    {% embed "vertical_boxes_skeleton.twig" %}
 +
        {% block top %}
 +
            بعض المحتوى للصندوق العلوي
 +
        {% endblock %}
 +
 +
        {% block bottom %}
 +
            بعض المحتوى للصندوق السفلي
 +
        {% endblock %}
 +
    {% endembed %}
 +
{% endblock %}
 +
</syntaxhighlight>وفيما يلي شيفرة  <code>vertical_boxes_skeleton.twig</code>:<syntaxhighlight lang="twig">
 +
<div class="top_box">
 +
    {% block top %}
 +
        المحتوى الافتراضي للصندوق العلوي
 +
    {% endblock %}
 +
</div>
 +
 +
<div class="bottom_box">
 +
    {% block bottom %}
 +
        المحتوى الافتراضي للصندوق السفلي
 +
    {% endblock %}
 +
</div>
 +
</syntaxhighlight>والهدف من قالب  <code>vertical_boxes_skeleton.twig</code> هو استبعاد ترميز HTML من الصناديق.
 +
 +
يأخذ الوسم <code>embed</code> نفس الوسائط التي يأخذها الوسم <code>include</code>:<syntaxhighlight lang="twig">
 +
{% embed "base" with {'foo': 'bar'} %}
 +
    ...
 +
{% endembed %}
 +
 +
{% embed "base" with {'foo': 'bar'} only %}
 +
    ...
 +
{% endembed %}
 +
 +
{% embed "base" ignore missing %}
 +
    ...
 +
{% endembed %}
 +
</syntaxhighlight>انتبه إلى أن خطط التهريب التلقائي التي تبنى على أسماء القوالب لن تعمل كما تتوقع لها إذا غيرت السياق، بأن تضمِّن قالب CSS أو جافاسكربت مثلًا في قالب HTML، وذلك لأن القوالب المضمنة ليس لها أسماء.
 +
 +
وفي مثل تلك الحالة، اضبط الخطة الافتراضية للتهريب التلقائي باستخدام وسم <code>autoescape</code>.
 +
 +
== انظر أيضًا ==
 +
 +
* [[Twig/installation|مقدمة عن محرك القوالب Twig.]]
 +
* [[Twig/include|الوسم include في Twig.]]
 +
 +
== المصادر ==
 +
 +
* [https://twig.symfony.com/doc/3.x/tags/embed.html صفحة الوسم embed في توثيق Twig الرسمي.]
 +
 +
[[تصنيف:Twig]]
 +
[[تصنيف:Twig Tags]]

مراجعة 03:12، 25 أبريل 2021

يجمع وسم embed سلوك كل من الوسمين include و extends، إذ يسمح لك بإدراج محتويات قالب آخر كما يفعل include، لكنه كذلك يسمح لك بتخطي أي كتلة معرفة داخل القالب المدرَج كما يحدث عند توسيع قالب ما، ويمكن النظر إلى القالب المضمَّن على أنه هيكل واجهة مصغر (micro layout skeleton).

{% embed "teasers_skeleton.twig" %}
    {# "teasers_skeleton.twig" هذه الكتل معرفة في #}
    {# ونحن نتخطاها من هنا:                    #}
    {% block left_teaser %}
        بعض المحتوى للصندوق الأيسر
    {% endblock %}
    {% block right_teaser %}
        بعض المحتوى للصندوق الأيسر
    {% endblock %}
{% endembed %}

ينقل الوسم embed مبدأ وراثة القالب ليجعله على مستوى أجزاء المحتوى، فإن كانت وراثة القالب تسمح لك بإنشاء ما يشبه هياكل المستندات التي تُملأ بقوالب فرعية، فإن وسم embed يسمح لك بإنشاء هياكل لوحدات صغيرة من المحتوى، وتعيد استخدامها في أي مكان تريد. انظر المثال المبسط التالي الذي يوضح حالة استخدام لوسم embed، والذي يُشارَك فيه قالب أساسي بواسطة عدة صفحات HTML، ويعرّف كتلة وحيدة اسمها "content":

┌─── تخطيط الصفحة ────────────────────┐
│                                     │
│           ┌── "content" كتلة  ──┐   │
│           │                     │   │
│           │                     │   │
│           │ (ضع قالبًا فرعيًا هنا)│   │
│           │                     │   │
│           │                     │   │
│           └─────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

تتشارك بعض الصفحات -لتكن "foo" و "bar"- نفس بنية المحتوى، وهي صندوقين رأسيين فوق بعضهما:

┌─── تخطيط الصفحة ────────────────────┐
│                                     │
│           ┌── "content" الكتلة ─┐   │
│           │ ┌─ "top" الكتلة ──┐ │   │
│           │ │                 │ │   │
│           │ └─────────────────┘ │   │
│           │ ┌ "bottom" الكتلة ┐ │   │
│           │ │                 │ │   │
│           │ └─────────────────┘ │   │
│           └─────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

وتتشارك صفحات أخرى -مثل "boom" و "baz"- بنية مختلفة للمحتوى، على هيئة صندوقين متجاورين:

┌─── تخطيط الصفحة ────────────────────┐
│                                     │
│           ┌── "content" الكتلة ─┐   │
│           │                     │   │    
│           │ ┌─ كتلة ┌ ┐ كتلة ─┐ │   │
│           │ │"left" │ │"right"│ │   │
│           │ │       │ │       │ │   │
│           │ │       │ │       │ │   │
│           │ └───────┘ └───────┘ │   │
│           └─────────────────────┘   │
│                                     │
└─────────────────────────────────────┘

سيكون لديك طريقتان تصمم بهما قوالبك من غير استخدام وسم embed:

  • إنشاء قالبين أساسيين وسيطين (intermediate) يوسعان تخطيط القالب الأصلي، واحد بصناديق رأسية لتستخدمه صفحتي foo و bar، والآخر بصناديق جنبًا إلى جنب لتستخدمه صفحتي boom و baz.
  • تضمين ترميز الصناديق في قالب كل صفحة مباشرة.

غير أن هاتين الطريقتين فيهما أوجه قصور كبيرة:

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

أما الطريقة الثانية فيدخل فيها تكرار لشيفرة مشتركة، وعيب ذلك أن أي تغيير سيعني إيجاد جميع نسخ الهيكل الذي تم عليه التغيير وتعديلها جميعًا، ويجب أن يحقَّق التصحيح في كل نسخة، وربما تخرج النسخ عن المزامنة بسبب تعديلات غير منضبطة، وهكذا.

وهنا في مثل تلك الحالة تبرز أهمية وسم embed، إذ يمكن أن تظل شيفرة التخطيط المشتركة في قالب أساسي واحد، ثم تذهب هياكل المحتوى المختلفة التي يمكن أن نسميها هنا "تخطيطات مصغرة" إلى قوالب منفصلة تضمَّن عند الحاجة:

قالب الصفحة foo.twig:

{% extends "layout_skeleton.twig" %}

{% block content %}
    {% embed "vertical_boxes_skeleton.twig" %}
        {% block top %}
            بعض المحتوى للصندوق العلوي
        {% endblock %}

        {% block bottom %}
            بعض المحتوى للصندوق السفلي
        {% endblock %}
    {% endembed %}
{% endblock %}

وفيما يلي شيفرة vertical_boxes_skeleton.twig:

<div class="top_box">
    {% block top %}
        المحتوى الافتراضي للصندوق العلوي
    {% endblock %}
</div>

<div class="bottom_box">
    {% block bottom %}
        المحتوى الافتراضي للصندوق السفلي
    {% endblock %}
</div>

والهدف من قالب vertical_boxes_skeleton.twig هو استبعاد ترميز HTML من الصناديق. يأخذ الوسم embed نفس الوسائط التي يأخذها الوسم include:

{% embed "base" with {'foo': 'bar'} %}
    ...
{% endembed %}

{% embed "base" with {'foo': 'bar'} only %}
    ...
{% endembed %}

{% embed "base" ignore missing %}
    ...
{% endembed %}

انتبه إلى أن خطط التهريب التلقائي التي تبنى على أسماء القوالب لن تعمل كما تتوقع لها إذا غيرت السياق، بأن تضمِّن قالب CSS أو جافاسكربت مثلًا في قالب HTML، وذلك لأن القوالب المضمنة ليس لها أسماء.

وفي مثل تلك الحالة، اضبط الخطة الافتراضية للتهريب التلقائي باستخدام وسم autoescape.

انظر أيضًا

المصادر

مجلوبة من "https://wiki.hsoub.com/index.php?title=Twig/embed&oldid=30544"